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. 图文并茂-超详解 CS:APP: Lab3-Attack（附带栈帧分析)

    CS:APP:Lab3-ATTACK 0. 环境要求 关于环境已经在lab1里配置过了.lab1的连接如下 实验的下载地址如下 说明文档如下 http://csapp.cs.cmu.edu/3e/at ...

  2. Pytest（6）重复运行用例pytest-repeat

    前言 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来. 自动化运行用例时候,也会出现偶然的bug,可以针对单个用例, ...

  3. Codeforces 1364C - Ehab and Prefix MEXs

    题意:给1e5的数组a 保证 ai <= ai+1  ai<=i  求一个一样长的数组b 使得mex(b1,b2···bi) = ai QAQ:不知道为啥这1600分的题比赛时出不了 啊啊 ...

  4. c++格式化输入输出以及操纵器的使用

    C++格式化输入和输出 1,ios类中定义的格式控制标志 ios类中定义了一个数据成员:格式控制标志字,long x_flags x_flags每一位的状态值用枚举符号常量定义:如下列出常用几个 en ...

  5. 【洛谷 p3371】模板-单源最短路径（图论）

    题目:给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 解法:spfa算法. 1 #include<cstdio> 2 #include<cstdlib> 3 #in ...

  6. Educational Codeforces Round 84 E. Count The Blocks

    传送门: 1327- E. Count The Blocks  题意:给你一个整数n,求10^n内(每个数有前导零)长度为1到n的块分别有多少个.块的含义是连续相同数字的长度. 题解:从n=1开始枚举 ...

  7. Codeforces Round #650 (Div. 3) E. Necklace Assembly (暴力)

    题意:有一个字符串,要求使用其中字符构造一个环(不必全部都用),定义一个环是k美的,如果它转\(k\)次仍是原样,现在给你\(k\),要求最长的k美环的长度. 题解:我们首先看\(k\),如果一个环转 ...

  8. B-number HDU - 3652

    题意: 找出区间[li,ri]有多少个符合要求的数: 1.这个数里面有13 2.这个数可以被13整除 题解: 这个题目和之前的有点不一样就是这个题目要我们求包含13的(之前做过的都是不包含).但是都差 ...

  9. github host

    更改hosts文件,地址:C:\Windows\System32\Drivers\etc 不能直接修改,将其拷贝到桌面,进行修改后,再复制到文件目录下(直接替换) 在hosts文件中添加: # git ...

  10. VS Code 配置 Java IDE

    背景 维护的项目在一个内网环境,只能通过跳转机的FTP上传文件.项目是Java spring boot开发,之前的维护人员使用sts(https://spring.io/tools),使用起来体验极差 ...