CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值，看起来似乎需要做的工作也就这样嘛！然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情，你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。

    为了解决CSS错综复杂的继承问题，开发者建立了各种不同的最佳实践，问题是哪一个最佳实践是最好的目前尚无定论，而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS，这对于你来说是相当迷惑的。我们在设计例如按钮等控件的时候，会遇到这样的设计：只有内侧有圆角，而边框或者描边的四个角还是保持直角的形状，用以下代码可以轻松的实现。#wrapper { width: 200px; height: 80px; padding: 10px; background: rgb(255, 187, 51); #content { display: flex; justify-content: center; align-items: center; height: 100%; background: rgb(85, 136, 187); color: #fff; font-size: 14px; border-radius: 20px; }}。

    CSS 实例，一个HTML文档可以显示不同的样式: 查看CSS是如何工作的，样式解决了一个很大的问题，HTML 标签原本被设计为用于定义文档内容，如下实例：<h1>这是一个标题</h1>，<p>这是一个段落.</p>，样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

   为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。当代浏览器都支持 CSS .CSS 样式表极大地提高了工作效率，样式表定义如何显示 HTML 元素，样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

    CSS预处理器和CSS后处理器让CSS开发体验有了巨大的提升，但是单靠这些工具还不足以解决维护大型项目CSS代码的问题。为了解决这个问题，人们编写了一些关于如何写CSS的指导方针，通常被称为CSS规范。

   在我们深入分析CSS规范前，首先要搞清楚是什么让CSS随着时间推移变得更加难维护，关键点是CSS是全局性的——你定义的每个样式都会全局应用到页面的每个部分，用一个命名约定来保证class名称的唯一性或者有特殊的规则来决定指定样式应用到指定元素。CSS规范提供了一个有组织性的方式来避免大量代码时出现的这些问题，让我们按照时间顺序来看看主流的一些规范吧。

    OOCSS（面向对象的CSS）是在2009年首次提出的，它是围绕两个原则建立的规范。第一个原则是结构和样式分离，这意味着定义结构（布局）的CSS不应该和定义样式（颜色、字体等）的CSS混杂在一起，这样我们就可以很简单的为一个应用定义新的皮肤了；第二个原则是容器和内容分离，把元素看成是一个可重用的对象，关键核心点是一个对象不管用在页面的任何位置都应该看起来是相同的。

   OOCSS提供了成熟的指导规范，但是对于具体的执行规范并没有明确指出。后来出现的SMACSS采用了它的核心概念，并且添加了更多的细节，使用起来更简单了。