This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

Preface ✍ ️

  • Recently I was building my own component library, aboutCSSThe preprocessor uses aSCSS.
  • The naming of the style is usedBEM“, take this opportunity to share.

How to name 🔥

How hard it is to name styles

  • I used to think that this is a very, very difficult problem, it is scary, it is just like the product let me make a page but no design or even prototypes just a few boxes let me make a particularly beautiful, bright color, really (tian) point (DA) difficult (PI) 🤏.
  • Have you ever seen a situation where you write another module and its contents give it a style namecontainerWhat about his left? What about the right-hand side?left-container?right-container? If there is content in the content, forgive my poor English, I will still want to usecontainer, be crazy 🤷♂️.
  • classThis is a difficult problem for most front-end programmers, but for a small group of front-end programmers it’s not worth mentioning. Why? Because I’ve seen names in orderone.twoandthreeTo arrange theclassI guess it’s not a big deal to them 🤦♂️.
  • Just kidding, in normal circumstances, when we name a style, we will look up the English of the corresponding module to name it (I didn’t say good English) and give it a unique name.
  • But in fact, we can’t guarantee that a name we thought was unique is unique, which we might use when we add a dynamic to a TABactivedTo represent theTo be activated To be selectedAfter using this, other module dynamics will naturally want to use this nameactived, if you can leave a like, that we are a kind of people hahaha 😵.
  • Some of you may say, “Oh, as long as it runs, it doesn’t conflict. The customer won’t look at your source code and see how you write it.” But imagine if the project is not your own development, when it comes to larger, more complex projects, how you organize the code is the key to efficiency! What if you take the pail and someone else takes it? People look at your code and say, “Look! What shit mountain this guy wrote!” Have you ever made fun of others like this 🙇.

About the BEM 🌊

What is the BEM

  • BEM — Block Element ModifierIs a way to help you create reusable components and code sharing in front-end development, provided byYandexA front end proposed by the teamCSSNaming methodology.
  • The so-calledBEMTo put it bluntly is to follow the patternB E MThree ways to name it.

  • BEM:

    • B – BlockA separate module, a separate entity that is meaningful in and of itself such as:header,menu,container
    • E – ElementElement, part of a block but has no independent meaning of its own. For example:header title,container input
    • M – ModifierA modifier, a state or attribute of a block or element such as:small,checked

BEM used

  • Know theBEMAfter the basic concept of the next is to use, I also said above, to be clearBEMIt’s just connecting the three together to make oneclassName. how do you connect them?
  • BEMOne proposed concept is the use of a concatenation symbol, which does not specify what concatenation must be used, but does specify the use of different concatenations as an intra-team convention to distinguish BEM 3 types of elements.
  • BYou can actually think of it as a module, like thisElementtheel-button,Ant Designtheant-btn.
  • EOfficially, the concatenation is the block name followed by two underscores and the element name (__) likeElementtheel-radio__input.
  • MThe official way to connect is.block__elem--mod, likeElementtheel-button--small,vantthevan-button--danger.

The advantage of the BEM

  • Many of the best open source component libraries are named after the BEM specification, so why are they so popular?
  • You know, we use a technology or a framework or a specification for one purpose,Make yourself more comfortable, just like an editor with plugins, not nativejsDevelop with a framework.
  • Convenient to see BEMYou can let the developer know where the style belongs from the name, you can know the meaning of a tag from the name, suppose a style nameleft-contentIt was hard enough just to find out where the pattern was.
  • Structure and clearIn ourscssandlessThe preprocessor was used to nesting multiple layers, but here we areBEMThe named module hierarchy is simple and clear, andcssThere is no need to choose too many levels in writing.
  • reusabilityAfter you’ve styled an element, you need to concatenate its modifiersscssCan be used in@mixinDo some processing splicingEandMPut in publicscssAnd then reuse it somewhere else, likeelementtheMixins configuration.

The sample

Said so much light to read the text is tired of it, or put a simple code example out of the product, the following is a button component encapsulation.

<template>
  <button
    class="zl-button"
    :class="[
      type ? 'zl-button--' + type : '',
      size ? 'zl-button--' + size : ''
    ]"
    type="button"
  >
    <slot />
  </button>
</template>
<script>
export default {
  name: 'ZlButton',
  props: {
    type: {
      validator (value) {
          return oneOf(value, ['default', 'primary', 'info', 'success', 'warning', 'danger']);
      },
      type: String,
      default: 'default'
    },
    size:{
      validator (value) {
          return oneOf(value, ['','medium', 'small', 'mini']);
      },
      type: String,
      default: ''
    }
  }
};
</script>
Copy the code
  • zl-buttonYou can see it’s used hereBThe connection.
  • zl-button--smallYou can see it’s used hereB+MIn the middle with--Join to represent block and modifier join.

Put it at the end 👋

  • It’s not that hard to define a style, it’s just that you abandon it for the sake of speed, and if time permits, you have to use the mainstream norms to keep your code from becoming a nuisance.
  • If you think this article is helpful to your words might as well 🍉 attention + thumbs up + favorites + comments + forwarding 🍉 support yo ~~😛

Reference 👈

What do you think of BEM naming in CSS?

GET BEM

Past highlights 🌅

How to write an elegant component example using Vuepress (above) 👈

How to write an elegant component example using Vuepress (2) 👈

Hand in hand 🧑🤝🧑 Don’t worry about learning Gulp

For convenience, I changed someone else’s wheel 😅