CSS Wizardry

[Adam]

This guy works at the same company I do, and in a new project we've been adopting a lot of the techniques he's written about in his blog. He raises some very good points, I well recommend reading it.

 

http://csswizardry.com/

[Philip]

Mmm, I have to disagree with some of the code practices / thoughts butttttt ... I'm lazy atm to write a full-on comment on it. Maybe later tonight after a few beers

[scootstah]

I feel that he is breaking CSS down to be as simplified as possible. The resulting code would look like someone who knew only how to use ID and class selectors.

 

Maybe I am talking out of my ass but I really doubt there is a significant difference between ul.nav{} and .nav{}.

 

EDIT: Also, I feel that you are really limiting what CSS can accomplish this way. You are going out of your way to avoid using descendant selectors and such, which just seems sloppy. Unless someone can show me that descendant selectors are dramatically slower I will continue using them.

 

To me, this just looks like the micro-optimizations that are common in PHP. Like only using single quotes instead of double quotes, or if (!$var) instead of if (is_null($var)). Technically it's faster, but the difference is likely immeasurable in most situations.

[Adam]

ul.nav not cannot be used on an ol..? He's basically trying to create abstract classes, or "objects" as he calls them, that any element can inherit to prevent duplicate CSS. On smaller sites I probably wouldn't bother, but on site's like Sky's it's really effective in minimizing the amount of work you have to do. By having standard objects it also makes theming or branding areas of a website differently really easy. Personally I think he's kind of presenting the full-on solution there, I would meet somewhere in the middle for your average site.

 

There's more posts than just that one though..

[scootstah]

ul.nav not cannot be used on an ol..?

 

No, but why would you want it to be? Are you really going to have a UL nav in one spot and an OL nav in another spot? That seems weird to me.

 

I get the whole "global object" thing but I don't necessarily see a strong use-case here. I mean, not every class needs that functionality. Sometimes you do, sometimes you don't. I really don't think there is an end-all solution here, which is sort of the vibe I got from the article.

[kicken]

I've kind off moved toward using a lot of classes for things but I do still use things like child or descendant selectors.  I can see where avoiding them could have benefits though.  I've been bit in the ass a couple times by specificity due to a rule higher up having a higher specificity than one further down due to including more elements in it's selector chain. 

 

My recent re-design of my personal site I've been setting up classes describing the content but might style it differently in the css based on where it is used.  For example I have a class .author which I use to define the author name of an article/comment/whatever.  I use this in a few different places:

- div.published-by which is like a by-line area under an article title

- <address> tag that denotes a signature at the end of an article.

- div.comment which is for comments on an article.

 

The author class has some generic styles like italic font but I will alter it as needed based on the location it is used in via css.  It seems to work well so far and keeps me from having a bunch of separate classes all over the site.  I do so little front-end work these days though, and what I do work on is so simplistic that I'm not sure my experiences are really worth that much overall lol.

 

 

 

 

[Adam]

His "nav" object isn't necessarily the main navigation menu, it's just any horizontal list; main navigation (ul), breadcrumbs (ol), footer navigation (ul), etc. I'm not saying it does everything for you, it just keeps things consistent and re-usable.

[scootstah]

My recent re-design of my personal site I've been setting up classes describing the content but might style it differently in the css based on where it is used.  For example I have a class .author which I use to define the author name of an article/comment/whatever.  I use this in a few different places:

- div.published-by which is like a by-line area under an article title

- <address> tag that denotes a signature at the end of an article.

- div.comment which is for comments on an article.

 

I tend to do things like this as well. Granted, it may be easier to quickly figure out what goes where if you used separate classes, or even multiple classes (the generic .author class and then more specific ones like published-by-author, comment-author)... but it still seems like more work to me.

 

EDIT:

His "nav" object isn't necessarily the main navigation menu, it's just any horizontal list; main navigation (ul), breadcrumbs (ol), footer navigation (ul), etc. I'm not saying it does everything for you, it just keeps things consistent and re-usable.

 

Just curious, is there any specific reason for using OL over UL for breadcrumbs?

[Adam]

Just semantics - breadcrumbs are always ordered. I'm not exactly sure what impact that would have though. Not specifying the tag name has other benefits as well, as kicken mentioned. Here's his full post about the "nav" abstraction.

 

Here's a few other useful ones:

 

http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/

http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

http://csswizardry.com/2011/07/responsive-images-right-now/

[Philip]

I guess the impression I get is that my 'normal' way of implementing something is "wrong" according to him. This is an example of my normal markup for a news article on page:

 

<article class="news">
    <header>
        <hgroup>
            <h3>Article Title</h3>
            <h4>Article Subtitle</h3>
        </hgroup>
        <time datetime="2012-05-12" pubdate>Tuesday, May 22<sup>nd</sup>, 2012</time>
    </header>
    <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</p>
    <figure>
        <img src="foobar.jpg" alt="Foo bar">
        <figcaption>Foo bar</figcaption>
    </figure>
    <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
    <footer>
        <section class="vcard">
            <header>
                <h4>Author</h4>
            </header>
            <address>
                <a href="/user/foobar">Philip Lawrence</a>
            </address>
            <p>In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. In aliquet facilisis condimentum.</p>
        </section>
        <nav>
            <header>
                <h4>Relevant Articles</h4>
            </header>
            <ul>
                <li><a href="/goo">Foo about goo</a></li>
                <li><a href="/foo">Goo about foo</a></li>
                <li><a href="/boo">Boo about goo</a></li>
            </ul>
        </nav>
    </footer>
</article>

 

With that HTML, I'd use something like the following CSS for it:

.news > header {
    background-color: #aaa;
}
.news > footer {
    background-color: #888;
}
.news .vcard > header {
    border-bottom-color: #999;
}

/* LATER */
.vcard {
     /* general vcard info */
}
.vcard > header {
    border-bottom: 1px solid #333;
}

 

 

 

However, I feel like he would want a lot more classes throughout my html, to the point of something like this:

<article class="news">
    <header class="news-header">
        <hgroup>
            <h3>Article Title</h3>
            <h4>Article Subtitle</h3>
        </hgroup>
        <time datetime="2012-05-12" pubdate class="news-time">Tuesday, May 22<sup>nd</sup>, 2012</time>
    </header>
    <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</p>
    <figure class="news-figure">
        <img src="foobar.jpg" alt="Foo bar">
        <figcaption>Foo bar</figcaption>
    </figure>
    <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
    <footer class="news-footer">
        <section class="vcard article-vcard">
            <header class="article-vcard-header">
                <h4>Author</h4>
            </header>
            <address class="article-profile>
                <a href="/user/foobar">Philip Lawrence</a>
            </address>
            <p class="article-bio">In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. In aliquet facilisis condimentum.</p>
        </section>
        <nav class="news-footer-nav">
            <header>
                <h4>Relevant Articles</h4>
            </header>
            <ul class="news-footer-relevant">
                <li><a href="/goo">Foo about goo</a></li>
                <li><a href="/foo">Goo about foo</a></li>
                <li><a href="/boo">Boo about goo</a></li>
            </ul>
        </nav>
    </footer>
</article>

 

Which would in return, change my CSS to something like:

.news-header {
    background-color: #aaa;
}
.news-footer {
    background-color: #888;
}
.article-vcard-header {
   border-bottom: 1px solid #999;
}

/* LATER */
.vcard {
     /* general vcard info */
}

 

Of course, I'm likely over exaggerating this but I feel like my way makes the user write clean HTML and his makes the user write clean CSS. Personally, I think HTML should be cleaner since:

a) usually there is a lot more HTML than CSS over a website (thus from a size perspective, 3kb extra per each page to add in extra classes < 3kb extra per CSS file for longer selectors) and..

b) CSS is an addition to HTML - just like pictures are additions to a novel

 

I do see where he is coming from, in that it allows for more extensibility - but with correctly written HTML you do not need to worry about this.

[scootstah]

but I feel like my way makes the user write clean HTML and his makes the user write clean CSS.

 

From your example I think your HTML & CSS both look clean. The other way doesn't look clean in either regard.

 

I think his whole thing is that .news-header is faster than .news > header, although he provides no facts to back this up or illustrate the difference in speed.

[Adam]

I feel you're missing the point. Yes, on a small to medium site that could be what you would do. On a much larger scale though, that's when his ideas becomes useful and show their worth,

[Philip]

I feel you're missing the point. Yes, on a small to medium site that could be what you would do. On a much larger scale though, that's when his ideas becomes useful and show their worth,

I very well could be missing the point. In my humble opinion I don't see how his scales any better than mine. Actually, I do; when a site does not have consistent layouts or html markup his method comes in a lot more handy.

 

I'd be curious to see what he has to say though

[Andy-H]

First topic I've seen consisting solely of red and green Sorry for spoiling that.

 

 

I was going to put :

 

 

As far as optimising CSS goes, does it really matter beyond compression? I mean I'm sure if I was to create a selector 9 levels deep it wouldn't impact parsing time noticeably, surely? 

 

 

However, when I was writing my code example, I realised that when using jquery using nested tag selectors is generally bad (as browsers that don't implement querySelectorAll fall back to sizzle) which selects all elements and then works through nested elements to find matches, so I suppose that the clean-CSS approach also has an advantage here too. Though as to whether I'll head your colleague's advice, I don't know ATM.

 

 

This is a good read on the matter:

 

 

http://www.wordsbyf.at/2011/11/23/selectors-selectoring/

[Adam]

Andy, I don't think anyone's really bothered about selector efficiency. If their browser doesn't support querySelectorAll(), I would imagine half the web doesn't work for them. Harry's (the author's) suggestions are for preventing specificity issues and to create a series of "objects" that can be abstracted and re-used. It requires less CSS, but more mark-up. I would only ever use the approach on a larger site. I don't think it's gripping many people here anyway though

 

I very well could be missing the point. In my humble opinion I don't see how his scales any better than mine. Actually, I do; when a site does not have consistent layouts or html markup his method comes in a lot more handy.

 

I think the idea he has if that with CSS we're always doing the same kind of things to position elements. Having a framework of these objects to choose from speeds up development and takes care of say vertical rhythm, consistent margins, etc. Also allows you to apply a branding / styling layer over each object, without having to specify hundreds of classes that are used throughout the website. As I said, I'm in disagreement with him that this would be useful on smaller sites, but on big ones I can definitely see it's use.

[scootstah]

As I said, I'm in disagreement with him that this would be useful on smaller sites, but on big ones I can definitely see it's use.

 

What do you mean by "big" and "small"? I really can't see how it would make a difference.