When I announced my Hello, CSS! project last week most of the responses were pretty positive. Hurray!

One person did criticize it:

This is pretty bad. Why make up your own variables that require search and replace when you could use native CSS custom properties (vars)? Much of this makes no sense.

Ignoring the choice of language, “why don’t you use CSS variables?” is a good question, and something I spent some time thinking about during development.

Some sort of support to track related values is useful. For example for the page padding:

.page {
	padding: 1rem 4rem;
}

figure.full {
	margin-left: -4rem;
	width: calc(100% + 8rem);
}

Change the 4rem in .page and you’ll need to change the figure.full too, and some other places as well.

I see four options:

  1. Do nothing, and hope that people will notice stuff breaks.
  2. Use a CSS preprocessor, such as SASS, less, etc.
  3. Use native CSS variables.
  4. Mark related values with a comment.

Do nothing

“Do nothing” was my first approach; the initial versions had only two related values, and I could mostly get away with it by just putting it next to each other.

As I added some more fixes and features the total number of related values grew to 15, a number which is probably a bit too high for “do nothing” to be feasible (it’s not easy to grep these values, as 4rem may or may not be related to the 4rem of the page, and the 8rem is 2×padding).

CSS preprocessor

Using a CSS preprocessor can be a good option for many projects, but I’m not so sure if it is for Hello CSS.

The concepts “simple” and “complex” are relative: spending an hour to save a week’s work will make things simpler (probably), but spending the same hour to save 15 minutes of work will make things more complex.

I’m not against these tools. I’ve used them extensively in the past and are (mostly) happy with them. It’s just not the right tool for the job here. Hello CSS currently sits at 491 lines (294 without comments), has 5 variables, and 15 references to them. It’s a small project.

CSS variables

CSS variables are tempting, except for one problem: your site won’t work for about 13% of your visitors.

Some readers might feel the itch to protest that it’s “old browsers” and that “IE sucks” and whatnot. All true. Also all irrelevant. Excluding 13% of visitors is still excluding 13% of visitors, no matter what the underlying reason is, or how stupid it is.[1]

For some projects this may be acceptable. This website is mostly visited by programmers since I write mostly about programming. I don’t keep analytics, but I’ll bet that CSS variables are supported by almost all visitors.

But this site is just one application of Hello CSS. I did my best to make it as broadly applicable and accessible by as many people as possible, so it can work well for your stamp collection website too. Completely breaking it for 13% of visitors is not acceptable.[2]

I believe there are some preprocessors to solve this, but this gives us the problems in the previous section.

Comments

This leaves us with the last option: mark related values with a comment, which is what I ended up doing. The above snippet becomes:

.page {
	padding: /*pady*/1rem /*padx*/4rem;
}

figure.full {
	margin-left: /*padx*/-4rem;
	width: calc(100% + /*padx*/8rem);
}

I am not wildly enthusiastic about this solution, but after carefully considering the different solutions this seems to be the best – or rather, least bad – choice for Hello CSS at this time.

This might change in the future: when CSS variables gain broader adoption, or if I find a CSS processor that avoids some of the problems I outlined.

Footnotes
  1. General note to the programming community: learn to be professional. Professionals deal with the world as it is to the best of their ability, and don’t refuse to deal with it because they don’t like it. 

  2. I did use calc() in a few places, which is unsupported by 11%. But when calc() is unsupported some tables will be slightly less wide than intended. Not great, but the overal design is still in good working condition. Browsers that don’t support CSS variables will have the entire page render completely wrong.