BEM命名 css模块化解决方案

QiShare 发布于2019-08-02 16:00 / 1674人阅读

摘要：阅读类似为什么要用网络发展是由模块化的目的驱动的将项目分割成几部分以使其易于管理。模块化环境中绕过继承嵌套选择器提高了的特异性。模块化上下文需要低特异性块独立的实体，它本身是有意义的。，，，，修饰块或元件上的标志。

BEM Block Element Modifier

阅读

</>复制代码 
http://getbem.com/introduction/
https://cssguidelin.es/#bem-l...
https://www.w3cplus.com/css/s...
http://www.sohu.com/a/1501527...

类似

</>复制代码 
http://suitcss.github.io/
https://smacss.com/   scalable modular architecture
http://oocss.org/    object oriented

为什么要用BEM

网络发展是由模块化的目的驱动的：将项目分割成几部分以使其易于管理。Web组件
1.避免继承，并通过每个元素（如）使用独特的 CSS类提供某种范围。.my-component__list-item
2.通过将CSS 特性保持在最低水平来减少样式冲突。
3.模块化环境中绕过继承
4.嵌套选择器提高了CSS的特异性。需要变得更具体，以赢得现有的特异性。模块化上下文需要低特异性

块（block）

独立的实体，它本身是有意义的。
虽然块可以嵌套和相互作用，在语义上，他们保持平等; 没有优先级或层次结构。
仅使用类名称选择器
没有标签名称或ID
不依赖页面上的其他块/元素
header，container，menu，checkbox，input，logo,button

</>复制代码 
 ... 
.block {color：＃042; }

元素（element）

块的一部分，没有独立的含义，在语义上与块相关联
任何元素都被语义绑定到它的块。
menu__item，list__item，checkbox__caption，header__title，menu__elements

</>复制代码 
      ...
     
.block__elem {color：＃042; }

修饰（modifier）

块或元件上的标志。
用它们来改变外观，行为或状态
.block--mod或.block__elem--mod和.block--color-black与.block--color-red。复杂修饰符中的空格被短划线代替
disabled，highlighted，checked，fixed，size big，color yellow,
input size big ,button theme green

</>复制代码 
...
...

例子（Example）

</>复制代码 
  
  
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

</>复制代码

Sass3.3 for BEM

</>复制代码 
.note {
  color: #ffffff;
  &__content {
    background: white;
  }
  &__meta {
    background: #f1f1f1;
    border-top: 1px solid #eee;
  }
  &--featured {
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);
  }
}

</>复制代码 
$module: "note";
.#{$module} {
  // By default, our note has a white background…
  &__content {
    background: white;
  }
  // But “featured” notes have an offwhite background
  &--featured {
    .#{$module}__content {
      background: #eee;
    }
  }
}

GPU云服务器云服务器模块名命名空间目录名 BEM 模块化机房解决方案施耐德模块化机房技术方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54499.html

CSS命名规范

摘要：本篇介绍几种命名规范。使用的网站四其他命名规范等减少对结构的依赖增加重复性的使用几种命名规范比较与在命名上相反的点可以放心使用，以为都是在模块内但不推荐当前我们的网站略有思想更概括，中的，相当于的，相当于的，相当于的中文本篇介绍几种CSS命名规范。（规范详细请参考底部References) 一、NEC (nice easy css) 网易前端CSS开源项目 1.1 样式分类重...

includecmath 2019-08-30 13:17 评论0 收藏0
CSS规范--BEM入门

摘要：一开始，公司推出的，包括了规范以及其配套构建工具。代表的不同状态或不同版本。再来看一个之前用常规方式命名的的例子这些类名真是太不精确了，并不能告诉我们足够的信息。这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 评论0 收藏0
CSS哲学伪命题

摘要：最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。用于解决项目命名规则问题。其哲学理念是模块化，功能单一性，关注点分离。借助而解决了中的命名空间的问题，使得单文件变得简单清晰。标题党。这篇文章断断续续的修改过好几次，也没有满意，本来是想总结一下我这些零散的 CSS 知识结构，可能由于知识体系不全面，总是没能把知识点串联成一个通顺的内容。贴出来权当大家一...

Shimmer 2019-08-30 12:48 评论0 收藏0
BEM命名 css模块化解决方案

摘要：阅读类似为什么要用网络发展是由模块化的目的驱动的将项目分割成几部分以使其易于管理。模块化环境中绕过继承嵌套选择器提高了的特异性。模块化上下文需要低特异性块独立的实体，它本身是有意义的。，，，，修饰块或元件上的标志。 BEM Block Element Modifier 阅读 http://getbem.com/introduction/https://cssguidelin.es/...

Lyux 2019-08-29 14:03 评论0 收藏0