How well does XenForo do in csslint

Rigel Kentaurus

Rigel Kentaurus

Well-known member
So, I was reading this article
http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/

And then, I decided to do the exercise of applying it to XenForo to see how well it ranked :)
I used http://xenforo.com/community/css.php?css=xenforo,form,public&style=1&d=1308229529

... and, I got :)

csslint: There are 736 errors and warnings in xenforo.css.
Code: 
csslint: There are 736 errors and warnings in xenforo.css.

xenforo.css:
1: warning
Too many font-size declarations (76), abstraction needed.

xenforo.css:
42: error at line 256, col 256
Expected RBRACE at line 256, character 26.
    *clear:expression( style.color = parentNode.currentStyle.color, style.clear = "none", 0);

xenforo.css:
151: error at line 757, col 757
Unexpected token '@' at line 757, char 14.
    min-height: @menuMinheight;

xenforo.css:
618: error at line 3388, col 3388
Expected RBRACE at line 3388, character 25.
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);

xenforo.css:
671: error at line 3707, col 3707
Expected RBRACE at line 3707, character 18.
        height: 102px;*/ /* +2 borders */

.... well, and a bunch of them, download the txt attached here for the complete results :)
 

Attachments

And ... for your drama experience. Here is vBulletin's

From, https://www.vbulletin.com/forum/css...gets.css,sidebar.css,options.css,tagcloud.css

csslint: There are 133 errors and warnings in vbulletin.css

Code: 
csslint: There are 133 errors and warnings in vbulletin.css.

vbulletin.css:
1: warning
Too many font-size declarations (28), abstraction needed.

vbulletin.css:
2: warning
Too many floats (36), abstraction needed.

vbulletin.css:
3: warning at line 17, col 17
Broken box model: using width with border.
    border: 1px solid #5a7f97;

Obviously, the conclusion is that vBulletin is better in every aspect because a static analysis tool threw less errors. And 736/133 means that vB is 5 times better than XF, of course ;)
 

Attachments

Code: 
csslint: There are 736 errors and warnings in xenforo.css.

xenforo.css:
1: warning
Too many font-size declarations (76), abstraction needed.

Heh, compare this with one of Kier's tweets
@rikkitissier Ooh that's a nasty one. Rounded corners and having too many typefaces defined in 'font-family' are notorious Apache killers!
Click to expand...

That's kinda funny :D
 
Rigel Kentaurus said:
So, I was reading this article
http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/

And then, I decided to do the exercise of applying it to XenForo to see how well it ranked :)
I used http://xenforo.com/community/css.php?css=xenforo,form,public&style=1&d=1308229529

... and, I got :)

csslint: There are 736 errors and warnings in xenforo.css.
Code: 
csslint: There are 736 errors and warnings in xenforo.css.

xenforo.css:
1: warning
Too many font-size declarations (76), abstraction needed.

xenforo.css:
42: error at line 256, col 256
Expected RBRACE at line 256, character 26.
    *clear:expression( style.color = parentNode.currentStyle.color, style.clear = "none", 0);

xenforo.css:
151: error at line 757, col 757
Unexpected token '@' at line 757, char 14.
    min-height: @menuMinheight;

xenforo.css:
618: error at line 3388, col 3388
Expected RBRACE at line 3388, character 25.
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);

xenforo.css:
671: error at line 3707, col 3707
Expected RBRACE at line 3707, character 18.
        height: 102px;*/ /* +2 borders */

.... well, and a bunch of them, download the txt attached here for the complete results :)
Click to expand...
*clear:expression = IE hacks to fix various issues.
@menuMinheight = style property syntax.

Many of the warning/errors I saw were either fixes (browser specific code to fix things or make them work as a fall back) or was style property declarations.
 
Forsaken said:
*clear:expression = IE hacks to fix various issues.
@menuMinheight = style property syntax.

Many of the warning/errors I saw were either fixes (browser specific code to fix things or make them work as a fall back) or was style property declarations.
Click to expand...
The style property syntax is my impression should be fixed (as this is the parsed thing and not a declaration, and I took this from the live site)
The others .. I guess are ok. Since we are already doing the css.php? way of fetching the stylesheet I wonder if it could account for the user-agent and only deliver the IE markup to IE browsers (if it is not already doing that)

Some recommendations make sense, like not having units for value 0 (e.g. height: 0px)
 
Rigel Kentaurus said:
The style property syntax is my impression should be fixed (as this is the parsed thing and not a declaration, and I took this from the live site)
The others .. I guess are ok. Since we are already doing the css.php? way of fetching the stylesheet I wonder if it could account for the user-agent and only deliver the IE markup to IE browsers (if it is not already doing that)

Some recommendations make sense, like not having units for value 0 (e.g. height: 0px)
Click to expand...
Nice idea about the IE-specific thing, not sure how easy it'd be though.
 
Top Bottom