This is my first day to participate in the Gwen Challenge

With the development of the front end, semantization becomes more and more important. From HTML tags, to JS hump, are a standard of the law. As a front-end CSS specification is not so important, it is time to take a look at the CSS specification. Start ~ ~

BEM naming convention

BEM meaning:

B -> block

Represents a component, a container. It is used to describe the function of the container, and to demonstrate that it does not contain state.

     <div class="header/ footer / nav /content">
     </div>
Copy the code

Header {}. Footer {}. Do not write component styles and states in block modules.

.header{ width: 100px; // error(do not conform to beM specification)}Copy the code

Blocks do not use selectors

.header a { margin-top: 50px; // // error(does not conform to BEM specification)}Copy the code

E -> element

It can be interpreted as dividing the corresponding region under the block. Cannot exist without a block, separated from it by a double underscore.

.header__body { margin-top: 50px; ###}. Header__logo {margin-top: 50px; // Header background: ###}. Header__title {margin-top: 50px; // title background: ### }Copy the code

When writing inside an element, pay attention to the order in which it is written: it doesn’t matter if the elements are written in order of size, position, and style.

.header__title { width: 100px; // size margin_left: 10px; // position color: # FFF; / / style}Copy the code

M -> Modifier (Status)

Separate the E or B with a double bar. Easy to understand: how an element is presented in a particular situation. For example: a button’s normal case color, emergency case color. The style of a list when selected, etc.

.header__button--primary { color: blue; }. Header__button --danger {color: red; }Copy the code

Use in preprocessor languages

Use in SASS

Very simple & sign join

.header { &__title { wdith: 100px; padding: 20px; } &__button { &--primary { background: blue; } &--default { background: white; }}}Copy the code

Used in less

It is good to introduce the @ symbol (personally in the development of less writing method, more recommended)

@classname: header; .@{classname} { .@{classname}__body { wdith: 100px; padding: 20px; } .@{classname}__button { .@{classname}__button--primary { background: blue; } .@{classname}__button--default { background: white; }}}Copy the code

Less coordination functions implement the BEM specification

Less can be passed in as a variable. You can write the corresponding LESS style and then pass in a different name for reuse.

CreateNameSpace function

function gen(name, mods) { if (! mods) { return ''; } if (typeof mods === 'string') { return ` ${name}--${mods}`; } if (Array.isArray(mods)) { return mods.reduce<string> ((ret, item) => ret + gen(name, item), ''); } return Object.keys(mods).reduce( (ret, key) => ret + (mods[key] ? gen(name, key) : ''), '' ); }Copy the code

Generate beM naming conventions that meet the requirements by gen method.

function bem(name: string) { return function (el? : Mods, mods? : Mods): Mods { if (el && typeof el ! == 'string') { mods = el; el = ''; } el = el ? `${name}__${el}` : name; return `${el}${gen(el, mods)}`; }; }Copy the code

Finally, return the beM-like class name.

Then we can use it in the corresponding component:

        class={[
                bem('item', { disabled: value === 1 }),
                bem('prev')
              ]}
              
            
Copy the code

Finally, the generated style is automatically matched in the corresponding LESS file

&__item {
    flex: 1;
    box-sizing: border-box;
    min-width: @pagination-item-width;
    height: @pagination-height;
    cursor: pointer;
    user-select: none;

    &:active {
        color: @white;
        background-color: @pagination-item-default-color;
    }

    &::after {
        border-width: @border-width-base 0 @border-width-base @border-width-base;
    }
    
Copy the code

The first look at this writing is vant component use, interested can go to read the source code.