[css] 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?

haizhilin2013
2019-07-04 04:34:32 星期四
css
                    
                        
说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?
Comments per page
< Page 1 / 1 >
encountermm 2019-07-04 00:57:24

BEM:block(块)、element(元素)、modifier(修饰符),一种命名约定,可以让代码更易理解
如:
.card
.card__body
.card__button--primary

xiangshuo1992 2019-07-04 04:45:04

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

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

nowherebutup 2019-07-04 08:22:36

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

jiamianmao 2019-08-12 10:10:33
haizhilin2013 2019-08-12 10:24:34

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

chenshijin1 2020-12-05 02:53:33

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>
smile-2008 2021-01-29 02:22:53

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

Comments per page
< Page 1 / 1 >
排行榜
今日答题答题排行
    未答的题
    更多>
      【关注作者公众号】 以面试驱动学习--前端剑解
      【公众号推荐】 不折腾的前端和咸鱼有什么区别

      学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

      【关注官方公众号】 每天4:30-5:00推送
      【公众号推荐】 一起折腾前端算法
      【微信学习群】 备注3+1