Composition in CSS | CSS-Methods

Tailwind and different utility libraries have been large proponents of composition. However, to me, their model of composition has all the time carried a heavy sense of naïveté.

I imply, utility composition is mainly including CSS values to the aspect, one by one…

 ... 

If we’re sincere for a minute, how is that this composition completely different from including CSS guidelines immediately into a category?

/* That is composition too! */
.card {
  padding: 1rem; 
  border: 2px strong var(—color-blue-500)
}

That mentioned, I can’t deny the truth that I’ve been pondering much more about composition ever since I started utilizing Tailwind. So, listed below are a few notes that I’ve gathered collectively about CSS composition.

It’s not a brand new idea

CSS is a composable language by nature. This composition nature is already constructed into the cascade. Let’s say you’ve determined to type a button with just a few properties:

.button {
  show: inline-flex;
  padding: 0.75em 1.5em; 
  /* different types... */
}

You may all the time tag on different courses to change the button’s look:

 ... 
 ... 

.major { background: orange; }
.secondary { background: pink; }

You may even change the looks of different components to a button by including the .button class:

 ... 

Composition is occurring in each circumstances:

1. We composed .button onto a
2. We composed .crimson onto .button

So, CSS composition has been in existence since eternally. We merely don’t discuss composition as a Huge Factor as a result of it’s the character of the language.

Builders take a reasonably slender view of composition

When builders discuss composition in CSS, they all the time appear to all the time prohibit the definition of composition to the addition of courses within the HTML.

 ... 

What’s attention-grabbing is that few individuals, if any, talk about composition inside CSS information — from the angle of utilizing Sass mixins or superior Tailwind utilities.

In these circumstances, we’re additionally composing types… simply in a roundabout way within the HTML!

@mixin button () {
  show: inline-flex;
  padding: 0.75em 1.5em; 
  /* different types ... */
}

.button {
  @embrace button; 
}

What’s composition?

Composition comes from two doable phrases:

• Compose: Put collectively
• Composite: Made up of distinct elements or components

Each phrases come from the identical Latin root componere, which suggests to rearrange or direct.

In different phrases… all work is put collectively ultimately, so all work consists. This makes me surprise why composition is utilized in such a restricted context. 🤔

Shifting on…

Composition doesn’t scale back bloat

Class composition reduces CSS bloat provided that you’re utilizing utility courses. Nonetheless, class composition with utility courses is prone to create HTML bloat.

...
...
...

Alternatively, class composition with selectors may not scale back CSS bloat. However they positively introduce lesser HTML bloat.

...
...
...
 ... 

Which is healthier? ¯_(ツ)_/¯

HTML bloat and CSS bloat are most likely the least of your issues

We all know this:

• HTML can include an enormous quantity of issues and it doesn’t have an effect on efficiency a lot.
• CSS, too.
• 500 traces of CSS is approx 12kb to 15kb (based on Claude).
• A picture usually weighs 150kb or maybe much more.

For many tasks, optimizing your use of photographs goes to internet you higher weight discount than agonizing over utility vs. selector composition.

Refactoring your codebase to lower CSS bloat shouldn’t be prone to improve efficiency a lot. Perhaps a 2ms lower in load occasions?

However refactoring your codebase to enhance developer recognition and make it simpler to type? Way more value it.

So, I’d say:

• HTML and CSS bloat are fairly inconsequential.
• It’s worthwhile to deal with structure, construction, and readability as an alternative.

Superior compositions

If we zoom out, we will see that every one types we write fall into 4 classes:

1. Layouts: Impacts how we place issues on the web page
2. Typography: All the pieces font associated
3. Theming: All the pieces shade associated
4. Results: Good good to have stuff like gradients, shadows, and so forth.

Types from every of those 4 classes don’t intersect with one another. For instance:

• font-weight belongs completely to the Typography class
• color belongs completely to the Theming class

It is smart to create composable courses per class — when that’s executed, you may mix-and-match these courses collectively to create the ultimate output. Very very similar to Lego, for the dearth of a greater instance. (Alright, perhaps Duplo for the children?)

So your HTML may find yourself wanting like this, assuming you do class composition for these 4 classes:

  
 ... 

  
 ...