CSS Ordering proposal

(en)

css

This is not a Guide

(except for the people at Avispa)

Recap

I feel compelled to make a summary of CSS, trying to explain it the non-theoretical way.

CSS is a set of rules about the way stuff in your webpage should look, given certain context - Leonardo Luarte

For example

p {
text-align: center;
font-family: "Comic Sans", sans-serif;
font-family: red;
}

That is super cool, and easy.

The Problem

But when this stuff starts to escalate, especially when you are considering layout or positioning and some transition on an element this becomes a much larger, most of the time all those lines are necessary, for example:

.my-container {

display: grid;
grid-template-rows: minmax(200px, 1fr) repeat(3, 1fr);
grid-template-columns: auto 1fr 1fr auto;

flex-direction: column;
gap: 1rem;

background-color: var(--my-background);
border: 5px solid var(--my-text-color);

margin: 0 auto;
padding: 1rem;

position: relative;

margin-block-end: var(--separation);

color: rgba(blue, 50%);

box-shadow: 0 0 0 3px var(--my-text-color);

outline: 1px solid red;
opacity: 1;

top: 0;
right: 50%;

border-bottom-color: blue;

grid-template-areas:
". a b ."
"a a b b"
"c c c c"
". c c .";

transition: opacity 300ms ease-in;
}

Long example, but probably, with a few exceptions, everything there is needed.

But if I ask you: how does that look?

How does THAT look?

You probably are gonna have a bad time.

The proposal

Just Marie Kondo the F*** out of it, however you like.

One idea is to just show it like the browser inspector shows it: in alphabetical order (I'm talking about using Inspect > Computed, not Inspect > Styles).

But that somehow helps, because there is usually prefixing in all the methods, but it makes it hard to understand anyway.

So my proposal is to try to thing about the way you would explain to another person about the element you are modifying. Disclaimer: I use SASS so sometimes I mix in some modifiers inside of them

Where is it?

All position related information: position, inset, top, left, right, bottom, z-index. This clearly lets you know where in the viewport you should be expecting to find the element. float should also be here, but if you are thinking about using float you should really consider other positioning options first as this property can be really troublesome in some occasions.

How big is it?

Then you should be looking for the size descriptions: width, padding, borders. One exception that can also help you: if its not going to be visible you can write the display: none; rule here as well. That can also be applied to all the cold-war-era display values as they help you more to understand its size that its flow in my opinion.

box-sizing should be considered in here

Where sould be margin written? Margin is out of the size calculations, so it is not size, but kinda goes there together with padding or I am the only one?

I believe that margin should be just between WHERE and HOW BIG.

Its looks

Gotta accept it: if you are here its because you care about the looks, so its a great way to define an element by the properties that talk about colors, shadows, outlines, clips, opacity, clipping, etc.

I also consider here ::after and ::before they are an extra rule, but since we use SASS, we add them here.

Distribution

When we use flex or grid they should be added here, so we can know how its contents will be shown. display: flex, flex-direction, grid-template-rows, columns and similars should be considered in this section.

Content

If you are just working with text, probably you are not using the previous section so its a good idea to have this two sections together as they are complements. text-align, font-size, line-heightare similar should be in here.

Filters

Usually filters are thought to be used after the raw element has been defined, so it should go at the end. filter and transform should go here. Anyhow, be careful, because filter affects how it looks, and transform usually affect where it is. Another common situation happens that filters are used to be modify...

How it behaves

Does your element have transition? That should go on the late sections, because first you have to define the element in its raw state and the define how it could modify depending on context.

Also, adding :hover, :active can be a good idea here. overflow and scrollbar related issues can be also considered here.

Everything weird

This is me being ignorant, but all those properties that don't belong to any other section, or that I really don't know how they work I put them here. Why? Because those are the ones that I'll be changing the most while developing, some it comes in handy to have them near the end.

Media queries

To finish up, I prefer to add everything that can change depending on media at the end. Because most of the time here is where I will have most of the previous properties or values changed. Its not common to switch from a flex layout to a grid in here (in case you are thinking mobile-first) and there can be a lot of rewriting here. Just try to keep the same order as before.

Another important thing: if you are going to change a lot of things, maybe instead of rewriting rules, write the rules using CSS variables, and just change the variable values in here.

Last thing before the example

Be sure that you are not leaving trash behind! If you are using grid remove any remaining flex stuff, if you are using relative positioning, do you really need to keep that top property? Are you sure you are not rewriting your own rules unnecessarily in your code?

Example

.my-container {
position: relative;

margin: 0 auto;
margin-block-end: var(--separation);

width: clamp(200px, 30em + 5vh, 75vw);
height: 50vh;
padding: 1rem;
border: 5px solid;

background-color: var(--my-background);
color: rgba(blue, 50%);
border-color: red;
border-bottom-color: blue;
box-shadow: 0 0 0 3px var(--my-text-color);
outline: 1px solid red;
opacity: 1;

display: grid;
gap: 1rem;
grid-template-rows: minmax(200px, 1fr) repeat(3, 1fr);
grid-template-columns: auto 1fr 1fr auto;
grid-template-areas:
". a b ."
"a a b b"
"c c c c"
". c c .";

transition: opacity 300ms ease-in;

&:hover {
opacity: 0.5;
}
}

The most important part: be yourself. No, really, don't be yourself, think about the rest of the people that may have to handle your code. Be consistent, you don't have to follow this rules, but follow a pattern, that will help you, the rest and your future self whenever you have to come back to your code.