Most of the time spent on CSS is wasted. Not in a fun way like Randy Quaid, but in a what-was-the-name-of-that-movie way, like Dennis Quaid.
The corollary to this is that if you’re writing CSS, you’re probably wasting your time.
You want to spend less time writing CSS. This is true for mostly everything. But for some reason we tend to give CSS a pass.
Why does it seem fine to waste time on CSS? It’s simple: Everybody can see the results of it, right there. Whatever process your team runs, CSS will always get the worst of it, because everyone has experience looking at the screen. We hit the Gladwellian 10,000-hour expert status in screen-looking at about age 4.
Looking over a black-box Erlang file tucked away deep in the codebase? Not as easy. Not many experts in that.
More than that, plain HTML is viewed as broken. The white background with black text that runs all the way across the screen is an embarrassing development detail we rush to cover up.
This mindset couldn’t be more wrong. It’s fine if your site doesn’t have any styles while you develop it. Even if it has styles, you should be looking at it without styling every now and then (and not just when something goes wrong with the asset pipeline).
Get the function right first, then the form.
You’ll often discover something doesn’t work before you need extensive styling for it. Thrown-away projects have a 100% wasted CSS time rate.
Okay, maybe you can salvage a few things you figured out while building whatever it was that didn’t work. But you can’t get that time back.
The last big driver of time-wasting in CSS is the drive for pixel perfection. Design on the web has never been more flexible. Let it go. There are too many ways for HTML and CSS to be viewed now and in the future to really predict how the stuff you’re writing today will ultimately be seen.
Even if you’re on a fairly locked-down platform, you’ll have to deal with version updates, operating system or browser interactions, and ultimately whatever the user is doing on their end.
This is a strength of the web platform, not a weakness.
Pixel perfection on the other hand makes it a weakness. Consider typography first and get things mostly right. Rely on native elements whenever you can. Give your designs and layouts some wiggle room to handle future changes and updates. Just remember that you might not be implementing them and it might not be on the same platform.
Focus is a team’s ability to not waste time. But if the tendency for time-wasting is everywhere, how do we not waste it when styling our projects?
First, we treat CSS as a versatile asset that abstracts away the mundane for our users.
Who are our users? They’re the other people on the team. The people who will, if we structure things right, not be writing CSS. That’s how a team can ultimately save the most time on CSS: By having fewer team members writing it.
We do that by writing as much of it as possible for them, and including it in the project in a way that’s easy for them to read, understand and, if everything goes wrong, edit it themselves.
This pile of CSS we’re including would need to support about 95% of what the non-CSS-writing team members would want to do. The rest, the 5%, is what they would bug the CSS-writing team members to do.
This pile of CSS, this 95%, is a California Stylesheet.
This book isn't a big ad for California Stylesheets [okay, it sort of is, thank you for supporting the project] but it does mention it a few times, mostly at the end of chapters where I describe how California Stylesheets (CASS for short) can help with various problems. The open-source project is the counterpart to this book in many ways. You can see it on Github at https://casscss.github.io/cass/
There are lots of different starting points that can fit this relaxed style approach, and others that deviate wildly. The ideas in this book aren't limited to just CASS in either case, though. Users of Material, Bootstrap, Tailwind, Bulma, Less/Sass and others should benefit from the ideas here. Ultimately we all have the shared aim of saving time in development.
The 5% of “other” CSS is where we should be aiming to spend all of our CSS-writing time. It’s all the interesting stuff, the beautiful stuff, the elegant stuff. This is where you focus. You didn't forget the title of the chapter already, did you? Close all of your browser tabs. Right now.
CSS drains your time, attention and focus. California Stylesheets let you write less CSS.
They let you fuss less over CSS. They let you spend fewer development cycles on styling.
All you have to do to get your focus/time back (well, some of it) is use CASS. It enables you to waste less time on CSS at all stages of your project.
Since it’s just a CSS file, it’s really hard to mess it up. Use the time you save not messing it up, not even setting it up, to mess up other things instead. If you know how to add classes to HTML elements, you can build compelling, user-friendly layouts with CASS.
The Gumroad version contains a secret chapter that spills the dirt on CSS preprocessors, a tech CASS no longer uses.