Multiple Classes vs Mixins

Forum /

I was wondering why you chose to define an element entirely using classes in the HTML instead of breaking shared functionality into placeholders / mixins (to use Sass as an example). Is it because you don't use a preprocessor?

If we take the example of a list, it might look like:

<ul class="ui-list horizontal-list resource-list gallery-list"></ul>

In this situation, why is this better than a single class:

<ul class="gallery-list"></ul>

With that class composed from placeholders:

.gallery-list {
  @extend %ui-list;
  @extend %horizontal-list;
  @extend %resource-list;

  // Gallery List specific styles
}

Do you see this as potentially beneficial?

9 years ago

tadatuta

@Undistraction Actually we use preprocessor but semantics of CSS Mixins is different.

It results with copy-paste of styles under the hood when multiple classes gives you possibility:

To reuse same styles on different DOM nodes
To handle then with JS in runtime

And which is most important provides same terms (blocks, elements, modifiers) to all techs (HTML, CSS, JS, tests, etc.)

9 years ago

Undistraction

Thanks. That all makes sense.

This is a big performance win: http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/
I hadn't considered the increased availability of js hooks.

In order to leave a comment you need to login.