https://github.com/sgtpep/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.
https://github.com/sgtpep/css-modules-html-demo
bem css-modules demo gulp html underscore-templates
Last synced: 6 months ago
JSON representation
A demo of using CSS Modules within HTML files following the BEM-like approach and powered by Gulp and Lo-Dash/Underscore templates.
- Host: GitHub
- URL: https://github.com/sgtpep/css-modules-html-demo
- Owner: sgtpep
- License: mit
- Created: 2015-11-26T12:05:34.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-29T20:28:35.000Z (almost 10 years ago)
- Last Synced: 2025-03-25T16:21:54.984Z (7 months ago)
- Topics: bem, css-modules, demo, gulp, html, underscore-templates
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Modules HTML Demo
A demo of using [CSS Modules](https://github.com/css-modules/css-modules) within HTML files following the [BEM](http://getbem.com/)-like approach and powered by [Gulp](https://github.com/gulpjs/gulp) and [Lo-Dash/Underscore templates](https://lodash.com/docs#template).
## Usage example
Require css files from html templates and use them as CSS Modules. Source files:
`index.html`
```html
<% var block1 = require("./styles/block1") %>
Block 1 element
<% var block2 = require("./styles/block2") %>
Block 2 element
```
`styles/block1.css`
```css
.element {
color: red;
}
```
`styles/block2.css`
```css
.element {
color: green;
}
```
Compiles to:
`build/index.html`
```html
Block 1 element
Block 2 element
```
`build/styles.css`
```css
.block1__element {
color: red;
}
.block2__element {
color: green;
}
```
## Template includes
Include one html template into another. Source files:
`index.html`
```html
index.html
<%= require("./includes/include") %>
```
`includes/include.html`
```html
include.html
```
Compiles to:
`build/index.html`
```html
index.html
include.html
```
## Comparison with BEM
Class naming convensions in BEM:
```html
Block
Element
Modified block
Modified element
```
Achieving the same with CSS Modules:
`block.html`
```html
<% var block = require("./styles/block") %>
Block
Element
Modified block
Modified element
```
`styles/block.css`
```css
.root {
color: red;
}
.modifiedRoot {
composes: root;
border: 1px solid;
}
.element {
color: green;
}
.modifiedElement {
composes: element;
border: 1px solid;
}
```
## License
MIT