Number in front of names to get correct alphabetical sorting.
1.settings
2.tools
3.generic
4.elements
5.objects
6.components
7.overrides
main.scss
used with preprocessors and contain font, colors definitions, etc
Mixins, functions using the the preprocessor.
Resets, Normalize, generic styling for <html>
& <body>
for example.
Styling for bare HTML elements such as <ul>
, <li>
<h1>
, <a>
, <p>
etc.
Generic reusable objects that work as structural elements. For example a layout grid, wrapper elements, responsive media containers. Shouldn't contain styling in terms of colors, sizing but only the structure/layout required.
Everything else decoupled into self contained components.
Utilities, helpers and hacks that need to override anything else. For when code don't fit into a component, need to override other styles or when a temporary hack is needed. This is where it goes. For example helpers for hide/show element (display: none
).
File names are all lower-case similar to BEM classes except with a dot separator instead of double underscore __
.
type-name.block-name.element-name
Depending on how much is included in each individual file parts the type-name
and/or the element-name
can be omitted.
For example a file containing all elements of a block would have a name like type-name.block-name
.
The type-name
is used for grouping similar elements. For example it can be layout
when used for the overall layout of the site or header
when used for the header.
Examples:
header.navigation.menu
(Type - Block - Element)header.site-logo
(Type - Block)footer.widgets
(Type - Block)footer.widgets.location-map
(Type - Block - Element)buttons
(Block)
Largely based on ABEM
Objects: Object-name
Components: block-name__element-name -modifier -modifier2
Main difference from BEM is objects start with a capital letter. Modifiers are separate classes with hypen-prefix to allow inheritance. Only one level of this type of nesting allowed.
Example SCSS:
.block-name {
&__element-name {
// styling for element
&.-modifier-1 {
// styling for modifier 1
}
&.-modifier-2 {
// styling for modifier 2
}
}
}
This will give us the following CSS:
.block-name__element-name {
/* Styling for element */
}
.block-name__element-name.-modifier-1 {
/* Styling for modifier 1 */
}
.block-name__element-name.-modifier-2 {
/* Styling for modifier 2 */
}
And in our HTML it will look something like this:
<div class="block-name__element-name -modifier-1 -modifier-2"></div>
Much cleaner than standard BEM which can give absurdly long class attribute values. Such as:
<div class="block-name__element-name block-name__element-name-modifier-1 block-name__element-name-modifier-2"></div>