主题
CSS 设计模式
提示
学好 CSS 设计模式后,并灵活搭配起来,可以让网页布局更加得心应手!😎
OOCSS
采用面向对象的思想来编写 CSS 代码,使页面结构更加清晰。
- 容器与内容分离
- 结构(基础对象)与皮肤分离
- 面向设计开发
BEM
BEM 是 CSS 一种命名规范,编写起来可以理解为“进阶版OOCSS”,使页面结构更加清晰。
BEM:
- 块(Block)
- 元素(Element
__
) - 修饰符(Modifier
--
)
SMACSS
SMACSS 提供一种分类的思想。分类思想使 CSS 代码更易于扩展与维护。 推荐 5 种分类,但不限制于5种,如下:
- Base:浏览器基础样式重置与元素定制化,如:reset.css、normalize.css …… a、input ……
- Layout(l-header):整体布局样式
- Modules:整个网站可复用模块的样式
- State(.is-hidden):管理模块不同状态的样式
- Theme(.theme-nav):整个网站的多个皮肤样式
ITCSS
ITCSS 提供一种分层的思想,下一层 永远继承 上一层,即层级越低,权重越高。分层思想使 CSS 代码更易于扩展与维护。 推荐 7 层,但不限制于 7 层,如下:
- Settings:整个网站的样式变量
- Tools:维护样式的类似于工具的样式,如:文字省略、清除浮动 ……
- Generic:浏览器默认样式重置
- Base:默认元素样式定制化,如:a、input ……
- Object:组件样式开发
- Components:组件样式开发
- Trumps:最高权重的样式代码
ACSS
acss 最佳实践示例:https://tailwindcss.com/docs/aspect-ratio
一个样式属性一个类,使代码具有极强的维护性和复用性,但带来的代价就是破坏了 CSS 的命名语义化(违背 BEM)。
html
<style>
.fl { float: left; }
.fr { float: right; }
.m20 { margin: 20px; }
</style>
<!-- 破坏 class的语义化 -->
<div class="box fl m20">
<img class="box__img fr"></img>
</div>
解决方案一:采用属性选择器
html
<style>
[fl] { float: left; }
[fr] { float: right; }
[m20] { margin: 20px; }
</style>
<div class="box" fl m20>
<img class="box__img" fr></img>
</div>
小结
- SMACSS 与 ITCSS 及其相似,核心思想都是将 CSS 文件进行分类 维护。所以在实际项目中,只要将其分类思想参透在项目中即可。
- ACSS 与 ITCSS 中的“Settings”层非常类似! a. ACSS 更灵活,随时用于任意 HTML 标签。 b. 而 ITCSS 中的“Settings”层,只适用于变量。