一、什么是 CSS methodologies
CSS methodologies
,可以理解成 设计模式,也可以理解成 css 规范,市面使用情况如下图:
上图来源:https://2019.stateofcss.com/technologies/
你可能在日常开发中并不会专门花时间去注意和了解 CSS methodologies,但随着你经验的积累,你可能会自己思考,或者阅读别人的代码、参考网上成熟的框架,这里面都或多或少的蕴含了一些 css methodologies 的闪光点。而下面要介绍的几种主流的 css methodologies,则可以帮你做到很好的总结和梳理。
二、常见的 CSS methodologies
1、OOCSS
面向对象的 CSS
(Object-Oriented CSS,简称 OOCSS
),由 Nicole Sullivan 于 2008 年提出,这基于她在雅虎的工作。
(1)规则
1、不要使用 ID 用 Class
直接使用class来设定样式,这样写不只是可以增加语义,同時也降低css对html的依赖。
2、结构和样式分离
虽然早期 html 和 css 实现了结构和样式的分离,但 css 内部同样存在两种类型的样式:
- 结构样式(例如长宽、距离)
- 皮肤样式(例如颜色、阴影)
所以 OOCSS 建议把这两种样式拆开。
比如有三种按钮,白色的/绿色的/红色的,可分别定义为:
class="btn btn-default" class="btn btn-green" class="btn btn-red"
如果你真的有很多个具有紫色按钮,则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。
3、容器和内容分离
内容绝不应该限制于特定的容器,为了重用,得分离开。
# 错误写法 .header .action { } .header .action .login { } .header .action .register { } # 正确写法 .header{ } .action{ } .login { } .register { }
继承选择符是有用的,它可以减少因相同命名引发的样式冲突(常发生于多人协作开发)。但是,我们不应过度使用。
(2)利弊
好处:
- 模块化,可重用
- 减少代码重复
- 提高可拓展性、可维护性、可读性
缺点:
- 虽减少了深层的嵌套选择器,但是多了更多的类
- 如果代码中没有大量重复的视觉模式,比如一些小项目,则应用OOCSS可能不切实际
(3)实例
Bootstrap 就是用的 OOCSS。
例如:
html
<div class='header'> <ul class='menu'> <li class='menu-item active'>1</li> <li class='menu-item'>2</li> <li class='menu-item'>3</li> </ul> <div class="action"> <button class="btn btn-login">login</button> <button class="btn btn-register">register</button> </div> </div>
css:
.header { } .menu { } .menu-item { } .item.active { } .action { } .btn { } .btn-login { } .btn-register{ }
2、BEM
BEM
- Block Element Modfier(块元素编辑器)。诞生于2009年。
(1)内容
BEM 包括三个:
Block
- 块,如 headerElement
- 子元素,如 块menu 下的 itemModfier
- 状态,如.current、.active
(2)规则
1、命名规范
-
中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。__
双下划线:用来连接块和块的子元素。--
双中划线:用来描述一个块或者块的子元素的一种状态。
在某些公司(如腾讯)的规范里,双中划线被单下划线(_
)替代。
例如:.block-name__element--modifier
demo - html:
<div class='header'> <ul class='header__menu'> <li class='header__menu-item--active'>1</li> <li class='header__menu-item'>2</li> <li class='header__menu-item'>3</li> </ul> <div class="header__action"> <button class="header__btn--login">login</button> <button class="header__btn--register">register</button> </div> </div>
demo - less:
.header { &__menu {} &__menu-item {} &__action {} &__btn { &--login {} &--register {} } }
2、避免嵌套
BEM 最多只有 B+E+M 三级。
所以请避免 .block__el1__el2
的格式,直接改为 .block_el2
。
这里的 block 就很像命名空间了。
(3)利弊
好处:
- 层级关系一目了然,具有可读性
- 不需要依靠层级选择器来限定约束作用域,可避免跨组件的样式污染。
缺点:
- 命名方式长而难看,书写不便(可以通过 less/sass 来简化书写)
- 在较小的组件中,BEM 格式可能显得鸡肋。但对于公共的、全局性的模块样式定义,还是推荐使用 BEM 格式。(尤其对外发布的公共组件)
其他:
BEM 命名会使得 Class 类名变长,但经过 gzip 压缩后这个带宽开销可以忽略不计。
BEM是不允许用标签选择器的,哪怕最简单的 li 也得写成 .menu-item。
(4)实践
饿了么的框架elementUI就是BEM的一种,或者你也可以研究网站company.yandex.ru/。
3、SMACSS
SMACSS
(Scalable & Modular Architecture CSS ,即 CSS 的可扩展性和模块化架构)。Jonathan Snook 于 2011 年提出,当时他在雅虎工作,为 Yahoo Mail 编写 CSS。
(1)规则
1、Categorizing CSS Rules(CSS 分类规则)
它将 CSS 分为5个不同的类别:
Base
基本规范
例如 CSS Reset 和 CSS Normalize。
Layout
布局规范
例如左右分栏、栅格系统。
Module
模块
例如一个产品列表,一个导航条。可重用。
State
状态规范
例如选中状态。
Theme
样式规范
2、Naming Rules(命名规则)
为类名添加前缀
:
Base 不需要前缀。而且是用标签而不是 class 和 ID。
l-
用作 Layout 的前缀:l-inline
m-
用作 Module 的前缀:m-callout
。但也可以不用前缀。is-
用作 State 的前缀:is-collapsed
- Theme 一般会新建个 theme.css,用之前存在的类名。如果想用单独的类名,可用
theme-
前缀。
例子:
<div class="l-box m-profile m-profile--is-pro-user"> <img class="m-avatar m-profile__image" /> <p class="m-profile__bio">...</p> </div>
(2)实例
在线 demo:https://codepen.io/savemuse/pen/gWVpvd
4、 Atomic CSS
Atomic CSS
也是雅虎提出的,可以从字面意思理解成原子 CSS
。
(1)示例
<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />
会有专门的 Atomic css 工具,帮助将上面 html 中的 class name 解析成正常的 css。(略)
(2)利弊
好处:将 CSS style 最小元件化,重用性最大化。
坏处:这根本就是在写 inline-style,只是我们用 class name 的方式來表示而已。
(3)总结
这种做法真的很激进。我暂时无法接受。
三、总结
抛开激进的Atomic,我对剩下的 OOCSS / BEM / SMACSS 有如下建议:
他们各自的思想有互补也有冲突,在实际开发中可以有取舍的使用
他们都可以结合 CSS 预处理器(如 less/sass )获得更好的效率
把上文分别介绍他们的好处列举在一起对比汇总,发现他们解决的核心问题就是:模块化
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]