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. java的几种对象（PO,VO,DAO,BO,POJO）

    一.PO persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  2. docker基本使用-安装

    一. Linux服务器安装 1. 可参考官网安装步骤,点击前往官网 2. 常见问题 a. 在执行安装docker-ce命令的时候出错:requires containerd.io >= 1.2. ...

  3. Language Guide (proto3) | proto3 语言指南（二）标量值类型

    标量值类型 标量消息字段可以具有以下类型之一 -- 下表显示了.proto文件中指定的类型,以及自动生成的类中相应的类型: .proto Type 说明 C++ Type Java Type Pyth ...

  4. nginx及其常用实践方案

    nginx及其常用实践方案 1.概述 1.1 什么是nginx? 1.2 什么是反向代理? 2.nginx常用命令 3.ningx配置实践 3.1 nginx.conf基础配置项 3.2 http 反 ...

  5. TCP/IP__IP寻址及ARP解析

    ARP解析过程中MAC地址以及IP地址的变化情况 1.两主机要通信传送数据时,就要把应用数据封装成IP包,然后再交给下一层数据链路层继续封装成帧:之后根据MAC地址才能把数据从一台主机,准确无误的传送 ...

  6. 天天写同步，5种SpringMvc异步请求了解下！

    引言 说到异步大家肯定首先会先想到同步.我们先来看看什么是同步? 所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 简单来说,同步就是必须一件一件事做,等前一件 ...

  7. WPF 之 MultiBinding（多路 Binding）（四）

    一.前言 ​ 有时候 UI 需要显示的信息由不止一个数据来源决定,这时候就需要使用 MultiBinding ,即多路 Binding. ​ MultiBinding 与 Binding 一样均以 B ...

  8. jQuery插件Validate

    一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2 ...

  9. getline()的使用注意

    在使用getline读入一整行时,若是前面是使用getchar().cin这类读入了一个字母,但是不会读入后续换行\n符号或者空格的输入时,再接getline()就容易出现问题. 这是因为输入数字之后 ...

  10. 2019牛客暑期多校训练营（第七场）H.Pair（数位dp）

    题意:给你三个数A,B,C 现在要你找到满足  A and B >C 或者 A 异或 B < C 的对数. 思路:我们可以走对立面 把既满足 A and B <= C 也满足 A 异 ...