postcss是什么？
根据官网的解释，它是一种javascript编写的工具，用来转化css的。可以认为它是处理css的插件集合，需要配合诸如webpack、gulp等编译工具才能展现它强大的能力。
目前社区提供了非常多的插件，比较有名的如下：
- autoprefixer 可以为css的属性配置兼容性的前缀，不需要手动添加
- postcss-preset-env 允许你使用更加现代的css特性
- stylelint 检查css语法错误
- cssnano css的压缩器
- 等等
postcss的原理
如果大家了解babel的原理，那就应该听说过AST即抽象语法树。编译器将字符串进行词法分析、语法分析，再做转换，最终达到预期的结果。postcss也是同样的原理，这个包已经为使用者提供了解析的方法parse，并且也提供了很多转化的API，利用这些就可以自己开发一款postcss插件了。
css Module是什么？
先前呢，我们使用css选择器，它是对整个页面是有效的，也就是全局的，当你每次迭代需求的时候，需要考虑每次添加新的css是否会影响到其他地方，所以我们有时选择为样式表添加命名空间。css Module为我们提供了另外一种开发方式，它可以使css具有局部作用域。
用法如下：
用法是如此的简单，基本一看就会，css-loader为我们提供了css Module的开关，只要为css-loader添加参数选项modules就可以开启。注意：它必须放在less或者sass的loader之前。
那它如何做到局部作用域的呢？
打开element面板可以发现，它把class变成了md5戳，对应每个组件，保持唯一。
vue的scoped
由此我们联想到vue的scoped，它也解决了css局部作用域的问题！
它在dom上生成了一个data属性，并且给class选择器添加了属性选择器，类似于之前的md5戳。不过由于添加了属性选择器，使得选择器的优先级变高了，想在组件外面覆盖css属性就变得不那么容易了！
相关推荐
-
如何在 CSS 中使用 currentColor 值
在 CSS 中，我们有一个名为 currentColor 的特殊颜色值，可能大多数人都不知道。 currentColor 所做的是获取颜色属性的值并将其用于任何其他具有颜色参数的属性。 例如以下内容： 下面currentColor写法与上面效果一...
-
如何异步加载 CSS 文件
我们可以像这样异步加载 CSS： 应该什么时候使用css异步加载？ CSS 渲染是阻塞的，所以要考虑性能问题，因为浏览器下载 CSS，会停止绘制页面。因此，任何对首屏内容不重要的 CSS 都应该异步加载。另外，14kb-ish 是...
-
CSS截断长文本并使用省略号代替
网站很多地方都需要用省略号来截断长文本，比如分类页里每篇文章的概要等，那么怎么用css来实现呢？其实并不复杂，最后的效果如下图： 我们要用 text-overflow: ellipsis; 表示用省略号代替截断的文字。 要实现图中...
-
css里首行缩进2字符怎么设置（首行缩进2字符css代码）
1、首先打开Notepad++软件，新建一个空文件 2、输入下图所示内容： 3、点击左上角的文件会出现下图所示界面点击保存 4、点击后会出现下图界面，文件名为css.html，这里CSS只是一个示例，其实只需要扩展名使用.htm或....
-
css隐藏元素的几种方法和区别（css隐藏元素的三种方法）
1，通过设置display：none 2，input设置type为hidden 3，通过设置层级z-index 使其处于某个div下层来实现隐藏效果...
-
CSS calc()函数用法
calc() 是一个 CSS 函数，可让您直接在 CSS 中计算值。例如： 此功能最有用的功能之一是您可以混合多个 CSS 单位使用。在我们的示例中，我们使用了像素百分比，当然我们也可以使用 em、pt、rem 等。 我发现90%情况都...
