标签：BEM 样式 代码 修饰符 规范 谈谈 组件 css

css规范之BEM规范

前言

引用一句经典名言在编程的世界里其中一件最难的事情就是命名，不管是设计到编程语言还是标记语言都会有命名的需求。今天聊的就是关于css的命名规范的发展过程以及演变。

命名的发展变化过程

• 非组件化项目css命名原则
  • 复用性 全局性
  • 以jquery为代表的时代，我们项目都是独立的html文件，此时为了让我们的项目更好的维护，在写样式的时候，通常我们会将一些通用的样式单独提取到一个css文件，每个页面使用的时候可以引入使用，比如reset.css,common.css。
  • 每一块功能块的样式都是独立的，之间无法复用，可以复用的样式全部提取到全局样式。
• 组件化项目命名原则
  • BEM规范
  • 以vue和react为代表的时代，我们项目都是组件化的，组件内的样式都是独立的作用域scope来限制，组件之间是可以相互引入使用的，一个组件可以拆分成多个小组件，此时样式命名规范就需要使用BEM规范，从而达到组件样式的独立性。

BEM的规范

• BEM规范是css命名规范，主要适用的范围是组件化开发的模式。
• 规范介绍（B__E--M）
  • B 代表block,也就是块，每一个块都是一个独立的功能，块之间可以相互嵌套。
    • 块的命名可以由多个单词组成，每个单词之间以-链接
    • 块的作用只是起到一个隔离的作用，一般不会在块里面实现具体组件的样式，对于块修饰样式比如尺寸，位置可以通过修饰符设置
    • 块与修饰符之间通过--链接
  • E 代表element,也就是元素，元素是依赖于块存在，不能独立存在，必须嵌套在块内部。
    • 元素的命名可以由多个单词组成，每个单词之间以-链接
    • 元素的样式必须依赖块存在，元素是块的具体实现,块与元素之间通过__链接
    • 元素里面可以定义每个元素自身的样式，对于元素修饰样式比如尺寸，状态可以通过修饰符设置
    • 元素与修饰符之间通过--链接
  • M 代表modifier, 也就是修饰符，修饰符一般是对于元素或者块的状态和外观进行修饰。
    • 修饰符的命名可以由多个单词组成，每个单词之间以-链接
    • 修饰符可以修饰块和元素的状态、行为、尺寸等
• 代码演示
  • 评分组件 源码地址

      <div class="qf-rate">
          <span class="qf-rate__item qf-rate__item--active">
          </span>
          <span class="qf-rate__item">
          </span>
          <span class="qf-rate__item">
          </span>
          <span class="qf-rate__item">
          </span>
          <span class="qf-rate__item">
          </span>
      </div>
  

      .qf-rate{
          width: 300px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .qf-rate__item{
          width: 48px;
          height: 48px;
          cursor: pointer;
          background: url('./img/star.png');
      }
      .qf-rate__item--active{
          background: url('./img/star_active.png');
      }
  

• BEM不推荐写法
  1. 采用标签或者id作为选择器，全部采用类名作为选择器
     • id因为权重的问题，而且针对于spa的项目会出现id的重复情况
     • 标签选择器当我们需要修改组件解构的时候，同时还需要维护组件样式
  2. 不推荐使用并列选择器，使用修饰符来实现
  3. 不推荐使用伪类选择器，使用修饰符来实现
     • 此处一般通过js控制状态，添加修饰类
  4. 不推荐使用全局的css样式比如rest.css common.css
     • 但是针对于一些格式化的样式还是可以使用，一切目的都是为了方便维护

总结

BEM规范只是前端组件化发展过程中的规范，都是为了组件化服务，并不是唯一的规范，是否采用这个规范目的是为了团队协作和更好的维护迭代，不是为了规范而规范。

标签：BEM,样式,代码,修饰符,规范,谈谈,组件,css
来源： https://www.cnblogs.com/crim/p/15469926.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。