六种构造CSS的体式格局

2019年9月1日 127次阅读 来源: 果冻

Ben Frain曾说过，写css代码很轻易，然则扩大和保护却很难。本文就引见了一套计划来处理这个题目。

OOCSS

《六种构造CSS的体式格局》

OOCSS 意为面向对象的CSS。这类要领有两种主要 看法:

  • 构造与设想星散
  • 容器和内容星散

运用这套构造，开辟者能获得能够在差别处所运用的平常类。

在这一步，会存在两点（一般就好和坏）：

  • 好: 经由过程反复应用削减代码量 (DRY准绳)。
  • 坏: 组合运用。当你转变一个特定元素的款式, 你须要转变的很有能够不仅仅是CSS（由于大多是类都是大众的），而且还会增加新的类。

别的，这类OOCSS的要领自身并没有明白的划定规矩，而是笼统的发起，所以这类要领在生产中的效果会有差别。

现实效果就是，这类OOCSS的头脑启发了其他人竖立出属于他们本身更详细的代码构造。

SMACSS

《六种构造CSS的体式格局》

SMACSS 意为可扩大、模块化（Scalable and Modular Architecture）的CSS。这类要领的主要目标是削减代码量，而且使代码保护更简朴。

Jonathan Snook将款式分为了5个部份:

  1. Base rules. 这些是主要的网页元素款式 – body, input, button, ul, ol等。在这部份, 我们主要运用
    HTML标签和属性挑选器, 特别的情况下运用 – 类 (比方， 你有JavaScript的款式挑选);
  2. Layout rules. 这些是全局元素的款式，比方<caption> <footer> <sidebar>的尺寸等。Jonathan发起在这些元素中运用id挑选器，由于这些元素在页面中不会涌现凌驾一次。但是，这篇文章的作者以为这并非好的做法。(在款式文件中，不论id什么时候涌现，都邑在别的的某个处所形成些贫苦).
  3. Modules rules.在单个页面中，块会被屡次运用。关于模块的分类，并不发起运用id和标签挑选器（离别为了反复运用和上下文独立性）。
  4. State rules. 在这一部份，划定了模块的差别状况和网页基本，这是唯一能够运用关键字!Important 的处所。
  5. Theme rules. 设想你能够须要替换的款式。

别的，还发起对属于某个特定分组的类设定定名空间，并为JavaScript中运用的类运用零丁的定名空间。

这类要领使得编写和保护代码都越发轻易，而且吸收了许多开辟者。

Atomic CSS

《六种构造CSS的体式格局》

运用Atomic CSS，为每一个可重用的属性竖立一个零丁的类。比方 margin-top: 1px;就能够竖立一个类 mt-1，width: 200px;能够竖立一个w-200。

这类作风许可经由过程反复声明来尽量削减代码，而且转变模块款式也相对轻易，for example, when changing a technical task.

但是，这类要领也有很大的瑕玷：

  • 类名都是形貌性的属性名，而不是对元素自身的语义化形貌，有时会使得开辟复杂化。
  • 直接在HTML中显现设置。

由于这些瑕玷，这类要领遭到了大批指摘。然则，这类要领关于大型项目而言，照样很有用的。

别的Atomic CSS也被用在差别的框架里来指明改正元素款式，另有一些别的要领的展现层。

MCSS

《六种构造CSS的体式格局》

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

《六种构造CSS的体式格局》

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

《六种构造CSS的体式格局》

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://segmentfault.com/a/1190000019368091
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞