快捷搜索:
来自 新京葡娱乐场网址 2019-10-07 00:40 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

新京葡娱乐场网址:谈谈 PostCSS

谈谈 PostCSS

2017/10/18 · CSS · POSTCSS

原稿出处: laizimo   

前言

现行反革命的前端,javascript的升华分明,框架林立。相同的时候,html也是齐驱并骤,推出了HTML5正规,而且得到了广泛。那样的上扬却唯独少了二个剧中人物?

CSS,正是其一看似不起眼的家伙,却在开垦中发表着和js同样首要的效率。css,是一种样式脚本,好像和编制程序语言有着一定的偏离,大家得以将之了解为一种描述方法。那如同导致css被轻慢了。然则,css近几年来正在经历着一回巨变——CSS Module。作者记得js的井喷期应该可以说是node带来的,它带来了Module的定义,使得JS能够被工程化开垦品种。那么,明日的css,也将越来越美好。假如你欢悦本身的篇章,款待议论,接待Star~。款待关切自己的github博客

原稿地址:https://juejin.im/post/59e5dc1d6fb9a0450a666d62

前言

前段时间的前端,javascript的向上分明,框架林立。同期,html也是双管齐下,推出了HTML5规范,何况赢得了推广。那样的发展却只是少了三个剧中人物?

CSS,正是那一个看似不起眼的玩意儿,却在付出中表达着和js同样紧要的成效。css,是一种体制脚本,好像和编制程序语言有着必然的离开,大家得以将之精通为一种描述方法。那犹如导致css被藐视了。可是,css近几年来正在经历着一次巨变——CSS Module。笔者回想js的井喷期应该能够说是node带来的,它牵动了Module的概念,使得JS能够被工程化开辟项目。那么,前些天的css,也将越加美好。要是您心爱作者的稿子,接待商酌,款待Star~。接待关怀本人的github博客

正文

既然作为一篇推广PostCSS的篇章,大家就应超过来了然一下那是什么样,和大家事先讲的CSS Module有何关系?此处让自家为你们不停道来。

正文

既然如此作为一篇推广PostCSS的文章,我们就应有先来理解一下那是什么样,和大家从前讲的CSS Module有何关系?此处让自己为你们不停道来。

笔者想和你们说再见

新京葡娱乐场网址 1

预处理器

当下,在工程化开拓中,使用最多的应有正是Less、Sass和Stylus。首先,依旧介绍一下它们啊。它们有个联合的名字——css预管理器。何为CSS预管理器?应该就是一种能够将你遵照它的法规写出来的格式转成css的事物(照旧讲的易懂一点)。它们的面世能够说是恰逢其时,化解了css的一对不满:

  • 语法远远不足强大,无法嵌套书写,不便于模块化开辟
  • 从不改变量和逻辑上的复用机制,导致在css的属性值中不得不接纳字面量格局,以及不断重复书写重复的体制,导致难以维护。

面前碰到以上难题,css预管理器给出了老大实用的建设方案:

  1. 变量:就像其余编制程序语言同样,免于多处退换。

    • Sass:使用「$」对变量实行宣示,变量名和变量值使用冒号进行分割
    • Less:使用「@」对变量实行宣示
    • Stylus:中声称变量未有其它限制,结尾的总局可有可无,但变量名和变量值之间必供给有『等号』。但必要注意的是,假设用“@”符号来声称变量,Stylus会实行编译,但不会赋值给变量。就是说,Stylus 不要使用『@』评释变量。Stylus 调用变量的秘诀和Less、Sass完全同样。
  2. 作用域:有了变量,就亟须得有成效域实行政管理制。就想js一样,它会从部分功能域开始往上探究变量。

    • Sass:它的点子是三者中最差的,空中楼阁全局变量的概念
    • Less:它的章程和js相比较相似,逐级往上查找变量
    • Stylus:它的格局和Less比较日常,不过它和Sass同样更赞成于指令式查找
  3. 嵌套:对于css来讲,有嵌套的写法无疑是完美的,更疑似老爹和儿子层级之间鲜明提到

    • 三者在那处的拍卖未有分裂的,使用「&」表示父成分

有了这一个方案,会使得大家得以在有限援救DPY、可维护性、灵活性的前提下,编写css样式。

回来话题中,之所以会产出向预处理器那样子的技术方案,百川归海照旧css标准升高的滞后性导致的。同期,大家也应该思量一下,真的只要预管理器就够了吧?往往在品种过大时,由于贫乏模块的概念,全局变量的标题会不停干扰着你。每一回定义选用器时,总是要观照到其余文件中是或不是也运用了同样的命名。毕竟项目是团协会的,实际不是私有的。哪是或不是有方法可以解决那些主题材料吗?

自己想和你们说再见

新京葡娱乐场网址 2

眼前,在工程化开荒中,使用最多的相应正是Less、Sass和Stylus。首先,依然介绍一下它们啊。它们有个统一的名字——css预管理器。何为CSS预管理器?应该就是一种能够将你根据它的条条框框写出来的格式转成css的东西(仍然讲的易懂一点)。它们的产出能够说是恰逢其时,解决了css的有些不满:

  • 语法非常不够有力,不可能嵌套书写,不方便人民群众模块化开荒
  • 未有变量和逻辑上的复用机制,导致在css的属性值中不得不接纳字面量方式,以及持续重复书写重复的样式,导致难以维护。

直面上述难题,css预管理器给出了非常管用的缓和方案:

  1. 变量:就好像任何编制程序语言一样,免于多处修改。
    • Sass:使用「$」对变量实行宣示,变量名和变量值使用冒号实行划分
    • Less:使用「@」对变量进行宣示
    • Stylus:中表明变量未有任何限制,结尾的分店可有可无,但变量名和变量值之间必要求有『等号』。但需求当心的是,若是用“@”符号来声称变量,Stylus会举办编写翻译,但不会赋值给变量。就是说,Stylus 不要采纳『@』申明变量。Stylus 调用变量的章程和Less、Sass如出一辙。
  2. 作用域:有了变量,就亟须得有功能域举行政管理制。就想js同样,它会从一些功能域开头往上找寻变量。
    • Sass:它的主意是三者中最差的,不设有全局变量的概念
    • Less:它的措施和js相比较相似,逐级往上索求变量
    • Stylus:它的方法和Less相比日常,不过它和Sass一样更赞成于指令式查找
  3. 嵌套:对于css来讲,有嵌套的写法无疑是圆满的,更疑似父子层级之间明显提到
    • 三者在那处的拍卖都以同等的,使用「&」表示父成分

有了那几个方案,会使得我们可以在担保DPY、可维护性、灵活性的前提下,编写css样式。

归来话题中,之所以会油可是生向预管理器那样子的施工方案,归根结蒂依然css标准发展的滞后性导致的。同期,大家也应有惦念一下,真的只要预管理器就够了呢?往往在项目过大时,由于缺少模块的定义,全局变量的标题会随地郁闷着您。每一次定义采取器时,总是要兼顾到其余文件中是不是也应用了扳平的命名。终究项目是团体的,实际不是私人商品房的。哪是还是不是有法子得以消除这几个主题材料吗?

先辈的法子

对于css命名争持的难点,由来已经非常久,可以说咱俩前端开拓人员,每十六日在苦思冥想,怎么着去高雅的消除那么些题目。css并未有像js同样出现了英特尔、CMD和ES6 Module的模块化方案。

那么,回到难题,怎样去解决呢?大家的先驱者也可以有提议过不相同的方案:

  1. Object-Oriented CSS
  2. BEM
  3. 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命名争辩的难题,已经过了很短时间,能够说大家前端开辟职员,每日在大费周折,怎样去文雅的解决那些标题。css并未有像js同样出现了英特尔、CMD和ES6 Module的模块化方案。

那便是说,回到问题,怎么着去化解呢?大家的四驱也可以有提出过分裂的方案:

  1. Object-Oriented CSS
  2. BEM
  3. SMACSS

方案能够说是见惯司空,不乏有团体内部的技术方案。可是相当多都以三个共同点——为选取器扩展前缀。

这可是四个体力活,你只怕必要手动的去编写长长的选用器,只怕你能够使用预编写翻译的css语言。可是,它们犹如并为消除本质的主题素材——为啥会促成这种不满。大家不要紧来看看,使用BEM规范写出来的例证:

JavaScript

<!-- 正确的。成分都位居 '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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 正确的。元素都位于 '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方式来完毕网页组件的开支。自从二〇一六年开班,海外就风靡了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。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:新京葡娱乐场网址:谈谈 PostCSS

关键词: