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. MDX学习笔记（整理） MDX语法

    1.1.members和Children的用法. select [Measures].[Internet Sales Count] on columns, [客户].[全名] on rows from ...

  2. 性能优化（CSS优化）

    高质量的CSS代码体现在三个方面:可读性和可维护性和高性能.对于"前端工程师"来说如何平衡"追求高性能"和"可维护性"是很值得思考的问题. ...

  3. Lambda 表达式 学习

    最近几天在学习Lambda,给我的理解就是一个匿名函数的升级版,代码极大可能的简洁了很多,不需要像以前一样必须使用众多的代码才能实现相关功能. 慢慢积累学习,将Java 8的相关知识进行一个学习. 用 ...

  4. TCP IP SOCKET 笔记

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...

  5. ceph ---（ceph简介）

    ceph简介: Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展.在国内一些公司的云环境中 ...

  6. 37.Samba 文件共享服务1--配置共享资源

    1.Samba 服务程序的主配置文件包括全局配置参数和区域配置参数.全局配置参数用于设置整体的资源共享环境,对里面的每一个独立的共享资源都有效.区域配置参数则用于设置单独的共享资源,且仅对该资源有效. ...

  7. 数理统计5：指数分布的参数估计，Gamma分布，Gamma分布与其他分布的联系

    今天的主角是指数分布,由此导出\(\Gamma\)分布,同样,读者应尝试一边阅读,一边独立推导出本文的结论.由于本系列为我独自完成的,缺少审阅,如果有任何错误,欢迎在评论区中指出,谢谢! 目录 Par ...

  8. go-zero解读与最佳实践（上）

    本文有『Go开源说』第三期 go-zero 直播内容修改整理而成,视频内容较长,拆分成上下篇,本文内容有所删减和重构. 大家好,很高兴来到"GO开源说" 跟大家分享开源项目背后的一 ...

  9. XV6学习（11）Lab thread: Multithreading

    代码放在github上. 这一次实验感觉挺简单的,特别是后面两个小实验.主要就是对多线程和锁进行一个学习. Uthread: switching between threads 这一个实验是要实现一个 ...

  10. 加快你ROS安装的一篇文章

    前言: 首先ROS大家应该比较熟悉了哈,如果需要补充一下请看我之前的这篇文章 <嵌入式的我们为什么要学ROS>,对于嵌入式来说ROS是一个很好的进阶方向,所以如何快速的安装一个ROS到我们 ...