Despite my earlier rant, today is a pretty lucky day. I’ve got a job as a tester, that’ll start soon. Still a little nervous about it, but really looking forward to it!
@lyse@lyse.isobeef.org it’s not so bad, it’s fun to see everything explode when you squeeze the window! 😝
@lyse@lyse.isobeef.org that’s what happen to me too when I use any kind of CSS framework/library, that’s why I only use vanilla CSS for everything I work on.
I just came to hate them deeply, Flex and Grids are just there to replace everything for me.
@lyse@lyse.isobeef.org especially if you rely on native elements.
I think the main issue is that they call themselves framework so you think they can do everything for you but it’s really wrong, CSS is too opinionated when you build complex structure you can’t adapt them at all, the only solution is to use utility based classes.
I’ll still go for vanilla CSS.
@lyse@lyse.isobeef.org I absolutely avoid selecting elements for the sake of scalability with only few exceptions, what I prefer is using a convention like suit css or, if I need to, the even better css-modules.
A couple of extra divs is no big deal, you just need to keep everything readable and encapsulated.
@lyse@lyse.isobeef.org In my case most of what I built is an interactive app or something so it’s useful too have a decoupled styling for it, I also heavily really on CSS variables and the like.
@lyse@lyse.isobeef.org all my project are entirely standalone.
If I want to share parts then those become encapsulated entities to be included is said projects.
The reason to build it scalable with only classes is to have a logic structure that can be read in both HTML and CSS to understand quickly how they work as a block, even though I use lot of classes I often have at most one or two of them per element.
The other reason is that it helps me find the right part to work on on older projects, just yesterday I had to extend a part for a client project and I did it by finding the needed classes like this:
.ProductList > .ProductItem > .ProductItem-price
(The arrows are how I looked for them in HTML)
Then I can append the new element to have a note on the price.
Another thing that helps me is that I have only one level deep selectors with only pseudo selectors and utility classes as exceptions.
@lyse@lyse.isobeef.org complicated or not you can rely on classes as a way to semantically group parts, but it’s up to you anyway.
As long as you make cool stuff nobody cares how you did it. 😜