在这个前端发展日新月异的世界,能够找到有所影响的概念相当困难,而将其准确无误的传达,让人们愿意尝试,更是难上加难。

拿CSS来看,在我们写CSS时,工具侧最大的变化,也就是CSS处理器的使用,如:可能公认最好的SASS。还有PostCSS,提供了另一种不同的解决方案,但也相差不大,属于同种东西,都是输入浏览器不支持的语法,然后输出浏览器支持的语法。(这里和之前的文章认识不同可以点击《PostCSS的认识误区》查看详细)

现在,引入了CSS模块的概念。本文,将介绍这方面的技术,会讲到这种技术的几点,并且会告诉你怎么使用它。

CSS模块是什么?

官方定义:

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

一个CSS模块就是一个CSS文件,这个文件包含的所有类名和动画名默认都是局部作用域的。

实际比上面讲的要复杂一些,类名默认是局部作用域的,这涉及到一些配置,一个构建过程和一些很难把握的东西。

最终我们把CSS模块定义为一种把相关CSS代码组织成组件,并避免命名冲突的方法。(不用为你组件的命名担心,在构建的过程中会自动生成)。

CSS模块是怎么工作的?

CSS模块要放到构建过程中处理,它本身并不做什么。这看上去像是webpackbrowserify的插件。它的工作原理是:当你在js模块里调用CSS模块时(比如:React组件),CSS模块将根据文件中动态作用域或命名空间里的类名, 声明一个对象字面量,字面量中的类名将被js以字符串的形式调用。

让我们用一个例子来说明。

建一个简单的CSS文件,.base类不是项目中唯一的,它不是作为实际的类名来使用的。它相当于样式里的一个别名,这个别名将在js模块中使用。

.base {
color: deeppink;
max-width: 42em;
margin: 0 auto;}

这里看一下,怎么在JS组件中使用。

import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">
CSS Modules are fun.
</div>`;

以上代码会生成下面这样的代码(使用webpack构建工具的默认配置):

<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>
._20WEds96_Ee1ra54-24ePy {
color: deeppink;
max-width: 42em;
margin: 0 auto;}

类名,可以通过配置把类名加上特殊前缀,或使用短命名,但这并不是重点(虽然短命名,代表着更少的CSS样式)。

重点是指出,类名是动态生成的,唯一的,并且和样式表正确映射的。

几个关于CSS模块的观点

上面讲了它是如何工作的。现在你心里一定有疑惑,下面让我们一一解决。

生成的代码太丑了!

类名又不是为了漂亮。它存在的目的是把样式应用到元素上,所以这并不值得关注。

不太容易调试

只是是要通过构建过程生成的代码,调试起来都不容易。Sass也不容易调试,但可以使用sourcemap,css模块也可以。实际上尽量类名是生成的,但根据模块里的具体样式调试并不难。如果你知道你正在调试的是哪个模块,你就可以去对应模块找到对应的样式了。

样式没法重用

重用性是没错的,但CSS模块的目的就是把样式组件化,清除全局的冲突和依赖。

另外,你也可以定义全局的类(用:global()),比如一些公用的样式。这些类名也是可以在js组件中调用的

:global(.clearfix::after) {
content: '';
clear: both;
display: table;}

CSS模块也可以像SASS的@extend一样,通过存在的模块来扩展。不是直接复制一份样式过来,而是对各选择器样式进行合并。

.base {
composes: appearance from '../AnoherModule/styles.css';}

CSS模块需要其它的构建工具,如:webpack,browserify等工具

这和SASS编译.scss文件为正确的CSS样式,PostCSS把样式处理为浏览器兼容的代码一样。既然已经使用了构建工具,这点也不用多想了。

为什么还在讨论这些点?

因为不确定未来的CSS模块是不是现在这样的,但这一定是样式书写的方向。大型网站使用的大量的全局样式,不适合分解成小的组件。

全局唯一的CSS名,既强大又脆弱。无论是CSS模块还是以后其它工具。都需要找到既可以具备全局样式的公用,又可以避免同作用域下样式的命名冲突的解决方案。

入门

上面提到了,使用CSS模块需要webpack或browserify来构建。

Webpack

使用webpack,先修改webpack.config.js文件,添加以下配置项,开启CSS模块功能。

{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'}

以上配置会在你的页面插件<style>标签。这里需要一个webpack的extract text插件来去掉这个标签

{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')}

Browserify

使用Browserify,直接用命令行,代码参数有点多。可以使用npm来运行命令,配置一下package.json文件,代码如下:

{
"scripts": {
"build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
}}

解释一下,运行npm build,就相当于调用build对应的相关命令。处理src/index.js生成为dist/index.js,并通过css-modulesify插件编译dist/main.css样式。如果想通过Autoprefixer插件添加浏览器前缀,命令可改成下面这样:

{
"scripts": {
"build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"
}}

--after 在编译完样式后再运行autoprefixer插件。

总结

现在,CSS模块系统的生态圈还太小,但我相信,随着越来越多的人认识到,这是适应于从小到大项目的解决方案,它会发展得越来越好。

CSS模块化思想是正确的路。我也不是说本文介绍的方法,就是最好的解决方案,但已经可以把CSS书写得,具备以下特征:模块化,作用域或可重用。

想了解更多相关信息,可参阅CSS模块项目创建人,Glen Maddern的《css模块-未来的编码方式》的文章。

原文:Understanding the CSS Modules Methodology

原文链接:http://www.sitepoint.com/understanding-css-modules-methodology/

[翻译]理解CSS模块方法的更多相关文章

  1. [翻译]CSS模块-未来的编码方式

    前言 这是Glen Maddern发布于2015年8月19日的一篇文章,主要是之前翻译的文章<理解CSS模块方法>里提到这篇文章,现在算是顺藤摸瓜跟进来看看. 这里的翻译都是根据我自己的理 ...

  2. rt-thread中动态内存分配之小内存管理模块方法的一点理解

    @2019-01-18 [小记] rt-thread中动态内存分配之小内存管理模块方法的一点理解 > 内存初始化后的布局示意 lfree指向内存空闲区首地址 /** * @ingroup Sys ...

  3. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  4. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  5. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  6. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. JavaMath方法、服务器与Tomcat安装与配置步骤

    一.Math Math.PI 记录的圆周率  Math.E 记录e的常量  Math中还有一些类似的常量,都是一些工程数学常用量. Math.abs 求绝对值  Math.sin 正弦函数 Math. ...

  2. c# 项目文件,C#viual studio使用方法

    一.项目文件 1)Properties节点下主要存放的是当前程序集相关的信息,如版本号.标题等.双击”Properties“,打开如下项目属性窗口,可以设置项目相关的一些参数. 2)引用 节点主要列出 ...

  3. nodejs(三)上之express

    express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  4. ActiveMQ 详解

    1. 如何同步索引库 方案一: 在taotao-manager中,添加商品的业务逻辑中,添加一个同步索引库的业务逻辑; 缺点:业务逻辑耦合度高,业务拆分不明确; 方案二: 业务逻辑在taotato-s ...

  5. java基础02

    使用 myeclipse写第一个java程序 之后  右键 点击 src  创建 Class /** * package:包的声明! * 代表我们当前的java源文件在项目中的位置! * 必须位于除了 ...

  6. Python的一些教程(转)

    原文:http://blog.chinaunix.net/uid-26200547-id-3418038.html Python 安装配置及基本语法篇 Python 语言速成 Python 基本知识  ...

  7. Web应用扩展系列(1):架构篇(转)

    原文:Web应用扩展系列(1):架构篇 在这篇文章中,我将尽量涵盖Web应用扩展或性能调优时可能会遇到的一些架构问题. 首先,让我们来统一一些名词或项目的概念,下文中我将列举在扩展Web应用时可能会遇 ...

  8. Flask之请求和响应

    from flask import Flask from flask import request from flask import render_template from flask impor ...

  9. django-网页视屏播放

    基本都基于第三方: -cc视频 -播放免费视频 -收费视频 -需要做认证,cc视频会给你发消息,你返回,携带数据 -在前端页面中添加响应的视屏框的代码 -功能实现,有相关接口文档,配置即可

  10. 前端 html body 内标签之input

    可以做登录页面 text是文本输入框 <!DOCTYPE html> <html lang="en"> <head> <meta char ...