JavaScript越来越有一统天下的趋势，这已经不是什么秘密了。但是你可能不知道的是，CSS也同样的在进化，在创新。
CSS最近已突飞猛进，得到很多的改善。甚至CSS都有可能不再是你认识的CSS了。当你不注意的时候，CSS社区开发了很多真正解决许多古怪的CSS问题，在这个过程不需要使用一些黑魔法，以前的缺陷也不再是缺陷。也使这些害群之马从前端的家庭中踢出去。
在这篇文章中，将会介绍CSS中的五种老的处理方式，而今天你不再需要那样做。既然不需要那样做了，那又应该怎么做呢？接下来就一一给大家呈现。
不在需要命名约定
CSS的命名是CSS的头号问题，特别是在大多数比例下：每一样的都是全局的。
上图来自于http://speakerdeck.com/vjeux/react-css-in-js
所有选择器中存在相同的全局命名空间，随着时间的推移，很有可能在使用的过程中会碰到意想不到的副作用。如果你不想选择器定位到元素或者被其他选择器覆盖。我们有必要回避这些问题，找到解决这些问题方法（常见的CSS方法有OOCSS、SMACSS或者更受欢迎的BEM）。通过这些命名的约定来帮助我们避免类名的冲突。
有关于OOCSS、SMACSS、BEM或者类似相关命名方法的相关资源：
- OOCSS
- SMACSS
- BEM
- CSS Architecture and Methodologies
- Organizing CSS: OOCSS, SMACSS, and BEM
- OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
- Atomic OOBEMITSCSS
- BEM & Atomic Design: A CSS Architecture Worth Loving
- BEMIT: Taking the BEM Naming Convention a Step Further
- ITCSS: SCALABLE AND MAINTAINABLE CSS ARCHITECTURE
- Understanding CSS Writing Methodologies
- The Role of Utility Classes in Scalable CSS
- 淺談 CSS 方法論與 Atomic CSS
- Meaningful CSS: Style Like You Mean It
- CSS Methodologies
虽然我们不能给这些方法性打折扣，因为他们仅仅是一个解决方案。实际上他们并不能解决前面所说的问题，所以我们需要更多的东西。然后就有新的故事发生了。
(图片来自：http://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284)
@Mark Dalgleish和其他人已经开创了CSS局部作用域的概念，因为可以通过CSS Modules进行开发，并且这个思路已纳入了开发者工程化中，尤其是Webpack的css-loader。
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
这个功能是非常强大的。当使用CSS Modules，你可以使用任何你自己喜欢的类名。在构建时，所有本地选择器都会被唯一标识符所取代，完全消除需要一个全局性命名的约定。有关更详细的介绍，可以阅读CSS Modules的相关文档。
虽然这种技术的诞生是面向组件的开发（比如React），但支持CSS Modules可以说无处不在。
扩展阅读
- CSS Modules 详解及 React 中实践
- React CSS Modules
- What are CSS Modules and why do we need them?
- Getting Started with CSS Modules
- React + CSS Modules
- CSS Modules
- CSS Modules by Example
- What are CSS Modules? A visual introduction.
- CSS Modules — Solving the challenges of CSS at scale
- Practical Guide to React and CSS Modules
- Do I really need CSS modules?
- CSS Modules 入门及 React 中实践
不再需要float
浮动已经面为选择的定位属性和许多开发人的克星，比如通过多类名来创建一个网格系统。虽然偶尔使用浮动可以把一个元素向左或向右移动不会带来太多的麻烦，但用于完整的页面布局就会产生一些奇怪的行为。这对于开发人员而言，需要找一些黑魔法来解决这些奇怪的行为，而这个过程对于开发人员而言是件痛苦的事情。很快你会发现自己复制一个clearfix到每一个元素，用于清除浮动。
有关于浮动和清除浮动的相关教程可以阅读：
值得庆幸的是，CSS3引入了一个新的布局模块，称为弹性盒子，或简称为Flexbox。Flexbox主要还是一个一维布局系统，可以在各种屏幕尺寸和设备上确保元素的行为，灵活的布局。它也解决了常令人头痛的水平垂直居中问题。当你切换到Flexbox的使用中，你不再需要使用浮动。
虽然Flexbox得到了所有现代主流浏览器的完全支持，但对于老版本浏览器还是存在问题。如果你的项目必须支持低于IE10的浏览器，你可以仍然需要使用回浮动、表格或其他布局方法。
有些浏览器也需要添加私有前缀，所以我建议你使用Autoprefixer最保险。
这里有可能是天朝有关于Flexbox最全面的教程，如果你感兴趣，欢迎点击这里进行阅读。
不再需要一个网格框架
估计每个人都使用过一个网格。对于每一个CSS代码库这也是至关重要的部分，可以让让根据行和列调整元素构建复杂的整版布局。虽然自己使用传统的技术创建自己的网格系统不是一件难事，但没有太多人会这样做。相反，大家会使用许多流行的网格框架，比如960gs或者基于Sass的Bourbon Neat。
最后，截至2017年3月，大多数浏览器支持CSS Grid Layout，CSS Grid和以往的任何布局方式都不一样，他改变了以前的一维布局方式。也就是说CSS Grid是一个二维布局系统，可以使用这种技术直接构建网格系统。因为大多数传统的网格框架仍然是依靠浮动，但CSS Grid是一个很有吸引力的选择。CSS Grid很容易在没有任何一个框架的帮助下，通过行、列的尺寸和数字，间距，网格内元素对齐方式和命名区域等，非常界面化构建自己的网格系统。
在写这篇文章的时候，CSS Grid得到所有现代浏览器支持，IE支持部分Grid特性。使用CSS Grid也可以使用Autoprefixer来给添加浏览器私有前缀。
有关于CSS Grid Layout更多的教程可以点击这里阅读。
不再需要一个预处理器
不可否认的是，CSS语言扩展，比如Sass和LESS改变了CSS的游戏规则和功能，比如变量、嵌套和混合宏。但是，这些语言并没有改变任何关于CSS的核心语言，他们加入了一个抽象层。比如Sass，还需要把Sass文件编译成CSS，才能使用。当你使用一个预处理器，你必须先学习CSS预处理器特定的语法。
有关于Sass更多的教程，可以点击这里。
尽管大多数开发人员使用预处理器觉得很幸福，但CSS已悄然在发展。现在现代浏览器支持CSS变量和calc()。其他特性，如颜色计算和混合宏也将紧随其后的到来。
:root {
--spacing: 1.5em; // declaring a variable
--base-colors: { // declaring a mixin
color: #fff;
background-color: color(#fff shade(+80%)); // modifying a color
}
}
.some-class {
padding: var(--spacing);
width: calc(100% - var(--spacing)); // dynamically calculating a value
@apply --base-colors;
}
幸运的是,CSS和JavaScript社区已经足够快到让浏览器不支持新特性的问题，这导致了Babel的出现，让JavaSript开发人员可以到处使用JavaScript下一代特性。同样的，PostCSS是一个类似于JavaScript的Babel工具，可以让开发人员使用CSS的一些新特性。而且PostCSS发展非常的快，因为它的力量都是来自于社区，通过社区的力量来开发和维护PostCSS的各种插件。最显著的是，CSS开发者可以使用PostCSS插件cssnext，在开发中使用未来的CSS语法。
有关于PostCSS的相关介绍，可以点击这里。另外我们翻译的有关于PostCSS的书《Mastering PostCSS for Web Design》，如果不出意外的话，下个月即将和国内开发者面世。
你不需要CSS
好了，这可能不是完全正确的。尽管CSS仍然是浏览器唯一理解的样式语言，你现在无需编写一个.css文件就可以美化你的Web运用程序或Web页面。在UI库的帮助下（比如React或Vue），现在Web应用程序架构支持松散耦合、高内聚组件，经常可以把HTML、CSS和JavaScript共同部署在同一个文件中。有趣的是，这个想法直接最佳实践所说的分离开发相矛盾。有一个分享“Rethinking best practices”，给出了相关的解释。
(来自于：http://speakerdeck.com/didoo/let-there-be-peace-on-css)
从CSS的角度来看，这种思想甚至被给定一个琅琅上口的名字：CSS-in-JS。
起初，CSS-in-JS库使用给HTML的每个元素的style属性上，这是一个有缺陷的方法，因为CSS要覆盖元素中的style属性是不件易事。现在，大多数库可以生成CSS样式表，避免使用元素的style属性。
在JavaScriptk 写CSS是这篇文章中的另一个重点。大多数新库样式范围都是自动的，使用重用类简单有效，识别和内联CSS可以让初始加载变得更快，使用critical-path可以更好的完成首屏样式渲染，这些真正的模块化用于开源的CSS包中。这里有一篇不可不读的文章，这篇文章概述了使用CSS-in-JS的好处，到目前为止这是我读过最好的一篇文章。
这个领域是新的和令人兴奋的，这里有一个很好的库（这个列表可能稍微有点老了）。这是一件好事。它需要一段时间，让社区安静下来，才能找出最好的实践，譬如style属性，媒体查询，并且能够使用适当的CSS语法，而不是一个JavaScript对象。
JSS是一个非常受欢迎的选择，一个活跃的社区和一个稳定的接口，但是styled-components的方向更令我感到兴奋，它巧妙地通过访问模板文本（Template Iiterals）来写CSS组件。
（来自于：http://www.styled-components.com/）
有关于CSS-in-JS更多的介绍可以阅读下面相关文章：
- Finally, CSS In JS! Meet CSSX
- Stop using CSS in JavaScript for web development
- CSS in JavaScript: The future of component-based styling
- CSS in JS: The Argument Refined
- CSS in JS 简介
- JavaScript中的CSS: CSSX
- Styled-components
- Styled Components：让样式也成为组件
CSS is dead. Long Live CSS.
- 你不需要默认命名约定，因为
locally-scoped是常用库现在默认的样式风格 - 你不需要浮动，因为Flexbox更强大
- 你不需要一个网格框架，因为有了一个原生的CSS Grid
- 你不需要一个预处理器，因为CSS有更高级的功能
- 你不需要CSS，那是因为你可以在JavaScript中写样式
大规模采用现代的JavaScript技术和UI库，尤其是React，我感到非常的兴奋。但同时我也感到沮丧，因为相同的代码库继续使用过时，有缺陷的CSS技巧和技术，而不是拥抱现代化。我们是时候认识到这些新发展的重要性。CSS社区将带领我们找到新的出路，推进CSS更向前发展，同时给我们以最舒适的开发习惯。
@Alan Mooiman分享过CSS is Dead; Long Live CSS这样的话题。
总结
这篇文章从五个方面：CSS命名空间、放弃浮动使用Flexbox来布局、采用原生的Grid来替代网格框架、放弃CSS处理器采用新的CSS特性以及在JavaScript中编写CSS。或许你不太完全认可这些方面，但这些也可以说是CSS目前状态。虽然CSS社区发展并没有JavaScript社区那么强大，但还是有众多CSS爱好者、开发者在不断的推进CSS向前发展。有人说，CSS已死，但我想说CSS长久不衰！
文章虽然介绍CSS的目前几个状态，其实这篇文章末尾的评论更精彩，有兴趣的可以看看众多开发者对这方面的意见。如果你对这方面也有自己的建议和看法，欢迎在下面的评论中与我们一起分享。
本文根据@Ryan Oglesby的《The State of CSS》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:http://ryanogles.by/css/javascript/2017/05/25/the-state-of-css.html。
大漠
如需转载，烦请注明出处：https://www.w3cplus.com/css/the-state-of-css.html