

One person did criticize it:




.page {
    padding: 1rem 4rem;

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


I see four options:

  3. Use native CSS variables.
  4. Mark related values with a comment.

Do nothing



CSS preprocessor


  • There is no standard CSS preprocessor that’s installed as part of the standard IDE environment (like C’s cpp), so users will have to install something on their own. To make this easy for all users across all platforms regardless of skill level is not easy.

    There’s also no programming environment that is installed by default on all three major platforms. Sure, people can install Python or Ruby or whatnot on Windows, but that’s a lot of effort to just run a simple script maybe once or twice, especially if you’re just looking to make a basic website.

    In mu experience it’s hard getting non-programmers – and even programmers who are not familiar with these tools – to install stuff using npm, gem, pip, and such. Joe Armstrong of Erlang fame described his experience installing a “simple” JS program. He gave up. I’d like Hello CSS to be as usable as possible even for casual hobbyists.

    There are some GUI frontends (like Koala), but having people download 82MB and familiarize themselves with a UI just to run a search and replace doesn’t strike me as an especially great trade-off.

    I’m not even sure what the state of macOS systems is in this regard, as I am not hip enough to own an Apple system.

  • CSS preprocessors will add a lot of syntax and complexity that’s not needed. It will make using, debugging, and understanding everything harder, especially for beginners or people who are not heavily invested in the CSS ecosystem such as a C programmer, a scientist with basic programming skills, or just the casual hobbyists who wants to make a website about their stamp collection. Not everyone is a frontend dev (or indeed, a dev at all).

    For example using calc() in less is tricky.

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


CSS variables


Some might simple hand-wave them away as “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 you think it is. (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.)






.page {

figure.full {
    margin-left: /*padx*/-4rem;


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