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:

.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:

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:

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! 👋