Many months ago, a friend recommended Scalable and modular architecture for CSS (SMACSS). It looked cool, but I couldn’t wrap my head around it in 5 minutes, so I bookmarked and then forgot about it. A few months later @necolas wrote this concise yet digestible piece: about HTML semantics and front-end architecture.

Even after you understand the concepts, it isn’t easy to appreciate - until you look at your own old code.

I am currently working on redesigning the refreshmunich.com site, which was originally coded by three different persons about 4 months ago.

In the old CSS, I found:

  
  /* style twitter handle links */
  #mlist h3 a,
  #layoverCell h3 a {
    font-weight: 400;
  }
 

What’s wrong with this?

• We need a comment to tell us what #mlist h3 a is.
• Unnecessarily repetitive due to ID selectors #mlist and #layoverCell

  
  .member__handle-link {
    font-weight: 400;
  }
  

• Comment removed because class indicates what it is
• No ID selectors means less CSS specificity issues

N.B. I use ‘member__’ prefix as naming pattern for the members component of my styles. The best part about this is that I can look at my code weeks or even months later and know what it does. I could go on, but that could be its own post.

Better semantics esp. important for teams

I think I wrote the originally offensive line ‘#mlist h3 a’ and when another dev added another feature, he didn’t have a choice but to also tack on the specificity to his ‘#layoverCell’. 

Too long, didn’t read?

.member__handle-link is better than #mlist h3 a