CSS Modules HTML Demo

A demo of using CSS Modules within HTML files following the BEM-like approach and powered by Gulp and Lo-Dash/Underscore templates.

Usage example

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;
}

Template includes

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>

Comparison with BEM

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;
}

License

MIT