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