您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:未来的编码方式,不要再在

新葡亰496net:未来的编码方式,不要再在

发布时间:2019-10-06 07:03编辑:新葡亰官网浏览(97)

    无须再在 JavaScript 中写 CSS 了

    2017/06/28 · CSS · CSS, Javascript

    本文由 伯乐在线 - 古鲁伊 翻译。未经许可,禁绝转发!
    英文出处:Gajus Kuizinas。款待参与翻译组。

    正文小编是 react-css-modules 和 babel-plugin-react-css-modules 的小编。并非对 CSS in JavaScript: The future of component-based styling,或是使用样式组件的不予,而是一种补偿,web 开垦者要询问自身的供给,通晓本身行使 styled-components 的真的原因。

    前言

    那是Glen Maddern发表于二零一六年5月二12日的一篇小说,首假诺事先翻译的篇章《明亮CSS模块方法》里提到那篇文章,今后总算沿波讨源跟进来看看。

    此地的翻译都以依附本人要好的领会举行的,所以不是一句一句的来的,有怎么着不对的也不免,水平有限,希望大家建议。

    前言

    那是Glen Maddern发表于2016年3月二二十二十三日的一篇文章,紧若是以前翻译的小说《驾驭CSS模块方法》里关系这篇文章,今后总算追本溯源跟进来看看。

    此处的翻译皆以依靠自身本人的知情进行的,所以不是一句一句的来的,有啥不对的也难免,水平有限,希望我们指出。

    styled-components  - 组件样式化


    CSS Modules 详解及 React 中实践

    2016/01/18 · CSS · CSS Modules, React

    最先的文章出处: pure render - camsong   

    新葡亰496net 1

    CSS 是前面三个领域中前进最慢的一块。由于 ES二零一五/二〇一六 的迅猛普遍和 贝布el/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,慢慢产生大型项目工程化的痛点。也改成了前面几个走向绝望模块化前必需解决的难点。

    CSS 模块化的缓和方案有许多,但关键有两类。一类是干净抛弃 CSS,使用 JS 或 JSON 来写样式。Radium,jsxstyle,react-style 属于这一类。优点是能给 CSS 提供 JS 同样庞大的模块化工夫;短处是不可能使用成熟的 CSS 预管理器(或后计算机) Sass/Less/PostCSS,:hover:active 伪类处理起来复杂。另一类是仍旧使用 CSS,但采纳 JS 来保管体制正视,代表是 CSS Modules。CSS Modules 能最大化地组合现存 CSS 生态和 JS 模块化工夫,API 简洁到差十分的少零就学开支。公布时依旧编写翻译出单身的 JS 和 CSS。它并不借助于于 React,只要您利用 Webpack,能够在 Vue/Angular/jQuery 中运用。是本人认为日前最佳的 CSS 模块化解决方案。前段时间在品种中山大学量行使,下边具体享受下施行中的细节和主见。

     

    实际不是再在 JavaScript 中用 CSS了

    正文

    一经想在新近CSS开辟思索上找到三个浮动点,最佳去找克Rees托弗 Chedeau 二〇一六年七月在NationJS上登载的“css in js”演说。那是八个分水岭,各类不一样的盘算,就疑似高速粒子似的在本人的矛头上高速发展。比如:在React及部分重视React的类型中写样式, React Style,jsxstyle和Radium是里面四个,最新的,最高超的,和最低价的办法。假如发明是在一种索求的事态下邻座的或是(adjacent possible),那么christopher是创办了重重近乎相近(adjacent)可能性。

    新葡亰496net 2

    这个题目,以差异的款式存在于大的CSS代码库中。christopher提出,这几个难题都或然由此在js中写代码来消除。但这种应用方案引进了其自个儿的复杂性和特点。只要看一下,在事先涉嫌的品种中(React Style,jsxstyle和Radium),处理在:hover状态下range的格局。那几个标题,在浏览器端css中早就早被消除了。

    CSS Modules team找到问题的非常重要--保持和CSS一致,使用styles-in-js的法门编写。纵然大家仍旧坚定不移主张使用了CSS的款型,但还会有要谢谢对大家提供大多提出的情人。

    我们直接在煞费苦心地揣摩CSS,如何去编写越来越好。

    正文

    假诺想在最近CSS开采思虑上找到叁个变迁点,最棒去找克里Stowe弗 Chedeau 二〇一五年一月在NationJS上登出的“css in js”演讲。那是多个分割线,种种分裂的思量,仿佛高速粒子似的在友好的取向上相当慢上扬。比方:在React及一些依赖React的品种中写样式, React Style,jsxstyle和Radium是中间多少个,最新的,最抢眼的,和最实用的诀要。假诺发明是在一种查究的地方下邻座的也许(adjacent possible),那么christopher是创制了相当多像样周围(adjacent)恐怕性。

    新葡亰496net 3

    这几个主题素材,以不一样的样式存在于大的CSS代码库中。christopher建议,那几个标题都或许因此在js中写代码来减轻。但这种应用方案引进了其自己的扑朔迷离和特色。只要看一下,在前头涉嫌的花色中(React Style,jsxstyle和Radium),管理在:hover状态下range的法子。那么些主题材料,在浏览器端css中一度早被消除了。

    CSS Modules team找到难点的根本--保持和CSS一致,使用styles-in-js的措施编写。尽管大家依旧百折不回主见使用了CSS的格局,但还应该有要感激对我们提供不胜枚举提出的心上人。

    我们直接在搜索枯肠地思索CSS,怎么样去编写更加好。

    Installation

    npm install --save styled-components

    CSS 模块化蒙受了什么样难点?

    CSS 模块化主要的是要消除许多个难点:CSS 样式的导入和导出。灵活按需导入以便复用代码;导出时要能够掩盖个中功用域,以防形成全局污染。Sass/Less/PostCSS 等接二连三试图缓慢解决 CSS 编制程序技能弱的标题,结果它们做的也的确不错,但那并从未缓和模块化最器重的主题素材。Twitter工程师 Vjeux 首先抛出了 React 开辟中碰到的一层层 CSS 相关难题。加上小编个人的眼光,总计如下:

    1. 全局污染

    CSS 使用全局选择器机制来安装样式,优点是便于重写样式。劣点是享有的体制都以大局生效,样式或然被错误覆盖,因而发生了丰硕难看的 !important,甚至 inline !important 和复杂的[选料器权重计数表](Selectors Level 3),提升犯错概率和运用资金。Web Components 标准中的 Shadow DOM 能通透到底消除那一个主题素材,但它的做法有一点极端,样式通透到底局地化,形成外界一点都不大概重写样式,损失了灵活性。

    1. 命名混乱

     

    鉴于全局污染的主题素材,三个人共同开垦时为了防止样式争辩,采纳器更加的复杂,轻松造成不一致的命名风格,很难统一。样式变多后,命主力尤其混乱。

    1. 依赖管理不到头

    组件应该互相独立,引进三个零件时,应该只引进它所急需的 CSS 样式。但现行的做法是除了要引进 JS,还要再引进它的 CSS,并且 Saas/Less 很难落到实处对各种组件都编写翻译出单身的 CSS,引进全部模块的 CSS 又导致浪费。JS 的模块化已经丰硕成熟,即使能让 JS 来保管 CSS 重视是很好的消除办法。Webpack 的 css-loader 提供了这种手艺。

    1. 不大概分享变量

    复杂组件要运用 JS 和 CSS 来共同管理体制,就能够促成有个别变量在 JS 和 CSS 中冗余,Sass/PostCSS/CSS 等都不提供跨 JS 和 CSS 分享变量这种力量。

    1. 代码压缩不干净

    出于移动端互连网的不分明性,未来对 CSS 压缩已经到了变态的等级次序。相当多压缩工具为了节约三个字节会把 ’16px’ 转成 ‘1pc’。但对极度长的 class 名却一点计策也施展不出,力未有用到刀刃上。

    上边的难点如若只凭 CSS 本人是爱莫能助化解的,假若是由此 JS 来保管 CSS 就很好解决,因而 Vjuex 给出的建设方案是一丝一毫的 CSS in JS,但这一定于完全屏弃CSS,在 JS 中以 Object 语法来写 CSS,测度刚看见的伴儿都十分吃惊了。直到出现了 CSS Modules。

     

    9 个谎言

    CSS 不应随便放置。比相当多等级次序采用将样式写在 JavaScript 中的理由不对。本文列出了周围的误解,以及缓慢解决问题的留存 CSS 方案。

    本文的别样言论都并未有对有个别项目或人开展人身攻击的意味。styled-components 是 React 的日前大势,所以小编将 styled-components 定义为“JavaScript 中的 CSS”。

    styled-components 的发起人(Max Stoiber、Glen Maddern 以及独具的进献者)都很聪明智慧、主见极度,出发点也是好的。

    新葡亰496net,为了完全透明,小编还要提出本人是 react-css-modules 和 babel-plugin-react-css-modules 的作者。

    新葡亰496net 4

    小红帽

    第1步:暗中认可局地作用域

    在css模块中,每多少个文书都以独自编写翻译的,因而你能够应用部分CSS短命名-不用顾忌命名争辨。上边看一下,提交按钮的4种景况的例

    新葡亰496net 5

    第1步:默许局地成效域

    在css模块中,每多少个文书都以独立编写翻译的,因而你能够接纳一些CSS短命名-不用想念命名争持。上边看一下,提交按键的4种景况的例

    新葡亰496net 6

    example:

    健康写法:

    <style>

    h1.title{ font-size:1.5em;color:red;}

    </sytle>

    <h1 className="title">hello word</h1>

    import styled form 'styled-components'  //引入

    // 定义样式

    const Title = styled.h1`

    font-size: 1.5em;

    color: red;

    `;

    // 应用

    <Title>hello word</Title>

    styled-components写法;

    CSS Modules 模块化方案

    新葡亰496net 7

    CSS Modules 内部通过 [ICSS](css-modules/icss · GitHub) 来缓和体制导入和导出那八个难题。分别对应 :import:export 多个新增添的伪类。

    JavaScript

    :import("path/to/dep.css") { localAlias: keyFromDep; /* ... */ } :export { exportedKey: exportedValue; /* ... */ }

    1
    2
    3
    4
    5
    6
    7
    8
    :import("path/to/dep.css") {
      localAlias: keyFromDep;
      /* ... */
    }
    :export {
      exportedKey: exportedValue;
      /* ... */
    }

     

    但一直运用那多少个相当重要字编制程序太费事,实际项目中非常少会直接行使它们,我们须求的是用 JS 来治本 CSS 的力量。结合 Webpack 的 css-loader 后,就足以在 CSS 中定义样式,在 JS 中程导弹入。
    启用 CSS Modules

    JavaScript

    // webpack.config.js css?modules&localIdentName=[name]__[local]-[hash:base64:5]

    1
    2
    // webpack.config.js
    css?modules&localIdentName=[name]__[local]-[hash:base64:5]

    加上 modules 即为启用,localIdentName 是设置生成样式的命名规则。

    JavaScript

    /* components/Button.css */ .normal { /* normal 相关的装有样式 */ } .disabled { /* disabled 相关的具有样式 */ }

    1
    2
    3
    /* components/Button.css */
    .normal { /* normal 相关的所有样式 */ }
    .disabled { /* disabled 相关的所有样式 */ }

    JavaScript

    // components/Button.js import styles from './Button.css'; console.log(styles); buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    1
    2
    3
    4
    // components/Button.js
    import styles from './Button.css';
    console.log(styles);
    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    生成的 HTML 是

    <button class="button--normal-abc53">Submit</button>

    1
    <button class="button--normal-abc53">Submit</button>

     

    注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName 自动生成的 class 名。在那之中的 abc53 是根据给定算法生成的种类码。经过这么模糊管理后,class 名基本正是不今不古的,大大减弱了项目中样式覆盖的概率。同不经常间在生育条件下修改法则,生成越来越短的 class 名,可以提升 CSS 的压缩率。

    上例中 console 打字与印刷的结果是:

    JavaScript

    Object { normal: 'button--normal-abc53', disabled: 'button--disabled-def886', }

    1
    2
    3
    4
    Object {
      normal: 'button--normal-abc53',
      disabled: 'button--disabled-def886',
    }

    CSS Modules 对 CSS 中的 class 名都做了管理,使用对象来保存原 class 和混淆后 class 的呼应关系。

    经过这几个总结的管理,CSS Modules 完成了以下几点:

    • 全体样式都以 local 的,化解了命名争执和大局污染难题
    • class 名生成准绳配置灵活,能够此来减弱 class 名
    • 只需援用组件的 JS 就能够化解组件全数的 JS 和 CSS
    • 一直以来是 CSS,大致 0 学费

    体制私下认可局地

    应用了 CSS Modules 后,就也正是给各种 class 名外加加了三个 :local,以此来落实样式的局地化,倘令你想切换来全局格局,使用相应的 :global

    :local:global 的差别是 CSS Modules 只会对 :local 块的 class 样式做 localIdentName 准绳管理,:global 的样式编写翻译后不改变。

    JavaScript

    .normal { color: green; } /* 以上与下部等价 */ :local(.normal) { color: green; } /* 定义全局样式 */ :global(.btn) { color: red; } /* 定义八个全局样式 */ :global { .link { color: green; } .box { color: yellow; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .normal {
      color: green;
    }
     
    /* 以上与下面等价 */
    :local(.normal) {
      color: green;
    }
     
    /* 定义全局样式 */
    :global(.btn) {
      color: red;
    }
     
    /* 定义多个全局样式 */
    :global {
      .link {
        color: green;
      }
      .box {
        color: yellow;
      }
    }

    Compose 来构成样式

    对此样式复用,CSS Modules 只提供了独一的点子来拍卖:composes 组合

    JavaScript

    /* components/Button.css */ .base { /* 全体通用的体制 */ } .normal { composes: base; /* normal 其余样式 */ } .disabled { composes: base; /* disabled 别的样式 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* components/Button.css */
    .base { /* 所有通用的样式 */ }
     
    .normal {
      composes: base;
      /* normal 其它样式 */
    }
     
    .disabled {
      composes: base;
      /* disabled 其它样式 */
    }

    JavaScript

    import styles from './Button.css'; buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    1
    2
    3
    import styles from './Button.css';
     
    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    生成的 HTML 变为

    <button class="button--base-fec26 button--normal-abc53">Submit</button>

    1
    <button class="button--base-fec26 button--normal-abc53">Submit</button>

    由于在 .normal 中 composes 了 .base,编写翻译后会 normal 会变成三个class。

    composes 仍可以够构成外界文件中的样式。

    JavaScript

    /* settings.css */ .primary-color { color: #f40; } /* components/Button.css */ .base { /* 全体通用的样式 */ } .primary { composes: base; composes: primary-color from './settings.css'; /* primary 另外样式 */ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* settings.css */
    .primary-color {
      color: #f40;
    }
     
    /* components/Button.css */
    .base { /* 所有通用的样式 */ }
     
    .primary {
      composes: base;
      composes: primary-color from './settings.css';
      /* primary 其它样式 */
    }

     

    对于好多体系,有了 composes 后曾经不复必要Sass/Less/PostCSS。但假设你想用的话,由于 composes 不是业内的 CSS 语法,编写翻译时会报错。就只能利用预管理器自个儿的语法来做样式复用了。
    class 命名技术

    CSS Modules 的命名标准是从 BEM 扩张而来。BEM 把体制名分为 3 个等级,分别是:

    • Block:对应模块名,如 Dialog
    • Element:对应模块中的节点名 Confirm Button
    • Modifier:对应节点相关的情状,如 disabled、highlight

    综上,BEM 最后获得的 class 名字为 dialog__confirm-button--highlight。使用双符号 __-- 是为着和区块内单词间的相间符区分开来。即便看起来有个别意料之外,但 BEM 被特别多的大型项目和团队利用。大家进行下来也很明确这种命名方式。

    CSS Modules 中 CSS 文件名正要对应 Block 名,只须求再思量 Element 和 Modifier。BEM 对应到 CSS Modules 的做法是:

    JavaScript

    /* .dialog.css */ .ConfirmButton--disabled { /* ... */ }

    1
    2
    3
    4
    /* .dialog.css */
    .ConfirmButton--disabled {
      /* ... */
    }

    您也能够不根据完全的命名标准,使用 camelCase 的写法把 Block 和 Modifier 放到一同:

    JavaScript

    /* .dialog.css */ .disabledConfirmButton { }

    1
    2
    3
    /* .dialog.css */
    .disabledConfirmButton {
    }

    何以落到实处CSS,JS变量分享

    注:CSS Modules 中一向不改变量的定义,这里的 CSS 变量指的是 Sass 中的变量。

    地点提到的 :export 关键字能够把 CSS 中的 变量输出到 JS 中。上面演示怎么着在 JS 中读取 Sass 变量:

    JavaScript

    /* config.scss */ $primary-color: #f40; :export { primaryColor: $primary-color; }

    1
    2
    3
    4
    5
    6
    /* config.scss */
    $primary-color: #f40;
     
    :export {
      primaryColor: $primary-color;
    }

     

    JavaScript

    /* app.js */ import style from 'config.scss'; // 会输出 #F40 console.log(style.primaryColor);

    1
    2
    3
    4
    5
    /* app.js */
    import style from 'config.scss';
     
    // 会输出 #F40
    console.log(style.primaryColor);

    CSS 和 JavaScript 历史

    层叠样式表(CSS)是为描述标记语言文书档案的表现样式而产出的。JavaScript 是为了整合图片、插件等零件而创制的一种“胶水语言”。随着发展,JavaScript 扩充、转变,有了新的选择场景。

    Ajax 的出现(二〇〇六)是多个重大的里程碑。那时 Prototype、jQuery、MooTools 等库已经掀起了汪洋的拥护者,共同消除后台跨浏览器数据获得难点。那又掀起了新的标题:怎样保管数据?

    到了 2009 年,Backbone.js 现身,成为了使用状态管理的行当规范。不久后,Knockout 和 Angular 双向绑定的特点迷惑了全部人。之后,React 和 Flux 出现,开启了单页应用(SPA)的新篇章,组件构造选拔。

    好端端的CSS书写方式

    用Suit或BEM命名、一些CSS样式、一段html。代码如下:

    css代码段:

    /* components/submit-button.css */

    .Button { /* all styles for Normal */ }

    .Button--disabled { /* overrides for Disabled */ }

    .Button--error { /* overrides for Error */ }

    .Button--in-progress { /* overrides for In Progress */

    html代码段:

    <button class="Button Button--in-progress">Processing...</button>

    上边代码运维不错,大家有4种状态的类名,BEM命名,幸免了采用嵌套选拔器。使用大写字母开头的单词Button用作接纳器,制止与前面或援用样式的类名争执。並且大家运用--modifier语法来扫除基础样式。

    到今后甘休,那都以一段不错的可保险的代码。但也引进了适度从紧的命名标准。但那也是能用规范CSS,做到的最棒的点子了。

    常规的CSS书写格局

    用Suit或BEM命名、一些CSS样式、一段html。代码如下:

    css代码段:

    /* components/submit-button.css */

    .Button { /* all styles for Normal */ }

    .Button--disabled { /* overrides for Disabled */ }

    .Button--error { /* overrides for Error */ }

    .Button--in-progress { /* overrides for In Progress */

    html代码段:

    <button class="Button Button--in-progress">Processing...</button>

    地点代码运转不错,我们有4种状况的类名,BEM命名,制止了应用嵌套选拔器。使用大写字母开首的单词Button作为接纳器,制止与事先或援引样式的类名争持。况兼大家采纳--modifier语法来打消基础样式。

    到今日了却,那都以一段不错的可保险的代码。但也引进了从严的命名规范。但那也是能用典型CSS,做到的最棒的主意了。

    双面语法很相似,但她俩的要害差异在于体制以往是组件的一有个别了,摆脱了css类名(去类名no-classes)作为组件和其样式的中级步骤这种意况


    CSS Modules 使用本领

    CSS Modules 是对现存的 CSS 做减法。为了追求**简单可控**,小编提出遵照如下原则:

    • 不应用选择器,只利用 class 名来定义样式
    • 不层叠多少个 class,只利用四个 class 把具有样式定义好
    • 不嵌套
    • 使用 composes 组合来兑现复用

    下面两条法规约等于减弱了体制中最灵敏的一部分,初使用者很难接受。第一条实行起来难度十分的小,但第二条假使模块状态过多时,class 数量将倍加上升。

    确定要明了,上边之所以称为提议,是因为 CSS Modules 并不强制你早晚要这样做。听上去有一点格不相入,由于比比较多 CSS 项目设有深厚的野史遗留难点,过多的范围就代表扩大迁移花费和与表面协作的本金。开始时期使用中必将供给部分投降。幸运的是,CSS Modules 这点做的很好:

    1. 假使自己对四个要素运用八个 class 呢?

    没难题,样式依然生效。

    2. 什么样自己在叁个 style 文件中动用同名 class 呢?

    没难点,这一个同名 class 编译后虽说恐怕是随机码,但仍是同名的。

    3. 万一本人在 style 文件中动用了 id 采取器,伪类,标签选择器等呢?

    没难题,全部这一个选用器将不被撤换,维持原状的产出在编写翻译后的 css 中。约等于说 CSS Modules 只会更动 class 名相关样式。

    但注意,上面 3 个“倘若”尽量不要发生

    那么 CSS 呢?

    借用 styled-components 文书档案中的话:

    纯 CSS 的难点在于它发出的至极时代,网址由文书档案组成。一九九一年,网址发出,重要用来交流科学文献,CSS 是布署文献样式的减轻方案。但是未来大家构建的是丰硕的、面向顾客的竞相使用,而 CSS 并不是为此而生的。

    本人不这么认为 。

    CSS 已经迈入到能够满意当代 UI 的供给了。过去十年中出现的新脾气数不完(pseudo-classes、pseudo-elements、CSS variables、media queries、keyframes、combinators、columns、flex、grid、computed values 等等)。

    从 UI 的角度看,“组件”是文书档案中三个独立的部分(<button /> 正是个零部件)。CSS 被设计用来样式化文档,包含具备组件。难题在哪?

    俗话说:“工欲善其事必先利其器”。

    CSS模块书写格局

    利用CSS模块,你不要忧虑使用一些短命名了。能够像上面那样。

    /* components/submit-button.css */

    .normal { /* all styles for Normal */ }

    .disabled { /* all styles for Disabled */ }

    .error { /* all styles for Error */ }

    .inProgress { /* all styles for In Progress */

    看,你绝不在另各地点再去加长长的前缀。为啥能够如此做,大家得以像任何语言一样,不用在该地变量前加长长的前缀,只要把CSS对应的公文名改成submit-botton.css

    那能够让在JS中动用requireimport加载的CSS模块文件,能够被编写翻译出来。

    /* components/submit-button.js */

    import styles from './submit-button.css';

    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    确实在页面使用的样式名,是动态变化的独一标识。CSS模块把文件编写翻译成ICSS格式的公文,这种格式文件能够方便CSS和JS实行通讯。当你运营程序,会获取近似上面包车型大巴代码

    <button class="components_submit_button__normal__abc5436"> Processing...</button>

    赢得近似结果,说明运维成功~

    CSS模块书写情势

    运用CSS模块,你不用顾忌使用一些短命名了。能够像上边那样。

    /* components/submit-button.css */

    .normal { /* all styles for Normal */ }

    .disabled { /* all styles for Disabled */ }

    .error { /* all styles for Error */ }

    .inProgress { /* all styles for In Progress */

    看,你不要在别的地方再去加长长的前缀。为啥能够那样做,我们能够像别的语言一样,不用在本地变量前加长长的前缀,只要把CSS对应的文书名改成submit-botton.css

    那可以让在JS中应用requireimport加载的CSS模块文件,能够被编写翻译出来。

    /* components/submit-button.js */

    import styles from './submit-button.css';

    buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

    诚然在页面使用的体裁名,是动态变化的独一标记。CSS模块把文件编写翻译成ICSS格式的公文,这种格式文件可以低价CSS和JS举行通信。当你运营程序,会获取近似下边的代码

    <button class="components_submit_button__normal__abc5436"> Processing...</button>

    收获近似结果,表明运营成功~

    通过 props 代替 class

    为了服从“去类名”(no-classes)的意见,当需求定义一个组件的一举一动时,styled-component使用质量而不是类名。

    const Title = styled.h1`

         font-size: 1.5em;

         color: ${props=> props.primary ? 'blue' : '#333' };

    `;

    <Title primary>hello word </Title>

    CSS Modules 结合 React 实践

    className 处直接采取 css 中 class 名即可。

    JavaScript

    .root {} .confirm {} .disabledConfirm {}

    1
    2
    3
    .root {}
    .confirm {}
    .disabledConfirm {}

    import classNames from 'classnames'; import styles from './dialog.css'; export default class Dialog extends React.Component { render() { const cx = classNames({ confirm: !this.state.disabled, disabledConfirm: this.state.disabled }); return <div className={styles.root}> <a className={styles.disabledConfirm}>Confirm</a> ... </div> } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import classNames from 'classnames';
    import styles from './dialog.css';
     
    export default class Dialog extends React.Component {
      render() {
        const cx = classNames({
          confirm: !this.state.disabled,
          disabledConfirm: this.state.disabled
        });
     
        return <div className={styles.root}>
          <a className={styles.disabledConfirm}>Confirm</a>
          ...
        </div>
      }
    }

    介意,日常把组件最外层节点对应的 class 名称叫 root。这里运用了 [classnames](https://www.npmjs.com/package/classnames) 库来操作 class 名。

    只要您不想频仍的输入 styles.**,能够试一下 [react-css-modules](gajus/react-css-modules · GitHub),它经过高阶函数的样式来制止重新输入 styles.**

    CSS Modules 结合历史遗留项目进行

    好的技能方案除了作用庞大光彩夺目,还要能成功现存项目能平滑迁移。CSS Modules 在那或多或少上显现的非常灵活。

    外表怎样覆盖局地样式

    当生成混淆的 class 名后,能够化解命名争执,但因为不可能预感最后 class 名,不可能经过日常选用器覆盖。大家今天项目中的实行是能够给组件关键节点加上 data-role 属性,然后通过品质采取器来覆盖样式。

    // dialog.js return <div className={styles.root} data-role='dialog-root'> <a className={styles.disabledConfirm} data-role='dialog-confirm-btn'>Confirm</a> ... </div>

    1
    2
    3
    4
    5
    // dialog.js
      return <div className={styles.root} data-role='dialog-root'>
          <a className={styles.disabledConfirm} data-role='dialog-confirm-btn'>Confirm</a>
          ...
      </div>

     

    JavaScript

    /* dialog.css */ [data-role="dialog-root"] { // override style }

    1
    2
    3
    4
    /* dialog.css */
    [data-role="dialog-root"] {
      // override style
    }

    因为 CSS Modules 只会扭转类选拔器,所以这里的性质选取器没有要求增添 :global

    怎么样与大局样式共存

    前端项目不可制止会引进 normalize.css 或任何一类全局 css 文件。使用 Webpack 可以让全局样式和 CSS Modules 的一对样式和煦共处。上面是我们项目中采用的 webpack 部总局署代码:

    JavaScript

    作品权归我全部。 商业转载请联系作者获得授权,非商业转发请申明出处。 作者:camsong 链接: 来源:知乎 // webpack.config.js 局部 module: { loaders: [{ test: /.jsx?$/, loader: 'babel' }, { test: /.scss$/, exclude: path.resolve(__dirname, 'src/styles'), loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true' }, { test: /.scss$/, include: path.resolve(__dirname, 'src/styles'), loader: 'style!css!sass?sourceMap=true' }] }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    作者:camsong
    链接:http://zhuanlan.zhihu.com/purerender/20495964
    来源:知乎
     
    // webpack.config.js 局部
    module: {
      loaders: [{
        test: /.jsx?$/,
        loader: 'babel'
      }, {
        test: /.scss$/,
        exclude: path.resolve(__dirname, 'src/styles'),
        loader: 'style!css?modules&localIdentName=[name]__[local]!sass?sourceMap=true'
      }, {
        test: /.scss$/,
        include: path.resolve(__dirname, 'src/styles'),
        loader: 'style!css!sass?sourceMap=true'
      }]
    }

    JavaScript

    /* src/app.js */ import './styles/app.scss'; import Component from './view/Component' /* src/views/Component.js */ // 以下为组件相关样式 import './Component.scss';

    1
    2
    3
    4
    5
    6
    7
    /* src/app.js */
    import './styles/app.scss';
    import Component from './view/Component'
     
    /* src/views/Component.js */
    // 以下为组件相关样式
    import './Component.scss';

    目录结构如下:

    JavaScript

    src ├── app.js ├── styles │ ├── app.scss │ └── normalize.scss └── views ├── Component.js └── Component.scss

    1
    2
    3
    4
    5
    6
    7
    8
    src
    ├── app.js
    ├── styles
    │   ├── app.scss
    │   └── normalize.scss
    └── views
        ├── Component.js
        └── Component.scss

    如此有着全局的体制都放到 src/styles/app.scss 中引进就足以了。其余具备目录包罗 src/views 中的样式都以有的的。

    Styled-components

    styled-components 可以用标志模板字面量在 JavaScript 中写 CSS。那样就节省了组件和体裁间的相称——组件由细粒度的样式结构组成,比方:

    import React from 'react'; import styled from 'styled-components'; // Create a <Title> react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a <Wrapper> react component that renders a <section> with // some padding and a papayawhip background const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // Use them like any other React component – except they're styled! <Wrapper> <Title>Hello World, this is my first styled component!</Title> </Wrapper>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    import React from 'react';
    import styled from 'styled-components';
    // Create a <Title> react component that renders an <h1> which is
    // centered, palevioletred and sized at 1.5em
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
    `;
    // Create a <Wrapper> react component that renders a <section> with
    // some padding and a papayawhip background
    const Wrapper = styled.section`
      padding: 4em;
      background: papayawhip;
    `;
    // Use them like any other React component – except they're styled!
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>

    结果:

    新葡亰496net 8

    Live demo

    styled-components 目前是 React 的 趋势 。

    咱俩要理清一件事情:styled-components 只是 CSS 层面包车型地铁中度抽象。它只是深入分析定义在 JavaScript 中的 CSS,然后生成对应 CSS 的 JSX 成分。

    自个儿不爱好那么些样子,因为存在许多误会。

    本人在 IRC、Reddit 和 Discord 上科学商讨了大家利用 styled-components 的彻彻底底的经过,整理了一份选用使用 styled-components 常见原因的列表 。作者叫作 myths。

    Myth #1:幸免全局命名空间和体制冲突

    小编把那条便是 myth 是因为它听上去就好像在此之前这个主题素材并未有收获消除同样。CSS Modules、Shadow DOM 还应该有好多命名公约(比如 BEM)已经早已在社区中国化学工业进出口总公司解了那么些主题素材。

    styled-components(就好像 CSS modules)只是替人达成了命名的天职。人总会犯错,计算机犯错少点而已。

    但就自作者来说,那并非应用 styled-components 的好理由。

    Myth 2:styled-components 能够分明代码

    日常来讲伴随着如下的例子:

    <TicketName></TicketName> <div className={styles.ticketName}></div>

    1
    2
    <TicketName></TicketName>
    <div className={styles.ticketName}></div>

    第一——关系极小。差距基本得以忽略。

    协理,说的也不对。字符数量决定于体制命名。

    <TinyBitLongerStyleName></TinyBitLongerStyleName> <div className={styles.longerStyleName}></div>

    1
    2
    <TinyBitLongerStyleName></TinyBitLongerStyleName>
    <div className={styles.longerStyleName}></div>

    那同一适用于本文之后的构造样式(Myth 5:给组件设置标准样式更简明)。styled-components 只是在大许多大旨组件的情状下稍胜一筹。

    Myth 3:styled-components 使人更保护语义化

    前提就不对。样式和语义化代表着分裂的标题,要求不用的回答方案。援引 Adam Morse(mrmrs)的话:

    剧情语义化和视觉样式 从未点儿关系。当作者用乐高建筑东西时,作者尚未会想“那是引擎的一有些”,作者想着“这是个 1×4 的日光黄乐高,我用来随意做什么样都行”。不论水下潜水营地照旧飞机——笔者清楚地理解怎么用那么些乐高块。

    (猛烈提出读一读 Adam 关于 可拓展 CSS 的文章)

    笔者们还能比如看看相互是不是相关。

    示例:

    <PersonList> <PersonListItem> <PersonFirstName>Foo</PersonFirstName> <PersonLastName>Bar</PersonLastName> </PersonListItem> </PersonList>

    1
    2
    3
    4
    5
    6
    <PersonList>
      <PersonListItem>
        <PersonFirstName>Foo</PersonFirstName>
        <PersonLastName>Bar</PersonLastName>
      </PersonListItem>
    </PersonList>

    语义化是要采取精确的竹签构造标志。你能知道那几个零件会渲染成什么 HTML 标签吗?不,你不精通。

    和底下这段代码相比下:

    <ol> <li> <span className={styles.firstName}>Foo</span> <span className={styles.lastName}>Bar</span> </li> </ol>

    1
    2
    3
    4
    5
    6
    <ol>
      <li>
        <span className={styles.firstName}>Foo</span>
        <span className={styles.lastName}>Bar</span>
      </li>
    </ol>

    Myth 4:扩充样式更易于

    v1 版本能够用 styled(StyledComponent) 拓展样式;v2 引入了 extend 方法来张开已存在的样式,举个例子:

    const Button = styled.button` padding: 10px; `; const TomatoButton = Button.extend` color: #f00; `;

    1
    2
    3
    4
    5
    6
    const Button = styled.button`
      padding: 10px;
    `;
    const TomatoButton = Button.extend`
      color: #f00;
    `;

    那非常好。不过你能够在 CSS 中达成(也许利用 CSS 模块组合 或 SASS 承接混合 @extend)。

    button { padding: 10px; } button.tomato-button { color: #f00; }

    1
    2
    3
    4
    5
    6
    button {
      padding: 10px;
    }
    button.tomato-button {
      color: #f00;
    }

    莫非不及 JavaScript 轻易?

    Myth 5:给组件设置标准样式更简明

    那一点是说您能够依靠组件属性给组件设置样式,比方:

    <Button primary /> <Button secondary /> <Button primary active={true} />

    1
    2
    3
    <Button primary />
    <Button secondary />
    <Button primary active={true} />

    那在 React 中很有用。究竟组件行为就是由属性决定的。给属性值直接绑定样式有含义呢?恐怕吧。可是来探视组件的贯彻代码:

    styled.Button` background: ${props => props.primary ? '#f00' : props.secondary ? '#0f0' : '#00f'}; color: ${props => props.primary ? '#fff' : props.secondary ? '#fff' : '#000'}; opacity: ${props => props.active ? 1 : 0}; `;

    1
    2
    3
    4
    5
    styled.Button`
      background: ${props => props.primary ? '#f00' : props.secondary ? '#0f0' : '#00f'};
      color: ${props => props.primary ? '#fff' : props.secondary ? '#fff' : '#000'};
      opacity: ${props => props.active ? 1 : 0};
    `;

    应用 JavaScript 按标准创建样式表是挺强大的,可是那也意味样式难以知晓,相比之下 CSS:

    button { background: #00f; opacity: 0; color: #000; } button.primary, button.seconary { color: #fff; } button.primary { background: #f00; } button.secondary { background: #0f0; } button.active { opacity: 1; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    button {
      background: #00f;
      opacity: 0;
      color: #000;
    }
    button.primary,
    button.seconary {
      color: #fff;
    }
    button.primary {
      background: #f00;
    }
    button.secondary {
      background: #0f0;
    }
    button.active {
      opacity: 1;
    }

    那般 CSS 更简便易行(229 VS 222 字符),(个人以为)也更易于领悟。其余,还足以用预管理器使 CSS 分组、更加短:

    button { background: #00f; opacity: 0; color: #000; &.primary, &.seconary { color: #fff; } &.primary { background: #f00; } &.secondary { background: #0f0; } &.active { opacity: 1; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    button {
      background: #00f;
      opacity: 0;
      color: #000;
      
      &.primary,
      &.seconary {
        color: #fff;
      }
      &.primary {
        background: #f00;
      }
      &.secondary {
        background: #0f0;
      }
      &.active {
        opacity: 1;
      }
    }

    Myth 6:有助于代码组织

    几人告诉本人他们喜欢 styled-components,因为它能够让体制和 JavaScript 在叁个文件中。

    笔者领会同一组件有相当多文本很烦,可是把体制和符号塞进二个文件的艺术很差。那样不独有版本调节难以回看,并且装有组件都亟需滚动十分短一段距离,并非轻便地点下按键。

    假诺应当要把 CSS 和 JavaScript 放在三个文书中, 能够思索选择 css-literal-loader。它能够在 build 时用 extract-text-webpack-plugin 提取 CSS,用规范 loader 配置管理 CSS。

    Myth 7:DX 很有利,那工具太棒了!

    很明显你没用过 styled-components

    • 一经样式写错了,整个 app 会崩溃,并出口长长的调用栈错误(v2 更奇葩)。比较之下,CSS “style error” 只是因素渲染地不对而已。
    • 要素没有 className,所以调节和测量检验时不得不去对待 React 成分树和 DevTools DOM 树(v2 能够用 babel-plugin-styled-components 定位)。
    • 尚未语法检查(有一款 体制检查插件 正在开采中)。
    • 违法的体制会被忽略(比方:clear: both; float left; color: #f00; 不会报 error 或 warning,只可以祈祷调节和测量检验好运了,即使看了 styled-components 源码,依旧花了本身 15 分钟查看调用栈。最终笔者在闲聊中把代码粘出来寻求援救,才有人提醒是少了:。你放在心上到了呢?)
    • 帮忙语法高亮、代码补全以及另外 IDE 细节的 IDE并非常少。如若您在财经或政坛机构工作,很只怕不能够选取 Atom IDE。

    Myth 8:质量越来越好,bundle 越来越小

    • 事实是,styled-components 不能领取静态 CSS 文件(比如动用 )。那意味着浏览器不能够起始分解样式直到 styled-components 解析、加载到 DOM上。
    • 贫乏文件分别意味着非常小概分开缓存 CSS 和 JavaScript。
    • 全部样式化的组件都会附加包装一层 HoC。那是不要求的脾气损耗。因为临近的结构破绽,笔者终止了  
    • 因为 HOC,假诺在服务端渲染,会导致标志文书档案大相当多。
    • 有 keyframes, 作者也无需用动态样式值做动画。

    Myth 9:它能够支付响应式组件

    这说的是依附情状给组件设置样式的力量,比方父容器偏移量、子成分数量等。

    首先,styled-components 和响应式没什么关系。那已经超先生过了这几个宗旨的限量。这种景况最棒直接设置组件的 style,以幸免额外的基金。

    只是,成分查询是个有趣的主题材料,也逐步改为 CSS 中的三个高热话题,首若是 EQCSS 等类似项目。成分查询和 @media queries 在语法上很相像,只是成分查询操作实际一点因素。

    <a href="; {selector} and {condition} [ and {condition} ]* { {css} }

    1
    <a href="http://www.jobbole.com/members/feiguohai46">@element</a> {selector} and {condition} [ and {condition} ]* { {css} }

    {selector} 是 CSS 选拔器对应着一或八个元素。比如:#id 或 .class

    {condition} 由尺寸和值组成。

    {css} 能够富含:任何合法的 CSS 法规。(举个例子:#id div { color: red }

    要素查询能够用 min-widthmax-width新葡亰496net:未来的编码方式,不要再在。、min-heightmax-heightmin-charactersmax-charactersmin-childrenmax-childrenmin-linesmax-linesmin-scroll-xmax-scoll-x 等 (详见 )条件给元素设置样式。

    有朝一日类似 EQCSS 的从头到尾的经过也会产出在 CSS 标准中的(希望这样)。

    取名约定

    抑或拿按钮的事例来讲

    /* components/submit-button.css */

    .normal { /* all styles for Normal */ }

    .disabled { /* all styles for Disabled */ }

    .error { /* all styles for Error */ }

    .inProgress { /* all styles for In Progress */

    持有类名都是独自的,不是二个是基类名,别的的用来修改。在CSS模块中,全部类必需回顾具备的属性和体制。那令你在JS中接纳类名时有非常大的比不上。

    /* 不要像那样 */

    `class=${[styles.normal, styles['in-progress']].join(" ")}`

    /* 区别之处是利用单独的类名 */

    `class=${styles['in-progress']}`

    /* 最棒利用驼峰式 */

    `class=${styles.inProgress}`

    当然,倘使您是遵纪守法级成员代表码量来收钱的,你能够依照你的方法继续。

    命名约定

    仍旧拿开关的例子来说

    /* components/submit-button.css */

    .normal { /* all styles for Normal */ }

    .disabled { /* all styles for Disabled */ }

    .error { /* all styles for Error */ }

    .inProgress { /* all styles for In Progress */

    负有类名都是单独的,不是一个是基类名,别的的用来修改。在CSS模块中,全数类必需总结全体的属性和体制。那令你在JS中使用类名时有比相当的大的两样。

    /* 不要像那样 */

    `class=${[styles.normal, styles['in-progress']].join(" ")}`

    /* 不一致之处是行使单独的类名 */

    `class=${styles['in-progress']}`

    /* 最佳利用驼峰式 */

    `class=${styles.inProgress}`

    自然,假诺您是规行矩步级成员代表码量来收钱的,你能够依据你的办法连续。

    总结

    CSS Modules 很好的消除了 CSS 近期面前遭受的模块化难点。协助与 Sass/Less/PostCSS 等搭配使用,能丰硕利用现成手艺积攒。同不平时候也能和全局样式灵活搭配,便于项目中国和东瀛益搬迁至 CSS Modules。CSS Modules 的完结也属轻量级,今后有正式实施方案后方可低本钱迁移。假若你的成品中正好碰见类似主题素材,非常值得一试。

    1 赞 2 收藏 评论

    新葡亰496net 9

    等下!

    绝大多数剧情都长时间有效,无论是社区、React 改造或 styled-components 本人。但意义何在?CSS 已被相近协理,有一大波的社区,也确实行之有效。

    正文的目标并不是阻止读者在 JavaScript 中运用“CSS”或是 styled-componentsstyled-components 三个很棒的使用情况是:更加好的跨平台扶助性。不要因为破绽非常多的说辞使用它。

    一个React例子

    这里不是有关React特有的CSS模块。但React提供了,在行使CSS模块时,特别美好的体会。上面做三个复杂点的例子。

    /* components/submit-button.jsx */

    import { Component } from 'react';

    import styles from './submit-button.css';

    export default class SubmitButton extends Component {

    render() {

    let className, text = "Submit"

    if (this.props.store.submissionInProgress) {

    className = styles.inProgress text = "Processing..."

    } else if (this.props.store.errorOccurred) {

    className = styles.error

    } else if (!this.props.form.valid) {

    className = styles.disabled

    } else {

    className = styles.normal

    }

    return <button className={className}>{text}</button>

    }

    }

    您能够选取你的体裁,不用再忧郁全局冲突,让您能够小心于组件开采,并非在写样式上。一旦离开在此以前的每每在CSS,js之间切换方式,你就再也不想重回了。

    但那只是起初,当你着想体制统一时,CSS模块又无助使用了。

    一个React例子

    这里不是关于React特有的CSS模块。但React提供了,在应用CSS模块时,非常美好的体会。上边做一个复杂点的例证。

    /* components/submit-button.jsx */

    import { Component } from 'react';

    import styles from './submit-button.css';

    export default class SubmitButton extends Component {

    render() {

    let className, text = "Submit"

    if (this.props.store.submissionInProgress) {

    className = styles.inProgress text = "Processing..."

    } else if (this.props.store.errorOccurred) {

    className = styles.error

    } else if (!this.props.form.valid) {

    className = styles.disabled

    } else {

    className = styles.normal

    }

    return <button className={className}>{text}</button>

    }

    }

    您能够采用你的样式,不用再顾虑全局争执,令你能够小心于组件开采,并不是在写样式上。一旦离开在此之前的往往在CSS,js之间切换方式,你就再也不想再次回到了。

    但这只是开始,当你着想体制统临时,CSS模块又无语使用了。

    这便是说我们应有用怎么着吗?

    使用 Shadow DOM v1 还为风尚早(四分之一 援救率)。CSS 应遵守命名合同(提出 BEM),若是忧虑类名争辩(或无意用 BEM),能够用 CSS modules。假使您在开荒 React web,思虑用 babel-plugin-react-css-modules。如若在开辟 React Native,styled-components 更好。

    感谢 Max Stoiber。

    打赏协助本身翻译越来越多好小说,多谢!

    打赏译者

    第2步 一切皆为组件

    前方提到CSS模块需求各种状态都带有全部所需的体裁。

    此处假让你须求三个情形,大家比较一下CSS模块和BEM命名。

    /* BEM Style */

    innerHTML = `<button class="Button Button--in-progress">`

    /* CSS Modules */

    innerHTML = `<button class="${styles.inProgress}">`

    等一下,如何在全体情形分享样式呢?答案是CSS模块的最精锐工具-组件

    .common { /* all the common styles you want */ }

    .normal { composes: common; /* anything that only applies to Normal */ }

    .disabled { composes: common; /* anything that only applies to Disabled */ }

    .error { composes: common; /* anything that only applies to Error */ }

    .inProgress { composes: common; /* anything that only applies to In Progress */ }

    关键词composes指出.normal包含.common中的样式,就像是sass里的@extend主要词一样。sass是通过重写css采用器来落成的。css模块则是经过更换js中利用的类名来落到实处。

    第2步 一切皆为组件

    前面提到CSS模块需求每个状态都包涵全数所需的样式。

    那边若是你须求七个状态,我们比较一下CSS模块和BEM命名。

    /* BEM Style */

    innerHTML = `<button class="Button Button--in-progress">`

    /* CSS Modules */

    innerHTML = `<button class="${styles.inProgress}">`

    等一下,怎么样在具有意况分享样式呢?答案是CSS模块的最庞大工具-组件

    .common { /* all the common styles you want */ }

    .normal { composes: common; /* anything that only applies to Normal */ }

    .disabled { composes: common; /* anything that only applies to Disabled */ }

    .error { composes: common; /* anything that only applies to Error */ }

    .inProgress { composes: common; /* anything that only applies to In Progress */ }

    关键词composes指出.normal包含.common中的样式,就疑似sass里的@extend重在词同样。sass是透过重写css选取器来达成的。css模块则是因而转移js中使用的类名来落成。

    打赏帮衬作者翻译更加多好文章,感激!

    任选一种支付办法

    新葡亰496net 10 新葡亰496net 11

    2 赞 4 收藏 评论

    SASS:

    使用后边的BEM例子,使用部分SASS的@extend

    .Button--common { /* font-sizes, padding, border-radius */ }

    .Button--normal { @extends .Button--common; /* blue color, light blue background */}

    .Button--error { @extends .Button--common; /* red color, light red background */}

    这将编写翻译为

    .Button--common, .Button--normal, .Button--error { /* font-sizes, padding, border-radius */ }

    .Button--normal { /* blue color, light blue background */ }

    .Button--error { /* red color, light red background */ }

    你只必要在您的竹签上引用二个类名,能够拿走通用的和唯有的体裁。功效极壮大,但您不能够不精晓,那也设有着异样意况和陷阱。HugoGiraudel 汇总了一部分难点,想打听更加多,请点击《为何你应该制止选拔SASS的@extend》

    SASS:

    应用前边的BEM例子,使用部分SASS的@extend

    .Button--common { /* font-sizes, padding, border-radius */ }

    .Button--normal { @extends .Button--common; /* blue color, light blue background */}

    .Button--error { @extends .Button--common; /* red color, light red background */}

    那将编写翻译为

    .Button--common, .Button--normal, .Button--error { /* font-sizes, padding, border-radius */ }

    .Button--normal { /* blue color, light blue background */ }

    .Button--error { /* red color, light red background */ }

    您只须求在你的价签上引用叁个类名,可以获得通用的和独有的体制。功效很有力,但你必得理解,那也存在着独特别情报形和陷阱。HugoGiraudel 汇总了有个别难点,想通晓更加多,请点击《缘何您应有幸免使用SASS的@extend》

    有关小编:古鲁伊

    新葡亰496net 12

    立志做一名有格调的前后相继媛 个人主页 · 笔者的篇章 · 34

    新葡亰496net 13

    使用CSS模块

    composes重大词和@extend选择情势类似,但做事议程是分化的。看个例子

    .common { /* font-sizes, padding, border-radius */ }

    .normal { composes: common; /* blue color, light blue background */ }

    .error { composes: common; /* red color, light red background */ }

    在浏览器团长会被编译为

    .components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

    .components_submit_button__normal__def6547 { /* blue color, light blue background */ }

    .components_submit_button__error__1638bcd { /* red color, light red background */ }

    在js代码中,import styles from "./submit-button.css"将得到

    styles: {
    common: "components_submit_button__common__abc5436",
    normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547", error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
    }

    恐怕使用styles.normalstryles.error,在DOM中将被渲染为五个类名

    <button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit</button>

    这就是composes的法力,你能够统一几个样式,但不用去修改你的JS代码,也不会重写你的CSS采用器。

    使用CSS模块

    composes根本词和@extend选拔办法类似,但专门的工作措施是见仁见智的。看个例证

    .common { /* font-sizes, padding, border-radius */ }

    .normal { composes: common; /* blue color, light blue background */ }

    .error { composes: common; /* red color, light red background */ }

    在浏览器中校会被编写翻译为

    .components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }

    .components_submit_button__normal__def6547 { /* blue color, light blue background */ }

    .components_submit_button__error__1638bcd { /* red color, light red background */ }

    在js代码中,import styles from "./submit-button.css"将得到

    styles: {
    common: "components_submit_button__common__abc5436",
    normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547", error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
    }

    抑或利用styles.normalstryles.error,在DOM校官被渲染为多少个类名

    <button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit</button>

    这就是composes的法力,你可以统一多个样式,但不用去修改你的JS代码,也不会重写你的CSS采纳器。

    第3步.文件间分享代码

    使用SASS或LESS工作,通过@import来援用同三个做事空间的文本。你能够注脚变量,函数,并在其他文件中使用。很准确的主意,但在一一差别的门类中,变量命名有非常大可能率争论。那么你就得重构你的代码,编写如variables.scsssettings.scss,你也不驾驭哪些组件正视于如何个变量了。你的settings文件会变得非常的大。

    也会有更加好的化解方案(《接纳Webpack创设越来越小巧的CSS》),但由于SASS的大局属性,照旧有相当的大的限定。

    CSS模块叁回只运维叁个单独的公文,由此不会污染全局功效域。js代码用利用importrequire来引用注重,CSS模块使用compose从另四个文书援用样式。

    /* colors.css */

    .primary { color: #720; }

    .secondary { color: #777; }/* other helper classes... */

    /* submit-button.css */

    .common { /* font-sizes, padding, border-radius */ }

    .normal { composes: common; composes: primary from "../shared/colors.css"; }

    动用组件,大家得以像援用本地类名同样,援用colors.css文件的类。何况,组件变化的类名在出口时会被改成,但CSS文件自个儿并不转换,composes块也会在扭转浏览器端CSS以前被删去。

    /* colors.css */
    .shared_colors__primary__fca929 { color: #720; }
    .shared_colors__secondary__acf292 { color: #777; }

    /* submit-button.css */
    .components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
    .components_submit_button__normal__def6547 {}

     

    <button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button>

     

    实在,在浏览器端,normal未有本身的样式。那是好事情,你能够增加新的语义化的靶子,但不用去增添CSS样式。大家仍是能够做得更加的多一些,

    在全站开荒中扩张类名和视觉的一致性,在浏览器端裁减年体育制代码的大小。

    旁注:能够选取csso检查评定并移除空类。

    第3步.文件间分享代码

    使用SASS或LESS工作,通过@import来援用同二个做事空间的公文。你可以注明变量,函数,并在其他文件中使用。特不错的点子,但在每一种分歧的品种中,变量命名有十分大希望争论。那么你就得重构你的代码,编写如variables.scsssettings.scss,你也不晓得哪些组件信赖于怎么着个变量了。你的settings文件会变得非常的大。

    也会有更加好的解决方案(《行使Webpack塑造越来越精细的CSS》),但出于SASS的全局属性,照旧有十分大的界定。

    CSS模块一遍只运维三个独立的文件,由此不会污染全局功能域。js代码用利用importrequire来引用信赖,CSS模块使用compose从另三个文本引用样式。

    /* colors.css */

    .primary { color: #720; }

    .secondary { color: #777; }/* other helper classes... */

    /* submit-button.css */

    .common { /* font-sizes, padding, border-radius */ }

    .normal { composes: common; composes: primary from "../shared/colors.css"; }

    运用组件,大家能够像援引当地类名同样,援用colors.css文本的类。并且,组件变化的类名在输出时会被改动,但CSS文件本人并不扭转,composes块也会在转移浏览器端CSS从前被删除。

    /* colors.css */
    .shared_colors__primary__fca929 { color: #720; }
    .shared_colors__secondary__acf292 { color: #777; }

    /* submit-button.css */
    .components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
    .components_submit_button__normal__def6547 {}

     

    <button class="shared_colors__primary__fca929 components_submit_button__common__abc5436 components_submit_button__normal__def6547"> Submit </button>

     

    事实上,在浏览器端,normal没有自个儿的体制。那是好事情,你能够增加新的语义化的对象,但不用去增添CSS样式。大家仍是能够做得越来越多一点,

    在全站开采中加进类名和视觉的一致性,在浏览器端收缩体制代码的深浅。

    旁注:能够运用csso检查评定并移除空类。

    第4步:单一职分模块

    组件的庞大之处在于描述二个要素是怎么,而不修饰它的体制。它以一种分化的不二等秘书籍来映射页面实体(元素)和体裁实体(样式准绳)。

    看贰个旧的CSS例子

    .some_element { font-size: 1.5rem; color: rgba(0,0,0,0); padding: 0.5rem; box-shadow: 0 0 4px -2px; }

    叁个要素,一些样式,很简短。固然那样,依然存在一些难点:color,font-size,box-shadow,padding,那几个都在此间钦点了,但无法在任何地方使用。

    咱俩用SASS重构一下。

    $large-font-size: 1.5rem;
    $dark-text: rgba(0,0,0,0);
    $padding-normal: 0.5rem;
    @mixin subtle-shadow { box-shadow: 0 0 4px -2px; }
    .some_element {
    @include subtle-shadow;
    font-size: $large-font-size;
    color: $dark-text;
    padding: $padding-normal;
    }

    比旧的CSS样式有异常的大的考订,我们只是概念了比很少的一有些。事实上像$large-font-size是排版,$padding-normal是布局,那个都唯有用名字表明含义,不会在别的地点运作。如若要声贝拉米(Bellamy)个box-shadow变量,但它并不可能发布自己含义,这时就亟须选拔@mixin@extend了。

    第4步:单一职务模块

    组件的兵不血刃之处在于描述二个要素是什么样,而不修饰它的体制。它以一种分裂的不二等秘书籍来映射页面实体(成分)和样式实体(样式法规)。

    看二个旧的CSS例子

    .some_element { font-size: 1.5rem; color: rgba(0,0,0,0); padding: 0.5rem; box-shadow: 0 0 4px -2px; }

    七个要素,一些样式,很简短。纵然那样,照旧存在一些主题材料:color,font-size,box-shadow,padding,这个都在那边内定了,但无可奈何在其他地点选用。

    大家用SASS重构一下。

    $large-font-size: 1.5rem;
    $dark-text: rgba(0,0,0,0);
    $padding-normal: 0.5rem;
    @mixin subtle-shadow { box-shadow: 0 0 4px -2px; }
    .some_element {
    @include subtle-shadow;
    font-size: $large-font-size;
    color: $dark-text;
    padding: $padding-normal;
    }

    比旧的CSS样式有非常大的苦心孤诣,大家只是概念了非常少的一片段。事实上像$large-font-size是排版,$padding-normal是布局,这几个都只是用名字表明含义,不会在别的地方运作。假诺要声圣元个box-shadow变量,但它并不可能公布自己含义,那时就非得采纳@mixin@extend了。

    使用CSS模块

    因此选用组件,大家得以在组件中,注释写明哪些能够重复使用的类名。

    .element {
    composes: large from "./typography.css";
    composes: dark-text from "./colors.css";
    composes: padding-all-medium from "./layout.css";
    composes: subtle-shadow from "./effect.css";
    }

    使用文件系统,并不是命名空间,来划分不一样用途的体制。自然会出现援引五个单纯用途的文件。

    假如您想从八个文件中援引多少个类,这里有贰个方便的不二诀要:

    /* this short hand: */
    .element {
    composes: padding-large margin-small from "./layout.css";
    }
    /* is equivalent to: */
    .element {
    composes: padding-large from "./layout.css";
    composes: margin-small from "./layout.css";
    }

    让你在网址开辟上,每一样视觉对应二个类名。用地点的秘技,来支付你的网址,变为一种大概。

    .article {
    composes: flex vertical centered from "./layout.css";
    }
    .masthead {
    composes: serif bold 48pt centered from "./typography.css";
    composes: paragraph-margin-below from "./layout.css";
    }
    .body {
    composes: max720 paragraph-margin-below from "layout.css";
    composes: sans light paragraph-line-height from "./typography.css";
    }

    那是一种自个儿风野趣一发追究的技艺。在作者眼里,它整合了像Tachyons的原子CSS技术,像Semantic UI体制类名的可读性,单一任务等优势。

    但CSS模块的传说才刚刚最初,希望您能去在今后或以后使用它,并传播它。

    使用CSS模块

    经过应用组件,大家得以在组件中,注释写明哪些能够重复使用的类名。

    .element {
    composes: large from "./typography.css";
    composes: dark-text from "./colors.css";
    composes: padding-all-medium from "./layout.css";
    composes: subtle-shadow from "./effect.css";
    }

    行使文件系统,实际不是命名空间,来划分不一致用途的体裁。自然会冒出援引多少个单纯用途的文件。

    假如您想从一个文书中引用多少个类,这里有三个便利的不二等秘书诀:

    /* this short hand: */
    .element {
    composes: padding-large margin-small from "./layout.css";
    }
    /* is equivalent to: */
    .element {
    composes: padding-large from "./layout.css";
    composes: margin-small from "./layout.css";
    }

    使您在网址开拓上,各项视觉对应一个类名。用地点的点子,来开采你的网址,变为一种只怕。

    .article {
    composes: flex vertical centered from "./layout.css";
    }
    .masthead {
    composes: serif bold 48pt centered from "./typography.css";
    composes: paragraph-margin-below from "./layout.css";
    }
    .body {
    composes: max720 paragraph-margin-below from "layout.css";
    composes: sans light paragraph-line-height from "./typography.css";
    }

    那是一种自己有意思味更加的搜求的本领。以作者之见,它结合了像Tachyons的原子CSS技术,像Semantic UI体制类名的可读性,单一职责等优势。

    但CSS模块的故事才刚刚最先,希望你能去在当今或以往应用它,并传到它。

    上手

    透过利用CSS模块,希望能接济您和您的集体,就能够以沟通当前的CSS知识和制品,又有啥不可更安适,更便捷地成功职业。大家早就竭尽保持语法的简单,并写了某些例证,当您能够选择这一个事例里的代码时,你就能够应用它实行职业了。这里有一对关于Webpack,JSPM和Browseriry体系的DEMO,希望对你有着帮助。我们一直看有哪些新的条件得以运作CSS模块:正在适配服务器端NODEJS和Rails。

    为了使业务更简便易行,这里做了三个Plunkr,可以直接动手,不用安装。开首吧

     新葡亰496net 14

    设若你计划选取了,可以看一看CSS模块源码,假诺有怎么着难题,能够在issue里进行琢磨。CSS模块组,规模小,不能够包蕴全体的接纳场景。

    但愿你们的钻探。

    祝:写样式开心。

    原文:CSS Modules

    最先的文章链接:

    上手

    透过动用CSS模块,希望能帮助您和您的团伙,即能够交换当前的CSS知识和制品,又能够更舒适,更加高速地形成专门的学业。我们早就竭尽保持语法的回顾,并写了有的例证,当您能够运用那几个事例里的代码时,你就足以行使它实行职业了。这里有部分关于Webpack,JSPM和Browseriry花色的DEMO,希望对你富有助于。咱们一直看有哪些新的条件得以运作CSS模块:正在适配服务器端NODEJS和Rails。

    为了使业务更简便易行,这里做了贰个Plunkr,能够直接动手,不用安装。起先吧

     新葡亰496net 15

    假若你希图利用了,能够看一看CSS模块源码,假设有如何难点,能够在issue里实行研讨。CSS模块组,规模小,不恐怕包含全数的采用场景。

    梦想你们的斟酌。

    祝:写样式快乐。

    原文:CSS Modules

    原稿链接:

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:未来的编码方式,不要再在

    关键词:

上一篇:新葡亰496netBootstrap基础学习,学习笔记9

下一篇:没有了