一、CSS 各属性书写顺序
不知道谁提出的,但是使用感觉还不错:
- 位置相关 (position, top, right, z-index, display, float等)
- 盒子相关 (width, height, padding, margin)
- 文字相关 (font, line-height, letter-spacing, color- text-align等)
- 背景相关 (background, border等)
- 其他 (animation, transition等)
二、CSS 类命名规范
2.1 BEM
2.1.1 理解
这是我在谷歌开发者上看见的,也是他们所推崇的命名方式。BEM的命名方式,有助于渲染引擎的优化,因为 BEM 不推荐元素选择器的使用,而元素选择器通常会非常浪费性能(子代选择器更甚,涉及到 CSS 树构建过程,有兴趣的看我写的这篇文章:浏览器渲染机制)。
以下节选自一个俄罗斯的前端妹子的文章:
BEM代表块(block)、元素(element)、修饰符(modifier)。它是一种前端方法论:一种开发 Web 界面时的新思维方式。本文将详细阐述在 Yandex(俄罗斯领先的互联网公司之一)建立网站的理论和实践。
文章详细阐述了如何使用BEM规范,这里我简单的说一下我的理解:
- 块(block),可以是你网站某个独立的部分(header、footer、main、aside),一种大而独立的部分。实际上,我们编写代码的所谓组件也是满足这个属性的,编写通用组件也可以使用这个规范。
- 元素(element),构成独立部分的子模块,假设我们编写header,那么它的logo可以是一个子模块,导航nav可以是一个子模块,以此类推。
- 修饰词(modifier),是对块或者元素的外观或者行为描述,比如导航nav,有激活或者未激活两种状态,就可以对其进行修饰
2.1.2 使用例子
注意,BEM 只是一种方法论,了解其精髓即可。你要是在网络上找 BEM 的文章,可能会发现 BEM 的解释都正确,但是真正的示例都是各不相同的符号。
你可能以为 BEM 是一种标准,符号也是唯一的,其实这是错的。(好吧,这就是俺的心路历程,隔了几个月再看其他人的关于 BEM 的文章发现的)
这里我采用 BEM 的思想,随便写个示例,注意这由团队定义,定义了都必须遵守:
CSS 类名词书写规范定义:
- 第一个出现的单词必须是
块
,在它的后面后面接双下划线__
- 在第一个单词后,出现的
块
或者元素
(注意到这里我说的,块和元素他们并不是唯一的,可以同时出现多个,看你自己的使用情况)相互之间使用一个下划线_
- 修饰符放最后,使用两个中连结符
--
<body>
<header class="header">
<div class="header__logo"></div>
<ul class="header__nav">
<li class="header__nav_item">导航1</li>
<li class="header__nav_item header__nav_item--active">导航2</li>
<li class="header__nav_item">导航3</li>
</ul>
</header>
</body>
可以看到结构很清晰,可是有点冗长。IE6以下貌似不支持下划线,这里注意!(可恶的IE浏览器,不过还好,现在其使用率很低了,而且2022年微软将完全抛弃IE了)
2.2 改进的BEM
再次声明,BEM 只是一种方法论,一种阐述。只要得到块
、元素
、修饰符
这三个的精神就可以了,什么符号标记其实不重要。
团队可以依据自己的实际有选择的自己定义适合团队的 BEM 规范。
下面是几个改进的 BEM 例子:
Instagram团队使用的驼峰式:
.blockName-elementName--modifierName {
/*
关于驼峰的问题,CSS选择器 对 id、类的大小写敏感,而对标签不敏感
*/
}
块
后接单下划线:
.block-name_element-name--modifierName { /* ... */ }
修饰符
用单个连接符:
.blockName__elementName-modifierName { /* ... */ }
2.3 其他css前端方法论
- OOCSS,面向对象的CSS,使用CSS“对象”分隔容器和内容
- SMACSS,样式指南,用于为CSS规则编写五个类别的CSS
- SUITCSS,结构化类名和有意义的连字符
- Atomic,将风格分解为原子或不可分割的碎片
我厚着脸皮讲讲自己的CSS书写见解,根据 sass 或者 less 这些 CSS 预处理语言的出现,让 CSS 的局部封装为组件成为可能。
根据 BEM ,大可不必将 CSS 类书写的这么长,会让我们前端开发写的手累。
比如上述我的例子,在 sass 中可以采用 BEM 思想,名字使用驼峰或者连接符就可以,比如这个:
.header{ /* 块 */
.__logo{ /* 类 */
}
.__nav{
.__item{
._active{ /* 修饰 */
}
}
}
}