Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

encountermm

encountermm commented on Jul 4, 2019

@encountermm

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

xiangshuo1992

xiangshuo1992 commented on Jul 4, 2019

@xiangshuo1992
Contributor

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

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

nowherebutup

nowherebutup commented on Jul 4, 2019

@nowherebutup

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

jiamianmao

jiamianmao commented on Aug 12, 2019

@jiamianmao

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

haizhilin2013

haizhilin2013 commented on Aug 12, 2019

@haizhilin2013
CollaboratorAuthor

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

chenshijin1

chenshijin1 commented on Dec 5, 2020

@chenshijin1

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

smile-2008 commented on Jan 29, 2021

@smile-2008

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@jiamianmao@xiangshuo1992@encountermm

        Issue actions

          [css] 第79天 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些? · Issue #569 · haizlin/fe-interview