10x CSS

#css #codequality #codestyle #frontend

Let's get this straight: CSS is messy. It's a beautiful language that allows web to flourish - but it can get very dirty very fast. One of the reasons is the nature of the language itself: it's resilient, it's very forgiving - and it doesn't force almost any rules on you.

You can use tabs. You can use spaces. You can write everything in one line. You can repeat the same ruleset over and over again, each time adding one new declaration. You don't even need to have all the semicolons. This is your world, you can do whatever you want.

But should you?

Unlike painting, I don't think your CSS code is a place to get crazy.

There has been a lot of talk over the years about large-scale CSS architecture, and now we have all sorts of methodologies like BEM, SMACSS, and, my personal weapon of choice, Atomic OOBEMITSCSS. But none of them deal with the smaller scale, where most of our actual work is done.

I'm talking about single rulesets.

As said before, nothing stops you from writing declarations in any way or order you want. One might argue it doesn't matter, if it gets the job done; but as for any other language, better code style in CSS leads to better DX, better code quality, and fewer bugs.

So, lo and behold, my personal approach to lower-scale CSS structure:

.classname {
    /* is this thing even visible? */
    display: block;

    /* where is it on the page? */
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 300px;

    /* what does its content look like? */
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    color: rebeccapurple;

    /* what's its box model? */
    padding: 10px 0;
    margin: 20px;
    border: 2px dashed salmon;
    border-radius: 5px;

    /* backgrounds, 'cause declarations tend to get so very long */
    background: url(someawesomepic.jpg) center center no-repeat;
    background-size: cover;

    /* purely a e s t h e t i c s */
    transition: all .25s;
}

While by no means complete, this example covers the most frequent properties one usually has to define. No matter what, some declarations stick together, because together they make more sense: width and height, border and border-radius, font- and text- properties, positioning properties, and so on.

I have been following more-or-less this structure for almost a decade now, and it has made my life much easier. I only need a glance at any given ruleset to understand what's going on, what's missing, and spot some minor bugs like duplicates or declarations that will never actually be applied.

It might seem as if I'm arguing that my system is great - and while it obviously is, what I think is the most important here is to actually have one. It is hard to follow a story when it's all over the place, and it's very hard to work with code like that.

Happy coding, and gods bless.