CSS BEM

Block, Element, Modifier

https://en.bem.info/methodology/quick-start/

BEM

/* Block component */

.btn {}

/* Element that depends upon the block */

.btn__price {}

/* Modifier that changes the style of the block */

.btn--orange {}

.btn--big {}

http://getbem.com/naming/

https://en.bem.info/tutorials/

https://github.com/bem/

https://css-tricks.com/bem-101/

https://css-tricks.com/sass-style-guide/

CSS Modules

https://www.cnblogs.com/xgqfrms/p/9139346.html

CSS Architecture

https://sass-guidelin.es/#architecture

https://github.com/ikkou/awesome-css#architecture

http://getbem.com/introduction/

http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/

refs

https://github.com/xgqfrms-GitHub/Sass/tree/master/Tutorial#伪类-hover-伪元素before--after

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS BEM的更多相关文章

  1. CSS BEM 命名规范简介

    [前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...

  2. CSS — BEM 命名规范

    推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...

  3. CSS BEM 命名方式

    简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...

  4. 面试官：说说你对css效率的理解

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 大家的支持是我创作的动力. 选择器的优先级 众所周知,选择器是有权重 ...

  5. 前端规范(ES6BEMOOCSSSMACSS)

    前端规范 在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率. Javascript Javascript规范直接参考airbnb: ES6 ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. CSS命名规范——BEM思想（非常赞的规范）

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  8. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  9. CSS 命名管理 之 BEM

    好吧,将 BEM 简单的解释为 “Block-Element-Modifier“, 其实是个不负责任的做法.鬼知道 Block 是什么啊?所以,看了一些似懂非懂的中文解释之后,自己还是得去找些英文来读 ...

随机推荐

  1. 将连续增长 N 次字符串所需的内存重分配次数从必定 N 次降低为最多 N 次 二进制安全

    SDS 与 C 字符串的区别 - Redis 设计与实现 http://redisbook.com/preview/sds/different_between_sds_and_c_string.htm ...

  2. SpringMVC听课笔记（十：处理JSON: 使用HttpMessageConverter）

    1. 处理JSON 2. 原理 流程图 3. 看个应用吧 -- 上传 ①jsp ②handler -- 下载 ① jsp ② handler

  3. Atlas 2.1.0 实践（4）—— 权限控制

    Atlas的权限控制非常的丰富,本文将进行其支持的各种权限控制的介绍. 在atlas-application.properties配置文件中,可以设置不同权限的开关. atlas.authentica ...

  4. java架构《并发线程基础二》

    1.关键字 volatile            使用场景: 针对与多线程公用的数据  用volatile关键字修饰  但其不保证原子性(同步).volatile关键字不具备synchronized ...

  5. Centos搭建Hive

    Centos搭建Hive 一.Hive简介 二.安装Hive 2.1hive下载 2.2上传解压 2.3配置hive相关的环境变量 三.Mysql 3.1安装mysql connector 3.2 将 ...

  6. Linux 调整系统时间偏差

    在使用Linux系统部署项目,有时会出现时间跟当前时间不一致的情况,这个时候需要做些调整: 1.首先删除之前设置的时区 rm -rf /etc/localtime 2.创建上海时区 ln -s /us ...

  7. Java 复习整理day04

    在我们的日常生活中,方法可以理解为要做某件事情, 而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临 着一件事情(坐车到学校这件事情)需要解决,解决办法 呢?可采用坐公交车或坐出租车的 ...

  8. SSL与HTTPS协议

    1.SSL 1.1 什么是SSL SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及 ...

  9. Dedecms织梦搜索页显示条数的更改方法

    织梦dedecms搜索结果页面的显示条数默认是10条,这个数值在模板当中是不能控制的. 解决方法: 打开根目录下的plus文件夹,找到search.php修改一段代码: 在大概第15行,找到 $ pa ...

  10. Flink-v1.12官方网站翻译-P011-Concepts-Overview

    概念-概览 实践培训解释了作为Flink的API基础的有状态和及时流处理的基本概念,并提供了这些机制如何在应用中使用的例子.有状态的流处理是在数据管道和ETL的背景下介绍的,并在容错部分进一步发展.在 ...