Why CSS always rots
Production Css is not very maintainable in practice.
Think about it, have you ever seen a well maintained css codebase?
Me neither.
I think a lot of this happens because of the mindset of the programer when it's written.
Often CSS ideologies make the assumption that the programer is going to craft the names of CSS with care and precision, refactoring the hierarchies when then become untrue.
Ain't nobody got time for 'dat.
Often we assume that they are going to find your reusable .scss file. Or read through the code looking to remove duplication.
Ain't nobody got time for 'dat either.
No, the mentally of a software engineer modifying CSS is,
How fast can I get this to look like I want without messing things up
The two parts of this mentally are very important to why CSS rots.
One is that we care only about the way it looks in the end. This means that we aren't as concerned about the maintainability at large, we just want it to look good with as little effort as possible. Doesn't everyone?
The other important part is that we are doing this visually. Meaning in the browser.
Doing CSS in the browser means instant feedback.
It's awesome to modify styles in the dev tools bumping pixels till it's just right then copying it over to your CSS file when you're done. It's far faster than reading thousands of lines is CSS and more fun.
This, however, has two ill effects. One being that you're pulling pixel values out of the air probably not fitting within any sort of grid system. This creates white space quickly becomes less visually harmonious and pleasing. Not to mention it just makes things hard to line up that are more than 2ems away. Not to mention you'll get a crazy mix of em/rem/px/vh/%'s.
The other half of the software engineers mentally is, "without messing anything up". Any developer knows modifying or reusing CSS classes is just asking for trouble. So in self-defense we always create new ones.
A new class is the only class that you can be sure that people aren't depending on in weird ways after all.
The problem is that CSS grows forever.
Soon the customer has to sit for a 4 seconds to download the CSS alone if their connection is slow. That being in addition to everything else.
Another, perhaps larger, the problem is with every new class comes something you have to name. This gets especially bad if the CSS names are global (there's some tools that randomise class names so that they essentially aren't). What if you need to toggle things depending on different 5 situations? 5 more things you have to name!
Naming is the problem
Symantic naming is generally the standard when using CSS. This essentially means that you name your CSS the same as name of the thing on the page. If the styles are for a sidebar you name the root class .sidebar. And then you put something like these styles in it:
.sidebar {
float: left;
background-color: [eee](eee.md);
}
This is fine till you start putting float: left and background-color: [eee](eee.md); everywhere. And even worse in lots of places where it only has background-color: [eee](eee.md); in it.
Tags: