Composition in CSS | CSS tricks

Tailwind and other utility libraries have been huge proponents of composition. But for me, their version of composition has always brought a heavy feeling of naivety.

I mean, the composition of the usefulness has in principle CSS values ​​added to the element, one by one …

 ... 

If we are honest for a minute, how does this composition differ directly to a class?

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

That said, I can’t deny the fact that I have thought much more about composition since I started using the stock market. So here are a few notes that I have collected about CSS composition.

It is not a new concept

CSS is naturally a composite language. This composition -earth is already built into the cascade. Let’s say you have decided to style a button with a few features:

.button {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles... */
}

You can always tag on other classes to change the appearance of the button:

 ... 
 ... 

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

You can even change the appearance of other elements in a button by the .button class:

 ... 

Composition takes place in both cases:

1. We have composed .button on a
2. We have composed .red on .button

So, CSS composition has been around forever. We just don’t talk about composition as a big thing because it is the nature of the language.

Developers take a fairly limited picture of the composition

When developers talk about composition in CSS, they always seem to limit the definition of composition to the addition of classes in the HTML.

 ... 

What is interesting is that few people, if present, talk about composition within CSS files – from the corner of use Sass Mixins Or advanced steel wind utensils.

In these cases we are also styles together … just not directly in the HTML!

@mixin button () {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles ... */
}

.button {
  @include button; 
}

What is composition?

Composition comes from two possible words:

• Compose: Put together
• Composite: Consisting of different parts or elements

Both words come from the same Latin root composeWhat does arranging or directing means.

In other words … all the work is put together in one way or another, so all the work has been put together. Because of this I wonder why composition is used in such a limited context. 🤔

Go on …

Composition does not reduce Bloat

Class composition only reduces CSS -Bloat if you use utility classes. However, class composition with utilities will probably make HTML -Bloat.

...
...
...

On the other hand, the composition of the classes with Selectors CSS -Bloat cannot reduce. But they certainly introduce less HTML -Bloat.

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

Which is better? \ _ (TS) _/$

HTML -Bloat and CSS -Bloat are probably the least of your worries

We know this:

• HTML can contain an enormous amount of things and this has no influence on performance.
• CSS too.
• 500 lines of CSS are approximately 12 kb to 15 kb (according to Claude).
• An image usually weighs 150 kB or maybe even more.

For most projects, optimizing your use of images will provide you with a better weight reduction than agonization about usefulness versus selector composition.

Refacting your codebase to reduce CSS -Bloat will probably not increase performance much. Maybe a 2MS will take in the loading times?

But refacting your codebase to improve the recognition of the developer and to make it easier to style? Much more worthwhile.

So I would say:

• HTML and CSS -Bloat are quite unimportant.
• It is worth concentrating on architecture, structure and clarity.

Advanced compositions

If we zoom out, we can see that all the styles we write fall into four categories:

1. Lay -outs: Influences how we post things on the page
2. Typography: All font related
3. Theme: Everything related
4. Effects: Nice to have things such as gradients, shadows, etc.

Styles from each of these four categories do not cross each other. For example:

• font-weight belongs only to the Typography category
• colour belongs only to the Theme category

It is logical to make composite classes per category-when it has been done, you can merge and match these classes to make the final output. A lot like LEGO, at the lack of a better example. (Okay, maybe DUPLO for the children?)

So your HTML can look like this, assuming you do the class composition for these four categories:

  
 ... 

  
 ...