DEV Community


Discussion on: What is a specific recurring challenge you have with CSS?

jwp profile image
John Peters

Go Grid!

Since migrating to the "grid-only" concept and SCSS-only-in-root, I'm glad to say I finally feel like I have control over CSS. However, I am not yet a master. Two years ago I could spend 2 weeks on a simple layout issue (especially using LESS and styled components that I didn't have direct control) today, with SCSS I can reach in deeply and get control in minutes.

Angular's View Encapsulation is Broken

Had I written this response just 6 months ago I would say my biggest issue was in Angular's component css styling. Angular combines a root style with each component's style. This is good in a way because the root stuff is for common look and feel where the component style is for tweaks within just that section of the page. To do this Angular uses a concept known as view encapsulation; which pans out to be css styling trickery with specificity at run time. But there's a bug in it in my opinion because I can easily write the proper queries in that component's javascript but cannot get deep stuff to fly when I move the same selectors to the component's style sheet. I found that using the root SCSS solved that problem. Which leads me away from component styling.

I'm just not a fan of a 2000 line style in the root level, and I also don't like the fact that SCSS, LESS or CSS have no good refactoring tools like JavaScript and Typescript do.

My biggest pain point today

Finding dead styles, and refactoring SCSS and CSS are just a nightmare. Any tips on that would be great.

I started work on a tool that was to do this but never finished. That's because well, to write the refactoring part will be a nightmare. The good news is that all of the CSS stuff is discovered at run time and displayed for that page. It's 100% reliant on the browser CSS rendering so there's literally no run time parsing for discovery because the Browser already did it on first page! The project is open source if anyone wants to work on it.

Thanks Steph!