• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How well does XenForo do in csslint

Rigel Kentaurus

Well-known member
#1
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

Rigel Kentaurus

Well-known member
#2
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

James

Well-known member
#3
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!
That's kinda funny :D
 

Forsaken

Well-known member
#6
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 :)
*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.
 

Rigel Kentaurus

Well-known member
#7
*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.
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)
 

James

Well-known member
#8
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)
Nice idea about the IE-specific thing, not sure how easy it'd be though.