六种组织CSS的方式

更新日期: 2019-06-03阅读: 2.1k标签: css

Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。


OOCSS


OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:

  • 结构与设计分离
  • 容器和内容分离

使用这套结构,开发者能得到可以在不同地方使用的一般类。

在这一步,会存在两点(通常就好和坏):

  • 好: 通过重复利用减少代码量 (DRY原则)。
  • 坏: 组合使用。当你改变一个特定元素的样式, 你需要改变的很有可能不仅仅是CSS(因为大多是类都是公共的),而且还会添加新的类。

此外,这种OOCSS的方法本身并没有明确的规则,而是抽象的建议,所以这种方法在生产中的结果会有不同。

实际结果就是,这种OOCSS的思想启发了其他人创建出属于他们自己更具体的代码结构。


SMACSS


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


使用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建议添加命名空间来指定特殊的模块元素的样式。这种方法避免了类名的重叠。

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

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


总结

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


译者:@池盛星,译文:https://zhuanlan.zhihu.com/p/28085207
作者:@ Inessa Brown,原文:https://css-tricks.com/methods-organize-css/


链接: https://www.fly63.com/article/detial/3522

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

如何编写轻量级 CSS 框架

我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!