CSS Modules and Styled Components

[netmet12]

Now that we have CSS Modules and Styled Components, would you recommend using those instead of ECSS?

Is there are a way that ECSS principles could be blended with these newer technologies?

[benfrain]

Hi!

Great question and like most things in web dev, I think it depends. It's actually something I've addressed while giving a talk on ECSS and here is the relevant slide: http://ecss.io/slides3/#/16/6

I've looked at the CSS in JS solutions and I appreciate they solve many of the same problems that ECSS solves, with arguably less possibility of 'human factors'. If I were developing constantly in React I'd perhaps lean a little more that way.

However, for me, I still reach for ECSS. CSS in JS solutions are entirely reliant upon tooling whereas I can spin up reductions or prototype coding with ECSS immediately. Because of that, ECSS based code is more portable. If I do a good job with prototype code, there is a high chance I can drop that into production code and hit the ground running. From more selfish point of view, I prefer the developer ergonomics of having actual style sheets to search and work with. I can go straight to any key selector in the entire project by doing 'Goto Symbol in project' in Sublime, entering the ECSS Key Selector and I'm straight to what I need to edit.

That's not to say I would never reach for CSS Modules/Styled Components, just for me, as yet they don't typically suit my use case and needs.