CSS naming of BEM- from Yandex named the CSS methodology
BEM that is one kind of front-end block (Block), the element (Element), a modifier (modifier), was presented by the famous Russian search engine Yandex team named methodology. BEM naming conventions more stringent, but also contain more information, generally used for large project team to develop a time-consuming in. Our common BEM are generally named after improved, This article is about Nicolas Gallagher (Twitter front-end engineers) improved version. Naming Convention format is as follows:
.block {...} / * representative of higher level of abstraction or components * /
.block__element {...} / * progeny representatives .block for forming a complete whole block * /
.block - modifier {...} / * representative of a different state or different versions of the block * /
The reason for using two hyphens, and underscores instead of one, is to make their own definition of the block can be defined by a single hyphen, such as:
.myHeader-search {...} / * * a block of a custom /
.myHeader-search__textElement {...} / * custom block textElement element * /
.myHeader-search - full {...} / * full custom modifier block * /
The key BEM is that, even with the name you can tell other developers on a marker (class) is used to doing. By visually reading class property, we can understand how the association between the modules is: Some are merely components, some are descendants of those components or elements, there are some other form components or modifiers. We further illustrated by the following example:
<! - assuming that there are components Person ->
<div class="Person">
<-! Hand is a child, left, male is the status or modifiers: left, men, that men left ->
<div class="hand left male"></div>
<! - women's right ->
<div class="hand right female"></div>
</div>
The above code uses a conventional CSS to represent each class are significant, but between them they are out of touch, take female, it refers to the female human finger or some female animal? hand is representing pointer (English hand there is the meaning of the clock hands) or are playing a hand of cards refers to it? Use BEM we can get more and more clear description of the structure, and we can know by naming the association between elements. code show as below:
<-! Using BEM name ->
<div class="Person">
<! - female human hand ->
<div class="Person__hand--female"></div>
<! - human hand ->
<div class="Person_hand--left"></div>
</div>
Look at an example of a conventional way of naming:
<-! Search form, full represent the current state ->
<form class="site-search full">
<input type="text" class="field" />
<input type="submit" class="button" value="搜索" />
</form>
Bad place named above is that the name is not precise enough, you can not tell us enough information. Although we can use them to complete the work, but they do very vague, not elegant. After using BEM notation is the following code:
<! - state or modifier using two dash (-) ->
<form class="site-search site-search--full">
<! - elements in the module uses two underscores (__) ->
<input type="text" class="site-search__field"/>
<input type="submit" class="site-search__button" value="搜索" />
</form>
In the above code, we can clearly see a man named .site-search block, the internal .site-search__field man named elements, and site-search Still another aspect is called .site-search-full . Usually people think that such an approach BEM ugly. However, if you only think that such an approach looks very nice and ashamed to use, then we will miss the most important thing. BEM looks a little strange, but its benefits far more than the appearance of blemishes on the BEM could lead to a longer text input, but most editors have automatic code completion features, and gzip compression will allow us eliminate concerns about the file size
Dry notes more attention to micro-channel public number: the old nine school