A demo of using CSS Modules within HTML files following the BEM-like approach and powered by Gulp and Lo-Dash/Underscore templates.
Require css files from html templates and use them as CSS Modules. Source files:
index.html
<link href="styles.css" rel="stylesheet">
<% var block1 = require("./styles/block1") %>
<div class="${block1.element}">Block 1 element</div>
<% var block2 = require("./styles/block2") %>
<div class="${block2.element}">Block 2 element</div>styles/block1.css
.element {
color: red;
}styles/block2.css
.element {
color: green;
}Compiles to:
build/index.html
<link href="styles.css" rel="stylesheet">
<div class="block1__element">Block 1 element</div>
<div class="block2__element">Block 2 element</div>build/styles.css
.block1__element {
color: red;
}
.block2__element {
color: green;
}Include one html template into another. Source files:
index.html
<div>index.html</div>
<%= require("./includes/include") %>includes/include.html
<div>include.html</div>Compiles to:
build/index.html
<div>index.html</div>
<div>include.html</div>Class naming convensions in BEM:
<div class="block">
Block
<div class="block__element">Element</div>
</div>
<div class="block block--modifier">
Modified block
<div class="block__element block__element--modifier">Modified element</div>
</div>Achieving the same with CSS Modules:
block.html
<% var block = require("./styles/block") %>
<div class="${block.root}">
Block
<div class="${block.element}">Element</div>
</div>
<div class="${block.modifiedRoot}">
Modified block
<div class="${block.modifiedElement}">Modified element</div>
</div>styles/block.css
.root {
color: red;
}
.modifiedRoot {
composes: root;
border: 1px solid;
}
.element {
color: green;
}
.modifiedElement {
composes: element;
border: 1px solid;
}MIT