CSS的状态

栏目: CSS · 发布时间: 7年前

内容简介：CSS的状态

JavaScript越来越有一统天下的趋势，这已经不是什么秘密了。但是你可能不知道的是，CSS也同样的在进化，在创新。

CSS最近已突飞猛进，得到很多的改善。甚至CSS都有可能不再是你认识的CSS了。当你不注意的时候，CSS社区开发了很多真正解决许多古怪的CSS问题，在这个过程不需要使用一些黑魔法，以前的缺陷也不再是缺陷。也使这些害群之马从前端的家庭中踢出去。

在这篇文章中，将会介绍CSS中的五种老的处理方式，而今天你不再需要那样做。既然不需要那样做了，那又应该怎么做呢？接下来就一一给大家呈现。

不在需要命名约定

CSS的命名是CSS的头号问题，特别是在大多数比例下：每一样的都是全局的。

CSS的状态

上图来自于http://speakerdeck.com/vjeux/react-css-in-js

所有选择器中存在相同的全局命名空间，随着时间的推移，很有可能在使用的过程中会碰到意想不到的副作用。如果你不想选择器定位到元素或者被其他选择器覆盖。我们有必要回避这些问题，找到解决这些问题方法（常见的CSS方法有 OOCSS 、 SMACSS 或者更受欢迎的 BEM ）。通过这些命名的约定来帮助我们避免类名的冲突。

有关于OOCSS、SMACSS、BEM或者类似相关命名方法的相关资源：

虽然我们不能给这些方法性打折扣，因为他们仅仅是一个解决方案。实际上他们并不能解决前面所说的问题，所以我们需要更多的东西。然后就 有新的故事发生了 。

CSS的状态

( 图片来自：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可以说无处不在。

扩展阅读

不再需要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” ，给出了相关的解释。

CSS的状态

( 来自于：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组件。

CSS的状态

（ 来自于：http://www.styled-components.com/ ）

有关于CSS-in-JS更多的介绍可以阅读下面相关文章：

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 。

CSS的状态

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。


以上所述就是小编给大家介绍的《CSS的状态》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
阿里传

阿里传

波特·埃里斯曼 / 张光磊、吕靖纬、崔玉开 / 中信出版社 / 2015-9-15 / CNY 49.00

你只知道阿里巴巴故事的中国部分，而这本书会完整呈现故事的全部。 波特•埃里斯曼是阿里巴巴创业时期为数不多的外国高管。他于2000~2008年在阿里巴巴担任副总裁，这本书记录了他在阿里巴巴8年的时间里的创业故事、商业经验以及在阿里巴巴和马云、蔡崇信、关明生等阿里巴巴早期团队并肩奋战的故事。 在波特眼中，阿里巴巴的成功经验和模式是可以复制的，阿里巴巴曾经犯过的错误，走过的弯路，我们也可以绕......一起来看看 《阿里传》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3