20 世纪 90 年代蒂姆·伯纳斯·李（Tim Berners-Lee）发明万维网，创造 HTML 超文本标记语言。此后网页样式便以各种形式存在，不同的浏览器有自己的样式语言来控制页面的效果，因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。
在HTML迅猛发展的 90 年代，不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中，由于只含有很少的显示属性，所以用户可以自己决定显示页面的方式。
但随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护代码很艰难，因为代码很混乱：
早期 CSS 的语法设计看上去类似后来的 JavaScript 语法（当时 JavaScript 尚未存在），实际上，CSS 的这个写法借鉴了 X11 Window System 中的 X 资源。
早期CSS语法提案 在第一稿建议中，有一个影响百分比的说明符：h1.font.size = 20pt 80%。
行尾百分比的作用是想要通过这个百分比来控制该值的权重，如字号设置为 20pt，权重设置 80%，最终将字号值与权重组合在一起，值为 16pt。
这个写法的设计初衷是想将开发者与用户的要求与偏好组合到一起，CSS 之父哈肯·维姆·莱（Håkon Wium Lie） 提议 CSS 应该有一把滑尺，这样开发者与用户都有完全的控制力。当时这个提议引起了大家的讨论，但由于这个办法对如 font-size 等属性管用，但对另一些属性如 font-family 就不好用了，所以最终这个百分比的用法还是被舍弃了。
至于 CSS 的语法由 font.size 改成font-size，是怎么设计来的呢？首先，连字符读起来更像书面英语，简单易懂。其次，DSSSL（Document Style Semanticsand Specification Language，文档样式语义和规范语言） 和 DSSSL-Lite就使用这种连字符属性名。于是，CSS 也从中借鉴了连字符。
经过多年的努力 ，到1996年底，最终CSS语法变成了现在这个样子：
1994 年，Håkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。
紧接着，他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议，1995 年他们一起再次展示了这个建议。当时 W3C 刚刚建立，W3C 对 CSS 很感兴趣，为此专门组织了一次讨论会。
1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
1997 年，W3C 颁布 CSS1.0 版本 ，CSS1.0 较全面地规定了文档的显示样式，可分为选择器、样式属性、伪类 / 对象几个部分。
这一规范立即引起了各方的关注，随即微软和网景公司的浏览器均能支持 CSS1.0，这为 CSS 的发展奠定了基础。
1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。
CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。
2005 年 12 月，W3C 开始 CSS3 标准的制定，到目前为止该标准还没有最终定稿。
CSS 预处理器和 CSS 后处理器让 CSS 开发体验有了巨大的提升，但是单靠这些工具还不足以解决维护大型项目 CSS 代码的问题。为了解决这个问题，人们编写了一些关于如何写CSS的指导方针，通常被称为 CSS 规范。
在我们深入分析 CSS 规范前，首先要搞清楚是什么让 CSS 随着时间推移变得更加难维护，关键点是 CSS 是全局性的——你定义的每个样式都会全局应用到页面的每个部分，用一个命名约定来保证class名称的唯一性或者有特殊的规则来决定指定样式应用到指定元素。CSS 规范提供了一个有组织性的方式来避免大量代码时出现的这些问题，让我们按照时间顺序来看看主流的一些规范吧
OOCSS（面向对象的CSS）是在2009年首次提出的，它是围绕两个原则建立的规范。第一个原则是结构和样式分离，这意味着定义结构（布局）的 CSS 不应该和定义样式（颜色、字体等）的CSS混杂在一起，这样我们就可以很简单的为一个应用定义新的皮肤了；第二个原则是容器和内容分离，把元素看成是一个可重用的对象，关键核心点是一个对象不管用在页面的任何位置都应该看起来是相同的。
OOCSS 提供了成熟的指导规范，但是对于具体的执行规范并没有明确指出。后来出现的SMACSS 采用了它的核心概念，并且添加了更多的细节，使用起来更简单了。
SMACSS（可扩展模块化架构的 CSS）是在2011年出现的一种设计模式，它将 CSS 分为5个不同的类别——基本规范、布局规范、模块、状态规范和样式规范。SMACSS也有一些推荐的命名规则，对于布局规范使用l-或者layout- 作为前缀；对于状态规范，使用is-hidden 或者is-collapsed 作为前缀。
相比 OOCSS，SMACSS 有了更多细节上的规范，但是 CSS 规则该划分为哪一类别的规范中，这是个需要仔细考虑的问题。后来出现的 BEM 对这一方面进行了改进，让它更易使用了。
BEM (块, 元素, 修饰符)是在2010年出现的规范，它的思想主要是围绕把用户界面切分成独立的块。块是一个可重用的组件（举个例子像表单搜索，可以这样定义<form class="search-form"></form>），元素是块的一部分不能单独重用（比如表单搜索中的button，<button class="search-form__button">Search</button>），修饰符是定义了块或者元素外观、状态或者行为的实体（比如禁用搜索按钮，定义为<button class="search-form__button search-form__button--disabled">Search</button>）。
BEM 的规范很容易理解，对于新手来说命名规则上也很友好，缺点就是可能会导致class名字非常长，并且没有遵循传统的命名规范。后来出现的 Atomic CSS 又把这个非传统方式带到了一个新的高度。
Atomic CSS (也称为 功能性CSS)是2014年出现的一个规范，它的思想是基于可视化的方法创建小而功能单一化的 class。这种规范与OOCSS、SMACSS 和 BEM 完全相反——它并不是把页面上的元素看做是可重用的对象，Atomic CSS 忽略掉了这些对象，每一个元素使用了可重用的单一功能的 class 样式集合。因此像<button class="search-form__button">Search</button>就被替换成这样的写法了<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">Search</button>
如果你看到这个例子第一反应是被吓的退缩了，没关系你并不是唯一有这想法的人——很多人认为这种方式完全违背了 CSS 的最佳实践，但是，关于这个有争议的规范在不同场景下的应用也产出了一系列精彩的讨论。这篇文章很清晰的分析了传统的分离思想是CSS依赖于HTML创建（即使使用像BEM这类的规范），而Atomic的方式是HTML依赖于CSS创建，两者都没错，但是仔细想想你会发现 CSS 和 HTML 彻底分离的想法是实现不了的。
其他的 CSS 设计模式，像 CSS in JS 其实也包含了 CSS 和 HTML 相互依赖的思想，这也成为了一个饱受争议的设计规范之一。
CSS in JS 是2014年推出的一种设计模式，它的核心思想是把 CSS 直接写到各自组件中，而不是单独的样式文件里。这种方式在React框架中引入的，最早是使用内联样式，后来又进化成了使用 JavaScript 生成 CSS 然后插入到页面的 style 标签中的方式。
CSS in JS 再一次违背了 CSS 中关于分离的最佳实践，主要原因是 web 随着时间推移发生了很大的变化。最初web大部分都是静态网站——这种情况下HTML内容和CSS表现分离是很有意义的，但现在大部分应用都是动态web构建——这种情况下可重用的组件更加有意义了。
CSS in JS设计的目标是定义边界清晰包含自己 HTML/CSS/JS 的独立组件，并且不受其他组件的影响。React是最早采用这种思想的框架，后续也影响到了其他框架像 Angular、Ember和 Vue.js。需要注意的是 CSS in JS 的模式相对来说比较新的，开发人员正在不断的尝试开发web应用组件时的一些CSS最佳实践。