How I organize my CSS declarations 🗂️
Tags: webdev, frontend, css
Published: 2023-11-12 02:35:08

Hi folks! 👋 A while ago, I started adopting this little style **convention** in my CSS code, and I wanted to share it with you in this article. 

➡️ It is about defining an **order** over the various declarations that may appear into a selector. Let me be more specific.

Instead of just throwing all of my declarations one after another, without any particular order, I try to divide them **semantically**, grouping them under a common area.

Approximately, this is the **skeleton** that I try to follow:

```css
.my-selector {
  /* display stuff */
  display: ...;
  grid-template-columns: ...;

  /* positioning stuff */
  position: ...;
  left: ...;
  z-index: ...;

  /* box-model stuff */
  width: ...;
  padding: ...;
  border: ...;
  margin: ...;

  /* typography stuff */
  text-align: ...;
  font-family: ...;
  color: ...;

  /* manipulation stuff */
  transform: ...;
  filter: ...;
  opacity: ...;  

  /* misc stuff */
  box-shadow: ...;
  border-radius: ...;
}
```

Of course this is just an approximate blueprint, and I **do not follow it strictly** each and every time. If an exception should be made, so be it! 

But the thing is, in the general picture, keeping this kind of style helps my code in at least 3 ways:

✅ It's more **consistent**
✅ It's **less error-prone**
✅ Overall it's more readable, and thus more **maintainable**

Just to give you a quick **comparison example**, this is what a simple button could look like without using any ordering for its various declarations:

```css
button {
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-flex;
  padding: 0.5em 1em;
  font-size: 1rem;
  align-items: center;
  transition: 250ms ease-out opacity;
  gap: 1em;
  text-align: center;
  font-weight: 700;
  background-color: #252b2e;
  color: white;
  border: none;
  justify-content: center;
  cursor: pointer;
}
```

😐 Pretty overwhelming, isn't it?
The very same button, with some tidy-up, could look a little bit nicer:

```css
button {
  display: inline-flex; 
  justify-content: center; 
  align-items: center;
  gap: 1em;

  padding: 0.5em 1em;
  border: none;
  background-color: #252b2e;

  font-size: 1rem;
  font-weight: 700;
  color: white;
  text-align: center;
  text-transform: uppercase;
  
  transition: 250ms ease-out opacity;
  
  cursor: pointer;
  border-radius: 8px;
}
```

😁 Much better!
Now, at a glance, I can see more clearly **where everything is placed** in the code, and if I just need to modify the `background-color` for this button, I know where to look.

At this point, one could also enforce an ordering for the declarations **inside** each group: it could be alphabetical, it could be something else.

I really just focus on the **big picture** here: to me, it doesn't really matter much if a `font-size` comes before or after a `font-weight`.
What matters, is that typography-related declarations are well distinguishable and separated from, for example, display-related ones.

And that's all! Feel free to leave a comment and let me know what you think about this! 😉 

Till next time! 👋

<a href="https://www.buymeacoffee.com/francescovetere" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>