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?
- How big is it?
- How it looks
- How is distributed
- How does its content look
- Are there any filters
- How it behaves
- Everything else that I rarely use and/or are still a mystery to me as to how it works.
- media queries
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-height
are 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.