Grouping related classes in your markup

by csswizardry

HTML

<!--
  - Thinking out loud here (I haven’t actually tried this out on
  - a project before), but this is a way of grouping class-heavy
  - markup to keep related classes together. It doesn’t tell us
  - anything that the BEM notation doesn’t already tell us, but
  - it does make things much easier to scan/glance at (i.e. you
  - don’t even have to read the classes’ prefixes to see if/how
  - they are related). It might be even more useful on projects
  - that don’t employ a namespace-based naming convention.
  -
  - It also means that, as a Vim user, I can use thingslike `ci[`
  - to change the contents of a group in one go, `da[` to delete
  - an entire group in one go, etc.
  -->

<div class="[ foo  foo--large ]  [ bar  bar--inverse ]  baz">
    Foo
</div>

<div class="[ foo  foo--large ]  bar  baz">
    Foo
</div>

<div class="foo  [ bar  bar--inverse ]  baz">
    Foo
</div>

<!--
  - It might be more hassle than it’s worth, as it would be quite
  - easy to accidentally remove a space and invalidate a class,
  - but it’s at least a semi-interesting concept.
  -->

CSS

.foo {
    font-weight: bold;
}

.foo--large {
    font-size: 2em;
}





.bar {
    color: #BADA55;
    background-color: #fff;
}

.bar--inverse {
    color: #fff;
    background-color: #BADA55;
}





.baz {
    font-style: italic;
}