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规范(含代码)的更多相关文章

  1. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

  2. windows环境PhpStorm中简单使用PHP_CodeSniffer规范php代码

    为什么使用PHP_CodeSniffer 一个开发团队统一的编码风格,有助于他人对代码的理解和维护,对于大项目来说尤其重要. PHP_CodeSniffer是PEAR中的一个用PHP5写的用来检查嗅探 ...

  3. 代码规范、代码复审、PSP

    作业三: 代码规范.代码复审.PSP 代码规范 代码规范的重要性 一.规范的代码可以促进团队合作  一个项目大多都是由一个团队来完成,如果没有统一的代码规范,那么每个人的代码必定会风格迥异.且不说会存 ...

  4. web前端代码规范 - HTML代码规范

    Bootstrap HTML编码规范 本文转载自w3cschool. 由于bootstrap得到了世界的认可,因此,此规范用于规范html代码有一定的说服力. 交流qq群:164858883.欢迎各位 ...

  5. 谈谈关于PHP的代码安全相关的一些致命知识

    谈谈关于PHP的代码安全相关的一些致命知识 目标 本教程讲解如何防御最常见的安全威胁:SQL 注入.操纵 GET 和 POST 变量.缓冲区溢出攻击.跨站点脚本攻击.浏览器内的数据操纵和远程表单提交. ...

  6. javascript基础修炼(4)——UMD规范的代码推演

    javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...

  7. 如何使用 Pylint 来规范 Python 代码风格

    如何使用 Pylint 来规范 Python 代码风格 转载自https://www.ibm.com/developerworks/cn/linux/l-cn-pylint/   Pylint 是什么 ...

  8. Python代码规范之---代码不规范,亲人两行泪

    任何语言的程序员,编写出符合规范的代码,是开始程序生涯的第一步! 关于代码规范 Python 官方提供有一系列 PEP(Python Enhancement Proposals) 文档 其中第 8 篇 ...

  9. 个人博客作业Week2(代码规范,代码复审)

    Q:是否需要有代码规范 首先我们来搞清楚什么是“代码规范”,它和“代码风格”又有什么关系.依据个人的审美角度,我可能更喜欢在函数与函数之间空出一行,可能在命名习惯和代码注释上更加的internatio ...

随机推荐

  1. PyQt5 笔记

    一.简介 pyqt5做为Python的一个模块,它有620多个类和6000个函数和方法.这是一个跨平台的工具包,它可以运行在所有主要的操作系统,包括UNIX,Windows,Mac OS.pyqt5是 ...

  2. 「山东省队集训2021 Round 1」 半夜

    考虑将 \(X\) 复制一次放到后面再对其长度为 \(n\) 的连续子串和 \(Y\) 求一波 \(\rm{Longest\ Common\ Subsequence}\) 就能得到 \(\Theta( ...

  3. Linux 内核:匠心独运之无锁环形队列kfifo

    Linux 内核:匠心独运之无锁环形队列 Kernel version Linux 2.6.12   Author Toney   Email vip_13031075266@163.com   Da ...

  4. Vite详解

    vite 目录 一.推荐两个插件插件 Volar Vue 3 Snippets 二.vite简介 优势分析 浏览器支持 三.vite搭建vue3.x项目 1.创建项目 2.集成Vue-Router 3 ...

  5. SQLSERVER存储过程基础

    SQLSERVER存储过程基础 1.声明变量 DECLARE     @F001  SMALLINT,  (三元素,声明declare+变量名+类型) @F002  INTEGER, @F003  V ...

  6. python循环以及控制语句

    python流程 学习完本篇,你将会通过python完成以下题目 试利用break语句求解2-100之间的素数. (1)素数是指除了能被1和它本身整除外,不能被其它数所整除的数.判断一个自然数是否是素 ...

  7. mysql 选取操作日志(mysql-bin.0000恢复数据)

    my.ini 配置log-bin=mysql-bin 启用日志 用  mysql-bin.0000 mysqlbinlog -d keyboard ../data/mysql-bin.000024 – ...

  8. Kubernetes-Pod介绍(四)-Deployment

    前言 本篇是Kubernetes第七篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kuberne ...

  9. HTML在网页上不能显示图片问题

    我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...

  10. Wannafly挑战赛10F-小H和遗迹【Trie,树状数组】

    正题 题目链接:https://ac.nowcoder.com/acm/contest/72/F 题目大意 \(n\)个字符串,包括小写字母和\(\#\).其中\(\#\)可以替换为任意字符串.求有多 ...