DEV Community

CSS Structure

Alex Salgado on July 16, 2021

Write CSS that is easy to read and everyone can understand One of the struggles developers encounters while writing CSS is the fact that...

Read full post

Mads Stoumann • Jul 18 '21

I used to group my CSS in a similar way, but as more and more properties were introduced, I switched to alphabetic sorting, and have never looked back! By the way, the position example can use the new inset property, to set all 4 sides with a single value:

.element {
  inset: 0;
  position: absolute;
}

Alex Salgado • Jul 18 '21

@madsstoumann yess! inset is an awesome property, I saved that one to another post along with other properties that saves time and are awesome.

Eljay-Adobe • Jul 19 '21

Alphabetic sorting for the win!

But, in the few cases where alphabetic sorting can't be done because the order is important... please comment the code!

AspectoX • Jul 18 '21

I know that many write the structure in alphabetical order, in my case it is not like that.
My order is this:
display
width
height
font (family, size, weight, line-height, etc.)
text
Colour
background-color
padding
margin
aling
justify
transittion
transform
position
z-index

Alex Salgado • Jul 18 '21 • Edited

@virla01 The alphabetical order for me is so tough because I have to think what letter comes after and before to search untilI find some property with that letter. My dyslexia kicks in automatically hahaha.

Just out of curiosity.
The align and justify properties been far away from the display give tou some kind of struggle to fix a code? Seen that you read the display and have to go to the end of the structure?

AspectoX • Jul 18 '21

Yes, everything that has to do with flex or grid I usually use it at the end to have it separated from the rest
text-aling goes where it says text

iamArnav • Jul 18 '21

simple and excellent

vladi160 • Jul 18 '21

z-index: 999 is bad practice in almost all cases

Alex Salgado • Jul 18 '21 • Edited

I completely agreed, to be honest in those examples I put the first number that popped up on my mind. I should put a disclaimer about that, thank you for the feedback @vladi160