What's your take on Expressive CSS?

[maxx1128]

I recently found this explainer on Expressive CSS, and I've found many of its arguments for styling CSS this way very persuading. The biggest part of it is making much greater use of utility classes for common style declarations like margin and padding, and even using them for responsive grids, both of which are common practices in popular frameworks like Foundation.

I've been in the school of thought that minimizing HTML markup and avoiding lots of possibly unused CSS utility classes is preferable. But after reading all the other benefits of this approach I'm feeling conflicted and need more perspective. What's your view on Expressive CSS?

Here's the link for reference: http://johnpolacek.github.io/expressive-css/

[KittyGiraudel]

Hello there,

Sorry for the delay. Holidays and stuff. :tada:

If I am not mistaken, ExpressiveCSS has been inspired by Atomic CSS, which comes from Yahoo I believe. The point, indeed, is to have single-declaration helper classes that can be used anywhere, thus minimising the amount of CSS needed for the whole application.

This approach (no matter through which framework) has some very strong point, although I cannot seem to wrap my mind around it. I see how it can be a good idea, and I see how it can be beneficial on the long run, but as far as I’m concerned the complexity overhead is not worth it for me.

Call me old-fashion, but I like component-based CSS architecture. Of course, it means I will have several float: left, padding: 1em and margin: 0 auto in my application, but I don’t see this as a big deal. I am not a fan of having a lot of classes on my elements, especially when they are hard to read and grasp.

Now, I don’t pretend my way is better than any other of course. I have only worked on small to medium applications, and never encountered a Facebook/Amazon/whatelse massive kind of project. The day I will, maybe I’ll change my mind. :)

[maxx1128]

No worries about the delay, had plenty of holiday fun over here too :)

I've been thinking along the same lines myself. For me expressive and component CSS comes down to the scope of the project. For smaller simpler projects I'd go with component CSS. I'd use the Expressive CSS one for larger ones since in the long run having lots of extra HTML classes would be easier to maintain than all the extra CSS declarations. For that I've found @johnpolacek's Simple Grid Generator great since it's easy to use and customize.

[johnpolacek]

Thanks @maxx1128! Back in my agency days, I worked on lots of different projects. Rarely did I work on large scale projects. It was only when I started working at a tech company did I see the need to do things a little differently. As you have discussed, when you are working on a large web application that continually grows over time, it is essential to keep your CSS architecture small and maintainable. Thus I (and others) have arrived at this approach.

I also have come to realize that it works nicely for smaller projects as well. The main benefit is portability. I have the same group of styles that I use across projects. Thanks to css preprocessing, I can tweak the variables to set up the colors, typography, etc. then I just start building html, and spend much less time writing CSS. It has worked really well for me, but I do appreciate that it is not for everyone. As always in web development, there is room for (endless) debate, haha.

[KittyGiraudel]

Closing this. :)