Exactly why relying on bootstrap is a pain in the ass, at least for me. I get that it's easy for most people to just use classes but I find it annoying that bootstrap uses classes for a single css property :p
Great article though! I think a lot of people were overriding these instead
You get a lot of flexibility with using single purpose classes, although I don't really love projects where everything is made using only those single purpose classes. I still like to style "components" as their own classes and use some utility single purpose classes if needed.
It's easier to just add/remove a single property. Composition is a great tool. When I started I also mostly styled everything using custom classes for every element and doing all sorts of things and repeating CSS rules inside many of these selectors. After some time I realized that it might be useful to extract some of these properties into single use classes. I don't extract a bunch of stuff, just smaller things like text-align or maybe padding/margin for consistent spacing on the page. Or maybe even main brand highlight color.
This allows me to prototype pages faster in most cases and I can adapt to designer wishes faster. I'm sure we have all been in a situation where the designer just wants to update some element in text to be highlighted in brand highlight color, so instead of having to give it a separate class that has semantic meaning for that element in that context or use more complex CSS selector (because we cannot use more broad selector like p span {}), I can just quickly add my highlight class and update it that way. It's also easier for the browser to just apply one class (one property) to 100 elements, rather than 50 different CSS selectors and cascade for those 100 elements, although I'm not sure about the performance impact there or if there's any significant performance impact.
But that's just the way I love writing CSS now, might not be a good fit for everyone.
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.
Exactly why relying on bootstrap is a pain in the ass, at least for me. I get that it's easy for most people to just use classes but I find it annoying that bootstrap uses classes for a single css property :p
Great article though! I think a lot of people were overriding these instead
You get a lot of flexibility with using single purpose classes, although I don't really love projects where everything is made using only those single purpose classes. I still like to style "components" as their own classes and use some utility single purpose classes if needed.
It's easier to just add/remove a single property. Composition is a great tool. When I started I also mostly styled everything using custom classes for every element and doing all sorts of things and repeating CSS rules inside many of these selectors. After some time I realized that it might be useful to extract some of these properties into single use classes. I don't extract a bunch of stuff, just smaller things like
text-alignor maybepadding/marginfor consistent spacing on the page. Or maybe even main brand highlight color.This allows me to prototype pages faster in most cases and I can adapt to designer wishes faster. I'm sure we have all been in a situation where the designer just wants to update some element in text to be highlighted in brand highlight color, so instead of having to give it a separate class that has semantic meaning for that element in that context or use more complex CSS selector (because we cannot use more broad selector like
p span {}), I can just quickly add my highlight class and update it that way. It's also easier for the browser to just apply one class (one property) to 100 elements, rather than 50 different CSS selectors and cascade for those 100 elements, although I'm not sure about the performance impact there or if there's any significant performance impact.But that's just the way I love writing CSS now, might not be a good fit for everyone.