csshtmlsmacss

SMACSS: Why not use element selectors in Layout definition at a HTML5 page


I'm learning smacss.com. Jonathan Snook states in his book (P. 14)

It's not necessary to use element selectors with a Layout style.

I can't find his statement online: http://smacss.com/book/type-layout

Today in HTML5 I use <header> <nav> <article> <footer>, ..... instead of #header #nav #article #footer, .....

Now I'm confused. Why shouldn't I use element selectors with a Layout style? Or is this information outdated?


Solution

  • There are no hard and fast rules. However, if you use article as a selector, then your CSS becomes tightly coupled to your HTML, which can be a problem later.

    For example, by using .article then you could have <div class="article"> or <article class="article"> and it would work just as well.

    Let's say you're marking up products in an ecommerce system with <article> tags, and then a <product> tag is added to HTML5, you might want to switch all your HTML over to using the new tag. However, if your CSS is using the element selector, you will need to change everything in your CSS as well. If you add a product class to the element, and use the .product selector, you won't have this problem later.

    There is also the opposite problem, where if you drop somebody else's code into yours, there's a good chance they are using <article> tags, and if you're using element selectors, your CSS will now apply to those elements. By using classes (especially namespaced classes), you can keep things separate.

    That said, it's more about a general guide then an absolute. As long as you're only using them for specific selectors like <section> and <article>, it should be OK. If you use them for things like <span> and <div> it's more likely to be a problem.