Thoughts on Semantic Styling vs Visual Styling

Published

Estimated Reading Time: 2 minutes

After reading this rebuttal to Jeffrey Zeldman’s Kiss my classname what came up on my mind is I think everyone’s doing this wrong. This is the main problem with the industry. Impatience to accept and learn why opinions that differ from yours could be relevant.

I’d agree with Thierry Koblentz for the most part as he doesn’t totally dismiss what others consider the right way. However, I think referencing Lea Verou’s tweet and Sara Soueidan’s as a thing leaders should not do is wrong. From skimming through Atomic CSS, it does look terrible and those tweets are their opinions. It might have some advantages that they aren’t aware of. They probably could have given it a try and not found it to be solving any problems for them. Seriously, look at this

<div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
   <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>

Doesn’t it look like trimming Satan’s pubic hair?

Semantic styling does have its good usecases but it doesn’t mean visual styling should be ditched. While I’d agree that the C in CSS doesn’t mean Component, I find using a component based SoC to be great as most of our web apps structure are components anyway ( filters, buttons, accordions).

With separation of components, the styles stay reusable and maintanable. While components help at a large scale, not everything can fit in a component. CSS wasn’t built to be OOP and that’s what most component structure look like especially if you’re following a pattern like BEM or rscss. These component misfits are called utilities and they should have a place too.

A utility classes file can be managed with a documentation to avoid repetition and they may get visual in most cases. I use the u- namespace with them and here’s an example u-txtcenter, u-fr. Which are my utility classes for text-align center and float right like many other CSS frameworks have them. They can be really helpful yet so dangerous. But there’s room for them in our stylesheets when used properly. I believe documentation as Zeldman said does help reduce the trouble of dealing with terrible stylesheets and it can be especially useful with utility classes. They shouldn’t be so much but if they grow, it’d prevent different developers from adding already used utility classes.

In the end we have both visual and semantic styles.

Toggle Comments