BEM class name generator for webpack css modules
npm install bem-css-modules
We set up Webpack for modulality css files
``js`
loader: {
'css-loader',
options: {
localIdentName: '[hash:base64:5]', // or may be '[local]' for dev.
modules: true
}
}
We have some css with BEM CSS naming
`stylus`
// form-payment.styl
.form
display: block
&__label
color: blue
&_error
color: red
&__title
font-size: 18px
Now we can import css files inside Javascript files with short names(compressed by Webpack).
jsx
import style from './form-payment.styl';/**
stylus is object like Map
{
form: 'Daffg',
form__title: 'FGsgT',
form__label: 'RtHuS',
form__label_error: 'AFGHs',
}
*/
export default () => {
return (
{/ We get className from imported style module/}
Title
);
}
`
If we have many elements with a lot of modifiers, then it is difficult to concat the class name.
With bem-css-modules we can simplify component code with BEM generator for imported module.
$3
`jsx
import style from './form-payment.styl';
import block from 'bem-css-modules';const b = block(style); // Create BEM Generator for current CSS module
export default () => {
return (
Title
);
}
`#API
`js
import style from './input.css';
import block from 'bem-css-modules';const b = block(style);// Create BEM Generator for current CSS module
/*
style is object like this
{
input: 'HASH_INPUT',
input__field: 'HASH_INPUT_FIELD',
input__field_disabled: 'HASH_INPUT_FIELD_DISABLED',
input__field_type_text: 'HASH_INPUT_FIELD_TYPE_TEXT',
input__field_type_phone: 'HASH_INPUT_FIELD_TYPE_PHONE',
input__icon: 'HASH_INPUT_ICON',
'is-active': 'HASH_IS_ACTIVE',
'is-removed': 'HASH_IS_REMOVED',
}
*/
b(); // 'HASH_INPUT'
b('field'); // 'HASH_INPUT_FIELD' (form BEM's input__field)
b('field', {type: 'text'}); // 'HASH_INPUT_FIELD HASH_INPUT_FIELD_TYPE_TEXT' (form BEM's 'input__field input__field_type_text')
b('field', {disabled: true}); // 'HASH_INPUT_FIELD HASH_INPUT_FIELD_DISABLED' (form BEM's 'input__field input__field_disabled')
b('icon', null, {active: true, removed: false); // 'HASH_INPUT_ICON HASH_IS_ACTIVE' (from BEM's 'input__icon is-active')
b('icon', {active: true, removed: false); // 'HASH_INPUT_ICON HASH_IS_ACTIVE' (from BEM's 'input__icon is-active')
`$3
Flow and Typescript definitions already included.
$3
Type: Object ##### throwOnError
Type:
Boolean
Default: false ##### elementDelimiter
Type:
String
Default: __ ##### modifierDelimiter
Type:
String
Default: _ #### Set settings
`js
const block = require('bem-css-modules');
block.setSettings({
throwOnError: true,
modifierDelimiter: '--'
});
``Throw exception if mod, element or state didn't found.