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. status http status code 状态码

    RFC 6585 - Additional HTTP Status Codes https://tools.ietf.org/html/rfc6585 https://developer.mozill ...

  2. cookie,session,token傻傻分不清

    什么是认证(Authentication) • 通俗地讲就是验证当前用户的身份,证明"你是你自己"(比如:你每天上下班打卡,都需要通过指纹打卡,当你的指纹和系统里录入的指纹相匹配时 ...

  3. MySQL 高性能优化规范建议

    数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用 MySQL 保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名 ...

  4. 龙芯fedora28日常生存指南

    2021-01-30 v0.0.5 从0.0.1开始改了非常多,一月余时间的花费渴望为其他人提供一点帮助,能够快速上手. 这主要是这一年来我从3B1500到3A4000再到福珑2的日常使用记录,是之前 ...

  5. 某商城系统(V1.3-2020-01-10)前台命令执行漏洞

    漏洞文件: ./inc/module/upload_img.php 先跟进 del_file 函数: 在 del_file 函数中首先执行了unlink操作,然后接着进行了file_exists 判断 ...

  6. centos 7_本地源制作

    1.安装工具 yum install yum-utils createrepo yum-plugin-priorities   2.自己创建一个阿里源 vim /etc/yum.repos.d/ope ...

  7. svn 启动项目报错,项目被lock

    问题描述 问题解决 (一)Eclipse SVN 插件处理 (二)SVN 客户端处理 (三)删除lock文件 问题描述 在使用开发工具开发项目时(如Eclipse),在做项目的中途,有时候Eclips ...

  8. WAMP3.1.3自定义根目录

    1.首先找到httpd.conf 文件,搜索documentroot 修改前:DocumentRoot "${INSTALL_DIR}/www" <Directory &qu ...

  9. python2.7.5 +eric4.4.2+PyQt4-4.10.3

    1.安装python  双击运行就可以了 当安装好了Pyhon,记得要配置环境变量,把C:\Python27添加到PATH中 2.安装pyqt默认安装就可以 3.把eric4.4.2拷贝到C:\目录下 ...

  10. js创建javaMap

    /** * Simple Map * var m = new Map(); * m.put('key','value'); * var v_otherMap = v_m.toMapString();* ...