DEV Community

Cover image for CSS Structure
Alex Salgado
Alex Salgado

Posted on

CSS Structure

Write CSS that is easy to read and everyone can understand

One of the struggles developers encounters while writing CSS is the fact that the property you are looking for can be in any line inside a class selector. To help to solve that problem I thought about a structure to organize the styles so you can know where to write and search the properties you need.

I have a way of writing my CSS codes that makes people think I have some kind of OCD, but the truth is I have dyslexia so reviewing code or hunting down some CSS property in a class selector is a big challenge so right at the beginning of my career I β€œcreated” an organized structure to write CSS that changed the whole experience.

This structure consists of splitting properties of a class selector into blocks so you know where to look for properties by going straight to their corresponding block.

The Structure

  • Positioning Block
  • Structure Block
  • Typography Block
  • Modifier Block

css-structure

Positioning Block

Properties that change the absolute positioning of the element on the page like position, top, right, bottom, left.
position-block
\

Structure Block

Properties that modifies the structure, shape, size and details of the element like display, flex and grid properties, margin, padding, background, border...
structure-block

Typography Block

Everything relate to the lettering in general, text and font properties like font, text-align, color, text-decoration, text-transform...
typography-block

Modifier Block

CSS Properties that change the element in any way or add some detail to it and you can't fit in the other blocks. In my case, I put usually properties like transition, transform, box-shadow, cursor, animation...
modifier-block

Top comments (13)

Collapse
 
madsstoumann profile image
Mads Stoumann

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;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alextsalg profile image
Alex Salgado

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

Collapse
 
eljayadobe profile image
Eljay-Adobe

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!

Collapse
 
virla01 profile image
AspectoX

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

Collapse
 
alextsalg profile image
Alex Salgado • 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?

Collapse
 
virla01 profile image
AspectoX

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

Collapse
 
arnav041 profile image
iamArnav

simple and excellent

Collapse
 
vladi160 profile image
vladi160

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

Collapse
 
alextsalg profile image
Alex Salgado • 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

Collapse
 
maxiqboy profile image
Thinh Nguyen

Awesome, very clean and clear,

I will try to apply this into my work,

Thanks

Collapse
 
tojacob profile image
Jacob Samuel G.

I wish I had read this years ago when I started writing css πŸ˜‹

Collapse
 
vidhill profile image
David Hill

I have been playing around with a few stylelint rules/plugins for this, but haven't found the 'one',
Suggestions welcome

Collapse
 
ju-tngh profile image
Julien

Maybe github.com/ream88/stylelint-config... ? I didn't test it but it seems to do the job.