How I organize my CSS and why?

Why I asked me this question? I think it’s because sometimes I see my own code and I swear a lot. Or it’s because some people don’t care about their style and I swear too. But I love styling things and I decided to clean up my styles.

It’s my way to organize my properties to get cool, clean and readable stylesheets. I think I’m not the only one who cares about this and this is why I’m sharing it right now.

First I made a list of properties and I’ve sorted them by type and by importance. And with this list I can style neatly without thinking my code is a big mess.

Here is the list :

1. Position type and float
2. Top, Right, Bottom, Left position
3. Display and Visibility
4. Size (width and height)
5. Margin
6. Outline and Border
7. Padding
8. Overflow
9. Background
10. Font, Text, Line, Space
11. Color
12. Effects (like opacity or shadows)
13. Animations and Transitions

So, the organization is simple. I start with general properties and I continue to the most inside properties. After that I make effects and animations.
What I like too in this method is to seperate the container and the content. In this list the first 8 elements are part of the container, the following three are part of the content and the last two are just sort of bonus.

According to that list, I get the position of my element, I add its size, I design it, then I work on text inside it and finish with Effects and Animations.
Since I’m working this way, I’m saving my time because I find my properties with ease.

Here is an example of what you can expect:

.element{
  position: relative;
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 1em 2em;
  background: #212228;
  font-weight: 700;
  color: #ffffff;
  transition: all 0.3s ease;
}

If you have another method to define your CSS properties feel free to leave a comment.

You can also like the Atomic Design concept by Brad Frost. It’s the organization of web components as if they are a chemistry elements. I like the idea!