bem-cn-css-modules

classname-modules

Инструмент для составления CSS классов по бему с поддержкой css-modules

Установка

npm i bem-cn-css-modules

Использование

// block/cn.ts
import { cn } from 'bem-cn-css-modules';

import styles from './Block.module.css';

export const cnBlock = cn('Block', styles);

// block/Block.tsx
import React from 'react';

import { Element } from './Element/Element';

export const Block = ({ className, type, visible }) => (
    <div className={cnBlock({ type, visible }, [className])}>
        <Element className={styles['Block-Item']} color="red" />
        <Element className={styles['Block-Item']} color="red" />
        <Element className={styles['Block-Item']} color="red" />
    </div>
);

/* block/Block.module.css */
.Block {
    display: none;

    width: 200px;
    height: 200px;
}

.Block_visible {
    display: block;
}

.Block_type_default {
    background-color: blue;
}

.Block-Item:not(:first-child) {
    margin-top: 16px;
}

// block/Element.tsx
import React from 'react';

import { cnBlock as cn } from '../cn';

import styles from './Element.module.css';

const cnBlock = cn.setStyles(styles);

export const Element = ({ className, color }) => <div className={cnBlock('Element', { color }, [className])} />;

/* block/Block.module.css */
.Block-Element {
    width: 50px;
    height: 50px;
}

.Block_color_red {
    background-color: red;
}

Api

Api аналогичное @bem-react/classname За исключением того, что нет исключения дублирующих блока / элемента миксов