css命名规范: BEM 的命名法
整理自:前端早读课【第1183期】这些 CSS 命名规范,将省下你大把调试时间
试图解决 3 类问题:
仅从名字就能知道一个 CSS 选择器具体做什么
从名字能大致清楚一个选择器可以在哪里使用
从 CSS 类的名称可以看出它们之间的联系
不知你是否见过这样的类名:
.nav--secondary {
...
}
.nav__header {
...
}
这就是 BEM 命名规范。
这个火柴人代表了一个组件,比如说一个设计区块。
BEM 这里的 B 意为『区块』('Block')。
在实际中,这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。
根据上述解释,那么这个组件的理想类名称即是 stick-man。
组件的样式应写成这样:
.stick-man {
}
css命名规范: BEM 的命名法的更多相关文章
- CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...
- 前端css命名规范----BEM
一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...
- css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
- CSS 命名规范 BEM 思想
Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出 处:是由 Yandex 团队提出的一种前端命名方法论 优 点:命 ...
- CSS命名规范 BEM
良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...
- CSS BEM 命名规范简介
[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...
- CSS — BEM 命名规范
推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...
- 通用CSS命名规范
一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...
- java开发命名规范总结
一 包名的书写规范 (Package)推荐使用公司或机构的顶级域名为包名的前缀,目的是保证各公司/机构内所使用的包名的唯一性.包名全部为小写字母,且具有实际的区分意义. 1.1 一般要求1.选择有意义 ...
- 浅谈Android编码规范及命名规范
前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...
随机推荐
- 浅谈教你如何掌握Linux系统
linux能做什么?相信绝大数人都有这样的疑问.可以玩吃鸡吗?可以玩lol吗? 如果你是以娱乐的名义来评价linux的可用性,对不起,linux可能不适合你,因为linux是一个工具,他是教你聪明的, ...
- linux 内核参数优化----最大线程数限制及当前线程数查询
1.总结系统限制有: /proc/sys/kernel/pid_max #查系统支持的最大线程数,一般会很大,相当于理论值 /proc/sys/kernel/thread-max max_user_p ...
- BZOJ1791[Ioi2008]Island 岛屿 ——基环森林直径和+单调队列优化DP+树形DP
题目描述 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时,每一对这样的岛屿,都有一 ...
- LightOJ 1030 【概率DP求期望】
借鉴自:https://www.cnblogs.com/keyboarder-zsq/p/6216762.html 题意:n个格子,每个格子有一个值.从1开始,每次扔6个面的骰子,扔出几点就往前几步, ...
- 05 Zabbix triggers--action--event
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 05 Zabbix triggers--action--event 动作action: 在配置好监 ...
- Luogu 4294 [WC2008]游览计划 | 斯坦纳树
题目链接 Luogu 4294 (我做这道题的时候BZOJ全站的SPJ都炸了 提交秒WA 幸好有洛谷) 题解 这道题是[斯坦纳树]的经典例题.斯坦纳树是这样一类问题:带边权无向图上有几个(一般约10个 ...
- 洛谷 P4148 简单题 解题报告
P4148 简单题 题意 维护单点加与矩形求和,强制在线 说明 \(n\le 500000,m\le 200000\),\(4000ms / 20MB\) kd-tree 复杂度我不懂 是一颗平衡树, ...
- P1339 热浪 最短路径模板题
这么naive的题面一看就是最短路模板题~~~ ok.首先是floyd算法,tts,记得把k放在最外面就行了. #include <cstdio> #include <cstring ...
- Java设计模拟菜单
/***** * 设计一个模拟使用菜单的dos应用程序,用户可进行选择,选择错误时重新选择. * @author yanlong * 2017/5/5 */package java3;import j ...
- django分页功能
采用django自带的Paginator功能 from django.core.paginator import Paginator food = foodInfo.objects.filter(fo ...