How I organize my CSS declarations 🗂️

Hello of us! 👋 Some time in the past, I began adopting this little model conference in my CSS code, and I wished to share it with you on this article.

➡️ It’s about defining an order over the varied declarations which will seem right into a selector. Let me be extra particular.

As an alternative of simply throwing all of my declarations one after one other, with none specific order, I attempt to divide them semantically, grouping them below a typical space.

Roughly, that is the skeleton that I attempt to comply with:

.my-selector {
  /* show stuff */
  show: ...;
  grid-template-columns: ...;

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

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

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

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

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

In fact that is simply an approximate blueprint, and I don’t comply with it strictly each time. If an exception needs to be made, so be it!

However the factor is, within the common image, conserving this sort of model helps my code in not less than 3 methods:

✅ It is extra constant
✅ It is much less error-prone
✅ Total it is extra readable, and thus extra maintainable

Simply to offer you a fast comparability instance, that is what a easy button might appear like with out utilizing any ordering for its varied declarations:

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

😐 Fairly overwhelming, is not it?
The exact same button, with some tidy-up, might look a little bit bit nicer:

button {
  show: inline-flex; 
  justify-content: middle; 
  align-items: middle;
  hole: 1em;

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

  font-size: 1rem;
  font-weight: 700;
  shade: white;
  text-align: middle;
  text-transform: uppercase;

  transition: 250ms ease-out opacity;

  cursor: pointer;
  border-radius: 8px;
}

😁 Significantly better!
Now, at a look, I can see extra clearly the place all the pieces is positioned within the code, and if I simply want to switch the background-color for this button, I do know the place to look.

At this level, one might additionally implement an ordering for the declarations inside every group: it could possibly be alphabetical, it could possibly be one thing else.

I actually simply deal with the large image right here: to me, it does not actually matter a lot if a font-size comes earlier than or after a font-weight.
What issues, is that typography-related declarations are effectively distinguishable and separated from, for instance, display-related ones.

And that is all! Be at liberty to depart a remark and let me know what you consider this! 😉

Until subsequent time! 👋