@milmaj/cem v0.0.2

milmaj/component-element-modifier

BEM is a popular method for frontend developers to use in DOM and Styling.

CEM replaces Block with Component and helps us to have a common language and method in React. It is implemented in React, but also applicable in Angular, Vue and co., since it's just a method.

Example

./src/components/Card/Card.tsx

import { Component, Element } from '@milmaj/cem';

const Card = props => {
    return (
        // you can use every html tag, e.g. tag="button" or tag="input", so you
        // get "tag" instead of default "div"
        <Component component="Card" className={props.className} tag="div">
            <Element element="__headline">{props.headline}</Element>
            <Element element="__content">
                {props.content}
            </Element>
            <Element element="__button">
                {props.button}
            </Element>
        </Component>
    );
}

export default Card;

<Card className="--dark" headline="VALUE" content="VALUE" button="VALUE">

./src/components/Card/_Card.scss

[component="Card"] {
    // elements
    .__headline {}
    .__content {}
    .__button {}
    // modifiers
    &.--dark {}
}

Output:

<div component="Card" class="--dark" >
    <div element="__headline">VALUE</div>
    <div element="__content">VALUE</div>
    <div element="__button">VALUE</div>
</div>

Why CEM

• like in BEM, we don't have Blocks anymore, since we are in React and replace it with Component, it resolves the component-block problem
• no extra packages and js-configurations like "classnames", "react-bem-helper", "react-bem-classes"
• every developer knows about Component, Element and mofidier, for complete UI/UX development
• style-less: You define the styling for every project and component based on UI, but the language is always the same. e.g. in every project you use [component="Button"] to style the Button
• global language of selectors for Components, Elements
• better recognize components, element and modifiers in React, HTML and CSS

API

Install

yarn add @milmaj/cem
// or
npm i @milmaj/cem

LICENSE

MIT