[css] 第79天说说你对BEM规范的理解，同时举例说明常见的CSS规范有哪些？

haizhilin2013 commented 5 years ago

第79天说说你对BEM规范的理解，同时举例说明常见的CSS规范有哪些？

encountermm commented 5 years ago

BEM：block（块）、element（元素）、modifier（修饰符），一种命名约定，可以让代码更易理解如： .card .cardbody .cardbutton--primary

xiangshuo1992 commented 5 years ago

BEM是比较好的CSS规范，应该也是得到大家认可最多的CSS规范 OAMC是WeUI根据BEM改造来的 object-area-meta-control

还有OOCSS，面向对象的CSS书写规范。不管哪种，解决问题，同时团队大家共同维护遵守的，才是好的规范和执行。

nowherebutup commented 5 years ago

1 .团队开发更规范 2 .通过css的命名就知道各个元素之间的关系

jiamianmao commented 5 years ago

再放出一个之前收藏赠予诸位。 http://luopq.com/2016/01/05/css-optimize/

haizhilin2013 commented 5 years ago

@jiamianmao 你会了吗？只要你会就好，这类的东西网上资料特别多，估计大家一搜就能搜到不少！

chenshijin1 commented 3 years ago

CSS BEM规范

好的样式手册能够显著提高开发速度，debug速度以及在原有代码上添加新功能的效率。规范标准我们都熟知并或多或少的应用于项目中，然而不幸的是在以往大多数css代码开发过程中很少很使用到命名规范，从长远看这会导致最后产生的CSS代码库很难维护，可移植性不高。

BEM方法确保开发项目的每一个人，基于一套代码规范去开发，这样非常有利于团队成员理解彼此的代码，而且对于后续接手项目的开发人员来说，也是一件好事。BEM - Block Element Modifier 它可以快速创建出可复用的前端组件和前端代码。

BEM是Block Element Modifier的缩写

Block, 代表了一个独立的块级元素，可以理解为功能组件块，一个Block就是一个独立的功能区块，比如头部是一个block，表单功能输入框也可以是一个block。block功能可大可小。
Element, 是Block的一部分不能独立来使用，所有的Element都是与Block紧密关联的。例如一个带有icon的输入框，那么这个icon就是输入框block的一个element。
Modifier，是用来修饰Block的一个Element，表示block或者element在外观或者行为上的改变。例如前文提到的输入框Block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用Modifier来实现。

BEM命名

尽量使用类名选择器，不要使用tag或者id选择器
使用小写字母、数字或者- ，多个单词描述时采用-来连接,例如el-input
使用两个_来连接Block和Element , Block__Element, 例如el-input__icon
使用两个-来连接MOdifier和Element或Block, Block__Element--modifier或者Block--modifier, 例如el-input--color-primary, el-inpu__icon--size-small

<form action="" class="form form--theme-xmas form--simple">
    <input type="text" class="form__input">
    <input type="text" class="form__submit  form__submit--disabled">
</form>
<style>
    .form {}
    .form--thema-xmas {}
    .form--simple {}
    .form__input {}
    .form__submit {}
    .form__submit--disabled {}
</style>

MrZ2019 commented 3 years ago

1 .团队开发更规范 2 .通过css的命名就知道各个元素之间的关系

haizlin / fe-interview