对于开发者来说, 已经有很多工具和可用的技巧来帮助我们来管理组织 CSS, 比如预处理器和后处理器, 命名约定, 架构等, 本文就来为大家介绍几种组织 CSS 的方法.
OOCSS
OOCSS 意为面向对象的 CSS. 这种方法有两种主要 观点:
结构与设计分离
容器和内容分离
使用这套结构, 开发者能得到可以在不同地方使用的一般类.
在这一步, 会存在两点(通常就好和坏):
好: 通过重复利用减少代码量(DRY 原则).
坏: 组合使用. 当你改变一个特定元素的样式, 你需要改变的很有可能不仅仅是 CSS(因为大多是类都是公共的), 而且还会添加新的类.
此外, 这种 OOCSS 的方法本身并没有明确的规则, 而是抽象的建议, 所以这种方法在生产中的结果会有不同.
实际结果就是, 这种 OOCSS 的思想启发了其他人创建出属于他们自己更具体的代码结构.
SMACSS
SMACSS 意为可扩展, 模块化 (Scalable and Modular Architecture) 的 CSS. 这种方法的主要目的是减少代码量, 并且使代码维护更简单.
Jonathan Snook 将样式分为了 5 个部分:
Base rules. 这些是主要的网页元素样式 - body, input, button, ul, ol 等. 在这部分, 我们主要使用
html 标签和属性选择器, 特殊的情况下使用 - 类 (例如, 你有 JavaScript 的样式选择);
Layout rules. 这些是全局元素的样式, 比如 < caption> <footer> <sidebar > 的尺寸等. Jonathan 建议在这些元素中使用 id 选择器, 因为这些元素在页面中不会出现超过一次. 然而, 这篇文章的作者认为这并不是好的做法.(在样式文件中, 不管 id 什么时候出现, 都会在其它的某个地方造成些麻烦).
Modules rules. 在单个页面中, 块会被多次使用. 对于模块的分类, 并不建议使用 id 和标签选择器(分别为了重复使用和上下文独立性).
State rules. 在这一部分, 规定了模块的不同状态和网页基础, 这是唯一可以使用关键字! Important 的地方.
Theme rules. 设计你可能需要更换的样式.
另外, 还建议对属于某个特定分组的类设定命名空间, 并为 JavaScript 中使用的类使用单独的命名空间.
这种方法使得编写和维护代码都更加容易, 并且吸引了很多开发者.
Atomic CSS
使用 Atomic CSS, 为每一个可重用的属性创建一个单独的类. 比如 margin-top: 1px; 就可以创建一个类 mt-1,width: 200px; 可以创建一个 w-200.
这种风格允许通过重复声明来尽可能减少代码, 并且改变模块样式也相对容易, for example, when changing a technical task.
然而, 这种方法也有很大的缺点:
类名都是描述性的属性名, 而不是对元素本身的语义化描述, 有时会使得开发复杂化.
直接在 HTML 中显示设置.
因为这些缺点, 这种方法遭到了大量批评. 但是, 这种方法对于大型项目而言, 还是很有效的.
此外 Atomic CSS 也被用在不同的框架里来指明矫正元素样式, 还有一些其它方法的展现层.
MCSS
MCSS 是多层 CSS. 这种书写代码的风格建议将样式分为几个部分, 称为层(layers).
底层(Zero layer or foundation). 这层代码负责重置浏览器样式(比如 reset.CSS 和
normalize.CSS);
基础层 (Base layer) 包含网站重复使用的元素的样式: 按钮, 文本输入框等.
项目层 (Project layer) 包含单独的模块和一个 "上下文"-- 根据客户端浏览器, 查看站点 / 应用程序的设备, 用户角色等对元素的修改.
修饰层 (Cosmetic layer) 代码是 OOCSS 的风格, 对元素的外观做一些小的修改. 建议只保留影响元素外观, 但不会破坏网站布局的样式(比如颜色和不重要的缩进).
层级之间的交互层次是很重要的:
基础层 (base layer) 定义中性样式, 不影响其他层.
基础层 (base layer) 的元素只会影响本层的类.
项目层 (project layer) 的元素能影响基础层和项目层.
修饰层 (cosmetic layer) 是以描述性 OOCSS 类 ("atomic" 类) 的形式设计的, 并且不会影响其他的 CSS 代码, 可选择性的用于标记当中.
AMCSS
AMCSS 就是 "Attribute Modules for CSS(css 的属性模块)".
让我们看一个例子:
<div class="button button--large button--blue">Button</div>
这样一个类的链并不简单, 所以让我通过属性来组织这些值.
结果如下:
<div button="large blue">Button</div>
为了避免命名冲突, 添加命名空间到属性上是个好主意. 然后, 我们的按钮就变成了下面的样子:
<div am-button="large blue">Button</div>
如果你使用验证器检查代码, 会发现并没有 am-button 这个属性, 所以可以在属性名称前加上 data-.
使用一个鲜为人知, 作为 class 属性的选择器 "~ =" (IE7+): 该选择器选择属性值包含指定单词的元素, 用空格分隔. 所以, 这种 class~="link" 的选择器类似于 a.class.button 这样的选择器. 即使专门使用, 因为 class 选择器也只是该属性选择器的特殊情况.
因此, CSS 代码
- .button {
- ...
- }
- .button--large {
- ...
- }
- .button--blue {
- ...
- }
转换为
- [am-button] {
- ...
- }
- [am-button~="large"] {
- ...
- }
- [am-button~="blue"] {
- ...
- }
如果你觉得这样的代码不常见, 也可以使用不那么激进的 AMCSS 形式:
- <div am-button am-button-large am-button-blue>
- </div>
- FUN
FUN 表示选择器的扁平结构(Flat hierarchy of selectors), 功能样式(Utility styles), 命名分割组件(Name-spaced components).
每个字母后面都有特定的原则:
F, flat hierarchy of selectors: 建议使用类来选择元素, 避免无用的串联, 并且不使用 id.
U, utility styles: 鼓励创建 atomic 风格的服务来解决典型的拼凑任务, 比如 w100 表示 width:100%;,fr 表示 float: right;
N, name-spaced components: Ben 建议添加命名空间来指定特殊的模块元素的样式. 这种方法避免了类名的重叠.
一些开发者注意到使用这种原则来书写和维护代码是相当方便的; 在某种程度上, 作者拿出了最好的成果, 并且以一种简洁的方式展示了这项技术.
这种方法对项目和代码结构还有不小要求, 它只建立记录元素的首选形式和标记使用的方法. 但是在小项目中, 这些规则足够创建出足够高质量的代码.
推荐: CSS 参考手册 https://www.html.cn/book/css/
来源: http://www.css88.com/web/css/17978.html