谈谈PostCSS
来源:互联网 发布:maya软件破解版 编辑:程序博客网 时间:2024/06/04 19:19
什么是CSS
css,是一种样式脚本,好像和编程语言有着一定的距离,我们可以将之理解为一种描述方法。这似乎导致css被轻视了。不过,css近几年来正在经历着一次巨变——CSS Module。
我记得js的井喷期应该可以说是node带来的,它带来了Module的概念,使得JS可以被工程化开发项目
CSS预处理器的介绍
目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。
首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器?应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。它们的出现可以说是恰逢其时,解决了css的一些缺憾:
- 语法不够强大,不能够嵌套书写,不利于模块化开发
- 没有变量和逻辑上的复用机制,导致在css的属性值中只能使用字面量形式,以及不断重复书写重复的样式,导致难以维护。
面对以上问题,css预处理器给出了非常可行的解决方案:
1.变量:就像其他编程语言一样,免于多处修改。
- Sass:使用「$」对变量进行声明,变量名和变量值使用冒号进行分割
- Less:使用「@」对变量进行声明
- Stylus:stylus中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。但需要注意的是,如果用“@”符号来声明变量,Stylus会进行编译,但不会赋值给变量。就是说,Stylus不要使用『@』声明变量。Stylus 调用变量的方法和Less、Sass完全相同。
2.作用域:有了变量,就必须得有作用域进行管理。就像js一样,它会从局部作用域开始往上查找变量。
- Sass:它的方式是三者中最差的,不存在全局变量的概念
- Less:它的方式和js比较相似,逐级往上查找变量
- Stylus:它的方式和Less比较相似,但是它和Sass一样更倾向于指令式查找
3.嵌套:对于css来说,有嵌套的写法无疑是完美的,更像是父子层级之间明确关系
- 三者在这处的处理都是一样的,使用「&」表示父元素
有了这些方案,会使得我们可以在保证DPY、可维护性、灵活性的前提下,编写css样式。
回到话题中,之所以会出现像预处理器这样子的解决方案,归根结底还是css标准发展的滞后性导致的。同时,我们也应该考虑一下,真的只要预处理器就够了吗?
往往在项目过大时,由于缺乏模块的概念,全局变量的问题会持续困扰着你。每次定义选择器时,总是要顾及到其他文件中是否也使用了同样的命名。毕竟项目是团队的,而不是个人的。那是否有方式可以解决这些问题呢?
前人的方法
对于css命名冲突的问题,由来已久,可以说我们前端开发人员,天天在苦思冥想,如何去优雅的解决这些问题。css并未像js一样出现了AMD、CMD和ES6 Module的模块化方案。
那么,回到问题,如何去解决呢?我们的前人也有提出过不同的方案:
- Object-Oriented CSS
- BEM
- SMACSS
方案可以说是层出不穷,不乏有团队内部的解决方案。但是大多数都是一个共同点——为选择器增加前缀。
这可是一个体力活,你可能需要手动的去编写长长的选择器,或许你可以使用预编译的css语言。但是,它们似乎并未解决本质的问题——为何会造成这种缺憾。我们不妨来看看,使用BEM规范写出来的例子:
<!-- 正确的。元素都位于 'search-form' 模块内 --><!-- 'search-form' 模块 --><form class="search-form"> <!-- 在 'search-form' 模块内的 'input' 元素 --> <input class="search-form__input" /> <!-- 在 'search-form' 模块内的 'button' 元素 --> <button class="search-form__button"></button></form><!-- 不正确的。元素位于 'search-form' 模块的上下文之外 --><!-- 'search-form' 模块 --><form class=""search-block></form><!-- 在 'search-form' 模块内的 'input' 元素 --><input class="search-form__input"/><!-- 在 'search-form' 模块内的 'button' 元素 --><button class="search-form__button"></button>
一种希望
现在的网页开发,讲究的是组件化的思想,因此,急需可行的css Module方式来完成网页组件的开发。自从2015年开始,国外就流行了CSS-in-JS(典型的代表,react的styled-components),还有一种就是CSS Module。
对于css,大家都知道,它是一门描述类语言,并不存在动态性。那么,要如何去形成module呢。我们可以先来看一个react使用postcss的例子:
//example.css.article { font-size: 14px;}.title { font-size: 20px;}
之后,将这些命名打乱:
.zxcvb{ font-size: 14px;}.zxcva{ font-size: 20px;}
将之命名对应的内容,放入到JSON文件中去:
{ "article": "zxcvb", "title": "zxcva"}
之后,在js文件中运用:
import style from 'style.json';class Example extends Component{ render() { return ( <div classname={style.article}> <div classname={style.title}></div> </div> ) }}
这样子,就描绘出了一副css module的原型。当然,我们不可能每次都需要手动去写这些东西。我们需要自动化的插件帮助我们完成这一个过程。之后,我们应该先来了解一下postCSS。
参考:http://geek.csdn.net/news/detail/230756
https://github.com/laizimo/zimo-article/issues/41
- 谈谈PostCSS
- PostCss
- PostCSS
- postcss
- PostCss简介
- 什么事postCSS
- 初探PostCSS
- postcss压缩 postcss-clean替换cssnano
- vue 文件添加postcss postcss-loader
- postcss 知识点备忘
- postcss import的bug
- postCss的学习
- postcss-loader的使用指南
- 为什么使用PostCSS?
- postcss webpack3.0配置
- webpack postcss-loader autoprefixer 配置
- 谈谈
- 谈谈~~
- sublime中设置编程语言,并直接在sublime中运行,以及修改运行快捷键
- 每天进步一点点——Linux中的文件描述符与打开文件之间的关系
- 289. Game of Life
- Spring中使用JDBC做的增删改查
- volley框架解析
- 谈谈PostCSS
- 将本地repo镜像推送到远程gerrit服务器
- 微信小程序 GMT+0800 (中国标准时间) WXSS 文件编译错误
- HTML语言制作表格
- 极大似然估计 EM算法
- Find the top5 similar issues in bugzilla system
- 以太币还能挖多久
- springmvc转换xml数据
- 【TensorFlow】激活函数(Activation Functions)原理解析(十二)