Writing CSS— bad for your wrists?
It may seem odd for a CSS framework to be categorically against writing CSS.
If we weren't, though, what kind of CSS framework would we be?
Do ✓
href="cavepaint.css"
Don't ✗
href="style.css"
Start with a versatile CSS codebase that lets you do 95% of what you'll do day-to-day while maintaining style standards without touching any CSS. Without setting up any workflow. That's Cavepaint.
The last 5% is important. But that's the style stuff that really sets your site apart— it deserves all of your visual design attention, not the in-the-weeds CSS stuff.
Also— and we can't stress this enough— you can do it later.
CSS was once one of the most interesting core skills of web development. Now it's one of the least interesting specialties.
The counter-curriculum
Nobody ever really learns CSS, just as nobody ever really steps through the same river twice. CSS is an ever-changing notion of what style on the internet should be.
HTML meanwhile is pretty much the same as it's always been.
So do that instead.
Even people who are very good at CSS should try to write as little of it as possible. Even the—gasp— people who like writing CSS should write as little of it as possible.
No, especially those people.
CSS isn't dead. On the contrary, it's better than it's ever been. But it's gone from being something everyone on the team needs to know, to something only one person on the team needs to know. Unless you're that person, don't bother learning CSS.
CSS, thief of joy and learning
Learning in general has a cost. We'd say it's time but really it boils down to space in our brain.
Cavepaint keeps everything easy with simple class names with no numbers, and words taken mostly from CSS. You don't really learn it. You just use it.
It's designed for cavemen (and women), after all. It has class names like "blue" and "big." The classes sound a bit like caveman-speak when put together.
Cavepaint gets out of your way and lets you get to building. It doesn't lock you in because it's almost 99% pure CSS. There's no workflow to learn because there's no workflow.
At the end of the day, there are more interesting things to learn. Spend your time developing skills in deep learning or doing Clojure koans, not in CSS.
Do ✓
LEARNING: - orbital dynamics - ultradeep learning - nanorobotics
Don't ✗
LEARNING: - responsive layout - pseudo-selectors - vertical centering
Shaking trees considered harmful
We're fussy about adding CSS so it makes sense that we're fussy about removing it too.
Your site doesn't use the h4 tag, so you found a tool that removes the h4 rule from your CSS. Cool, right?
Wrong. This is an anti-pattern. This is CSS anarchy!
It's like removing rules from the board posted by the pool.
Just because a rule hasn't been used recently doesn't mean it shouldn't be there. Somebody might slip!
Do ✓
h1 { font-size: 26px;}
h2 { font-size: 24px;}
h3 { font-size: 22px;}
h4 { font-size: 20px;}
h5 { font-size: 19px;}
h6 { font-size: 18px;}
Don't ✗
h1 { font-size: 26px;}
h2 { font-size: 24px;}
h5 { font-size: 19px;}
Everything considered harmful
When you have a CSS workflow, you have a CSS workflow to maintain.
Do as little as possible to your CSS.
Cavepaint isn't about doing everything possible with CSS, but about doing 95% of what's possible right now, out of the box, with one standardized CSS file.
Sins of scope
Going too big
You've achieved a 300kb CSS file, with rules for every little corner of your monolithic website.
You've made it, right? Wrong. Every bit of that CSS has a chance of needing your attention at some point in the future.
Your goal in any project should be to write as little CSS as possible. CSS is never your core product!
Okay, well, sometimes it is. Please visit Cavepaint CSS.
Starting too small
Reeling from your 300kb maintenance monster, you decide you'll start things off on the right foot with your next project. You find the tiniest slice of starter CSS you can find. 3kb! That's less than 300kb, and therefore better, right?
Well, it's better at first. This is only half anti-pattern! If it stays small, that's great. If it bloats, then it can be bad. And it's going to bloat, because you'll need to write more CSS to navigate around all that minimalism.
The wrong metrics
The Cavepaint approach is that it's better to start at 30kb and balloon to 40 or maybe 45kb than it is to start at 3kb and balloon into a 100kb mess.
Cavepaint is going for bang-per-kb. It's a middleweight library that punches way above its class. Start at 30kb and use that CSS over and over.
Optimize on readability, performance and utility, not file size.
Eyedropping out
Picking colors is fun. That's the first red flag.
We're not saying it's always a waste of time. We're just saying there are severely diminishing returns after picking out the first color associated with your site. So in Cavepaint you pick only the one, the base color.
Figuring out colors for use in your site is a breeze with 500+ colors that just work with your base color. Contrast is always white or black text and Cavepaint figures that part out for you.
Because the expressive composable classes let you use colors like warm dark blue, bright red or dim green, you can save time on tangling with color droppers and color contrast tools. Describe the colors on your site with words.
Even if you do pick colors yourself, it's better to use and override the Cavepaint classes. That way, your markup never needs to change. This also means you don't need to go through and update every color on your site when you update your base color, or when you override colors in the color scheme.
Every color in Cavepaint is based on the base color. If you multiply the 16.7 million colors in the color space with Cavepaint's extended 3500-color palette, then Cavepaint supports billions of colors.
Just say "No!" to Javascript
We're against writing CSS because of its complexity. Don't get us started on Javascript.
But we get it. Javascript is a big deal. It's probably running a big portion of whatever you're working on. We can't help you with your Javascript problem.
What we can do is only CSS. We can get out of your way so that Cavepaint works with whichever framework you're using, so long as it supports HTML/CSS.
It's hard to include Javascript without being overly prescriptive. So we don't, except this: The code driving your components should probably be written in the same framework or style as the rest of your frontend code.
Where to take style cues for your site's JS:
Do ✓
- your favorite library - React, Angular, Vue - JAMstack - Clojurescript - Svelte
Don't ✗
- your CSS framework - online horoscopes - augury - seeing which style your dog goes to when called
Dev oops
CSS workflows are pointless.
Maybe they weren't always this way. They've gotten out of control, however, and Cavepaint is therefore strictly anti-workflow.
Don't minify Cavepaint. Leave it human-readable. Don't take out the colors you didn't use— leave the whole palette there for someone else to use. Your user, maybe?
Don't sprongify it or run reverse amplitude deflections on it. (Both of these are made up...we think.) Generate it here and customize it in the file as your project needs. Write your own CSS on top of (after) it. Don't ever come back here. Enjoy CSS bliss.
Or, do all of the nitty-gritty technical stuff. Cavepaint is basic CSS so we can't stop you. The point is that with Cavepaint, you have the option. It doesn't enforce any workflow upon you. (Although it has a great workflow based in Less, if you do go that route.)
"Better optimize the CSS!" — modern web developers when presented with this hypothetical project
Time, space and CSS
There's a whole universe of ways to be wrong about CSS.
Multiverse CSS
If your components have token seeds, like Minecraft worlds, then your approach to styling your site has probably gotten too complicated.
Cavepaint reuses the same core CSS everywhere so it's great for big sites. Even sites that really absolutely need to do complicated CSS shuffling from massive codebases will benefit from using Cavepaint as a shared resource.
This Multiverse CSS effect creeps into smaller or medium-sized projects that don't need it. Write simple CSS that works everywhere. Begin every project with Cavepaint. It's the practical CSS compromise you'll wish you had started with.
"Sacred" CSS
CSS is disposable. There's a world of difference between "disposable" and "unimportant," though.
CSS is important! And disposable. Cavepaint treats CSS as a generic, versatile asset, a skeleton framework for enforcing simple design standards in HTML.
In terms of web projects, CSS has tons of potential as a complexity sink, but only if it's treated in this disposable way. When CSS is enshrined and entombed in a project, it only gums everything up.
Spend your design hours delighting your user, not tangling with CSS 101.
Cavepaint is the CSS file from the end of time.