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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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!