资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/六种组织CSS的方式

六种组织CSS的方式

warmcheng / 1828人阅读

摘要：意为面向对象的。这种书写代码的风格建议将样式分为几个部分，称为层。这种方法避免了类名的重叠。一些开发者注意到使用这种原则来书写和维护代码是相当方便的在某种程度上，作者拿出了最好的成果，并且以一种简洁的方式展示了这项技术。

Ben Frain曾经说过，写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. 这些是全局元素的样式，比如

的尺寸等。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的属性模块）"。

让我们看一个例子:

Button

这样一个类的链并不简单，所以让我通过属性来组织这些值。

结果如下:

Button

为了避免命名冲突，添加命名空间到属性上是个好主意。然后，我们的按钮就变成了下面的样子：

Button

如果你使用验证器检查代码，会发现并没有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形式：
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建议添加命名空间来指定特殊的模块元素的样式。这种方法避免了类名的重叠。

一些开发者注意到使用这种原则来书写和维护代码是相当方便的；在某种程度上，作者拿出了最好的成果，并且以一种简洁的方式展示了这项技术。

这种方法对项目和代码结构还有不小要求，它只建立记录元素的首选形式和标记使用的方法。但是在小项目中，这些规则足够创建出足够高质量的代码。

总结

正如你所见，这些方法里并没有一个完美的。这些方法中没有一条绝对的规则——你可以从开始使用一套方案来创建你自己的东西， 或者从头开始创建一条新的方法。

服务器托管 云服务器 ps去除水印的六种方法 css引入方式 国际组织的域名 数据仓库的数据组织

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114750.html

相关文章

  • 六种组织CSS的方式

    摘要：意为面向对象的。这种书写代码的风格建议将样式分为几个部分，称为层。这种方法避免了类名的重叠。一些开发者注意到使用这种原则来书写和维护代码是相当方便的在某种程度上，作者拿出了最好的成果，并且以一种简洁的方式展示了这项技术。 Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOCSS showImg(https://segment...

    leeon 评论0 收藏0

  • 六种组织CSS的方式

    摘要：意为面向对象的。这种书写代码的风格建议将样式分为几个部分，称为层。这种方法避免了类名的重叠。一些开发者注意到使用这种原则来书写和维护代码是相当方便的在某种程度上，作者拿出了最好的成果，并且以一种简洁的方式展示了这项技术。 Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOCSS showImg(https://segment...

    raledong 评论0 收藏0

  • Zepto 源码分析 4 - 核心模块入口

    摘要：对象构造函数读入的两个参数与在中也有明确的规范，用以保证构造函数的简单性。 承接第三篇末尾内容，本篇结合官方 API 进入对 Zepto 核心的分析，开始难度会比较大，需要重点理解几个核心对象的关系，方能找到线索。 $() 与 Z 对象创建 Zepto Core API 的首个方法 $() 按照其官方解释： Create a Zepto collection object by pe...

    xzavier 评论0 收藏0

  • 搞定css三栏布局（六种方法）

    摘要：块级元素生成一个矩形框，作为文档流的一部分行内元素则会创建一个或多个行框，置于父级元素中。元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。元素框不再占有文档流位置，并且相对于视窗进行定位。 谈到布局，首先就要想到定位，当别人问我，css的position定位有哪些取值，分别表示什么意思？呃.....抓头.gif，是时候回归本质，看定义了。 1. 定位 1.1 po...

    evin2016 评论0 收藏0

  • ELSE 技术周刊(2017.12.18期)

    摘要：程序人生从黑客到创业，他说技术创业该这么做知道创宇，安全焦点民间白帽黑客组织核心成员，分享他创业感悟和踩过的那些坑。技术周刊由小组出品，汇聚一周好文章，周刊原文。 业界动态 他们写的代码能上天！NASA的10条安全编码准则大公开 NASA的10条代码编写规范准则 本期推荐 Node.js 中遇到含空格 URL 的神奇Bug——小范围深入 HTTP 协议 本文阐述了博主遇到含空格 URL...

    douzifly 评论0 收藏0

发表评论

登陆后可评论

0条评论

warmcheng

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<