CSS Modules

PostCSS-modules: 让CSS变得更强大

多年来,我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架,CSS命名的冲突不再是问题。我将向你展示如何使用PostCSSPostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来,许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏,几乎没有任何浏览器不能做到的。现在,我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力,创造出它很难处理的东西。

使用CSS Modules解决权重的烦恼

CSS Modules与W3C无关,而是构建过程的一部分。它编译你的项目,重命名选择器和类,使它变得独一无二作用于各个组件。样式被锁在这些组件中,不能在其他地方使用,除非你有特别需求。现在我们已经习惯了Web技术来驱动App,Web App,移动端和PC端的应用程序。但与简单的静态网站不同的是,应用程序通常更动态、更复杂,而且通常包括组件,甚至超出了Bootstrap和ZURB Foundation提供的功能。当一个应用程序变得复杂起来,管理它的CSS可能是一个如地狱般的任务。

Webpack入门 以及 CSS模块化

这是讲CSS模块化系列文章的最后一篇,我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板:一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。之前的文章中我们用Webpack快速搭建了一个工程来展示了所有依赖是如何被导入到一个文件的以及在打包过程中如何将一个唯一的classname同时在csshtml中生成the basics of React。在之前的演示中,我们知道通过js来渲染我们标签,但是我们不清楚如何构建我们项目。在这篇文章中我们将用一个更真实的例子演示如何通过我们新学的Webpack知识来构建我们的项目。我把之前演示的代码放到Github上了 css-modules-react ,你可以通过这个代码开始下面的例子。

开始CSS模块

这里不止一种方法来让CSS模块与JavaScript模板、CSS文件或者构建步骤运行起来。这篇文章作为CSS模块系列文章的一部分,我们学习一种方法。本文的目的就是开始一个CSS模块项目并且运行起来。在这个项目中,要求CSS决不能依赖客户端JavaScript运行,所以构建步骤需要在部署之前将所有东西处理成可运行的HTML和CSS。我们将使用Webpack,一款构建系统和模块打包工具。在下一篇文章中我们将集中使代码处于一个渲染静态HTML的浏览器的真实的项目中。

什么是CSS模块以及你为什么需要它们?

我最近对CSS模块很好奇。如果你还没有听说过它们,这篇文章就是为你而写。我们将了解CSS模块以及它的目的是什么。如果你也感兴趣,请持续跟踪,下一篇文章将关于怎样使用CSS模块。如果你想进一步提高你的CSS模块使用技能,第三部分将关于在React环境中使用它们。

理解CSS模块化

在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中, Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sass略有不同,但是殊途同归——都是用浏览器不能解析的语法编写,并且最终编译成浏览器能够理解的语法。现在,又有一位新的成员出现了,它就是CSS模块。本文就将介绍CSS模块化的诸多优点,以及如何编写模块化的CSS。

可视化介绍CSS Modules是什么?

你是否曾经为组件设计过样式,却只知道应用了不需要的CSS规则?也许你会重新考虑CSS的另一个部分,所以规则不适用,或者你会添加!important规则,只是为了让它发挥作用。这就是CSS Modules要解决的问题。让我们看看CSS Modules的官方定义:CSS Module是一个CSS文件,所有类名和动画名称默认都在本地范围内。这里的关键词是局部范围的。使用CSS Module,你的CSS类名与JavaScript中的本地变量类似。顺便说一下,CSS Module只是一个.css文件。如果你打算使用CSS Module编译器,你可以把它叫做CSS Module。

JavaScript中的CSS: CSSX

想像一下,一个Web组件都在一个.js文件中,这个文件包含了一切:HTML结构、CSS样式和一些逻辑。仍然会有基本的样式表,但动态的CSS将使用JavaScript来处理。现在这样做是能做的,并实现它的一个方法称为CSSX。CSSX是我用了近一个月的业余时间写的一个项目,它是具有挑战性的、有趣的,而且在这个项目中我学到很多新东西。它的最终结果就是变成一个工具,允许你在JavaScript中写CSS。

CSS Modules 详解及 React 中实践

CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

CSS模块

如果让你选出一个近期CSS发展的转折点,你很可能会选2014年11月NationJS大会上Christopher Chedeau关于“CSS in JS”的分享。那个时刻是个分水岭,一系列不同的想法像经历过高能碰撞一样在各自方向上螺旋上升。例如,React Style, jsxstyleRadium 是目前在React中写样式的三个最新,最好,最可行的方法并且所有的参考资料都在它们的项目Readme中。如果发明是对于相邻可能性的一种探索,那么Christopher的责任是让许许多多的可能性更加靠近。

返回顶部