Harry Roberts has written an epic article where he
suggests breaking down classes
into objects (o-), components (c-), utilities (u-),
themes (t-), states (is-, has-) and a couple of others
(_, js-, qa-). He uses this namespacing method to make
the code he writes more readable and maintainable at scale.
I've got a slightly different take on it. I would argue that Harry's method of adding class types adds complexity to our CSS. With BEM naming conventions and Sass I believe we can achieve the goals of readability and maintainability more simply.
To achieve this, however, we have to treat everything as a component. That includes core page elements.
If we can accept this, then the only classes I believe we need are component classes. With BEM naming conventions all of our components come with state baked in, by way of modifiers:
<html class="page page--has-js">
<body class="page__body"></body>
</html>and:
<section class="carousel carousel--is-playing">
<img class="carousel__image" />
<div class="carousel__content">
<h2 class="carousel__content__title">
...
</h2>
<button class="carousel__content__button">
...
</button>
</div>
</section>If components and state are taken care of by vanilla BEM, what about objects, utilities and themes?
Let's cover objects and utilities first. Utilities are essentially object's little sister. Using Sass both can be applied as placeholders to components.
// Utility
%font-size--large {
font-size: $font_size_large;
}
// Object
%media {
margin-top: $media_margin_top;
}
%media__image {
margin-right: $media_margin_right;
float: left;
}
%media__content {
overflow: hidden;
}
// Applied
.carousel {
@extend %media;
...
}
.carousel__image {
@extend %media__image;
...
}
.carousel__content {
@extend %media__content;
...
}
.carousel__content__title {
@extend %font-size--large;
...
}Theme specific styles can be added per component by applying a modifier to the page component. Let's call our theme Hanoi:
.page--hanoi-theme {
.carousel__content__title {
@extend %font-size--regular;
}
}Here's an example of how we might arrange our partials in this scenario:
// Some default variables
@include "core/_config.scss";
// Overide with theme specific variables
@include "theme/hanoi/core/_config.scss";
// Default styling of elements
@include "core/reset/lib/_normalize.scss";
@include "core/reset/_reset.scss";
@include "core/reset/_reset__form.scss";
// Utilities
@include "core/utility/_font.scss";
// Objects
@include "core/object/media/_config.scss";
@include "core/object/media/_media.scss";
// Components
@include "component/carousel/_config.scss";
@include "component/carousel/_carousel.scss";
// Add theme style to components
@include "theme/hanoi/component/carousel/_config.scss";
@include "theme/hanoi/component/carousel/_carousel.scss";Any thoughts on this I'm @colinmeinke