组织CSS的六种方法

时间：2023-04-02 22:14:18 HTML

BenFrain曾经说过，编写CSS代码很容易，但扩展和维护它却很难。本文介绍了一套方案来解决这个问题。OOCSSOOCSSS代表面向对象的CSS。这种方法有两个主要观点：结构和设计分离容器分离和内容分离使用这种结构，开发人员可以获得可以在不同地方使用的通用类。在这一步，会有两点（通常是好的和坏的）：好：通过复用减少代码量（DRY原则）。不好：结合使用。当您更改特定元素的样式时，您很可能不仅需要更改CSS（因为大多数类都是公共的），而且还需要添加新类。另外，这种OOCSS方法本身并没有明确的规则，而是抽象的建议，因此这种方法在生产中的结果会有所不同。最终效果是OOCSS的这种想法启发了其他人创建他们自己的更具体的代码结构。SMACSSSMACSS的意思是可扩展的、模块化的（ScalableandModularArchitecture）CSS。这种做法的主要目的是减少代码量，使代码维护更容易。JonathanSnook将样式分为5个部分：基本规则。这些是主要的网页元素样式——body、input、button、ul、ol等。在这部分，我们主要使用HTML标签和属性选择器，特殊情况使用——类（比如你有JavaScript样式选择）；布局规则。这些是全局元素的样式，例如

这样一连串的类并不简单，那我就按属性来组织一下值吧。结果如下：Button

为避免命名冲突，最好为属性添加命名空间。那么，我们的按钮就变成了这样：Button

如果用验证器检查代码，会发现没有am-button属性，所以可以使用它在Prependdata-到属性名称中。使用一个鲜为人知的选择器“~=”（IE7+）作为类属性：该选择器选择属性值包含指定单词的元素，以空格分隔。因此，这个class~="link"选择器类似于a.class.button的选择器。即使专门使用，因为类选择器只是那个属性选择器的一个特例。因此，CSS代码.button{...}.button--large{...}.button--blue{...}翻译成[am-button]{...}[am-button~="large"]{...}[am-button~="blue"]{...}如果你认为这样的代码不常见，你也可以使用不太激进的AMCSS形式：