<commit_before># CSS Modules BEM Demo
A demo of using [CSS Modules](https://github.com/css-modules/css-modules) within HTML files following the [BEM](http://getbem.com/) 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
<link href="styles.css" rel="stylesheet">

<% var block1 = require("./styles/block1") %>
<% var block2 = require("./styles/block2") %>

<div class="${block1.element}">Block 1 element</div>
<div class="${block2.element}">Block 2 element</div>
```

`styles/block1.css`
```css
.element {
  color: red;
}
```

`styles/block2.css`
```css
.element {
  color: green;
}
```

Compiles to:

`build/index.html`
```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`
```css
.block1__element {
  color: red;
}
.block2__element {
  color: green;
}
```

## Template includes

Include one html template into another. Source files:<commit_msg>Reorder lines in the example<commit_after># CSS Modules BEM Demo
A demo of using [CSS Modules](https://github.com/css-modules/css-modules) within HTML files following the [BEM](http://getbem.com/) 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
<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`
```css
.element {
  color: red;
}
```

`styles/block2.css`
```css
.element {
  color: green;
}
```

Compiles to:

`build/index.html`
```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`
```css
.block1__element {
  color: red;
}
.block2__element {
  color: green;
}
```

## Template includes

Include one html template into another. Source files:
{'fraction_non_alphanumeric': 0.17612193056731584, 'fraction_numerical': 0.013547840812870448, 'mean_word_length': 4.937185929648241, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4274137', 'n_tokens_mistral': 841, 'n_tokens_neox': 800, 'n_words': 209}