始于编制CSS

开班编制CSS

2013/09/10 · CSS · 1
评论 ·
CSS

原稿出处: Krasimir
Tsonev   译文出处:w3cplus(@w3cplus)   

始于编制CSS。你绝不觉得CSS没什么首要可言?目前几年他改成一个热门的话题,很多少人都在议论她。CSS并不是一个简约的工作,前端开发者可以利用她将页面制作的更佳美丽。看得更远一些,我们更关爱的是网站的质量以及怎么样制作出更好的网站。在本文中,我想分享自个儿近日几个月的学到的关于于CSS编码的文化。作为一个程序员,我的确感兴趣的工作是框架(Architectural)部分。我认为写CSS应该须要去改变,为此我深挖了好多学问。我查找了好的先后、工作流和条件。这篇小说将指导我们和CSS一起旅行,很多人都说写CSS并不是编程,我就不容许,我说写CSS同样是有趣的,富有挑衅性的。

  • 为啥要分层?
  • SMACSS
  • BEM
  • SUIT
  • ACSS

为啥要CSS模块化?

你是否为class命名而感觉到抑郁? 

你是或不是有怕跟外人利用同样class名而感觉到担忧? 

你是或不是因层级结构不明晰而深感悲伤? 

您是否因代码难以复用而感到难受?

您是或不是因为common.css的极大而感到恐惧?

一旦有,恭喜你来对了地点!本文仲为你一一化解这个难点!

缘何要CSS模块化?

您是还是不是为class命名而倍感郁闷? 

您是还是不是有怕跟外人利用同样class名而感觉到担忧? 

你是不是因层级结构不明晰而深感不快? 

您是否因代码难以复用而感到痛苦?

你是否因为common.css的极大而感到恐惧?

只要有,恭喜您来对了地方!本文仲为你一一解决这一个难点!

CSS预处理器

亚洲必赢官网 1

让咱们一同面对呢,在世界上写CSS并不是一件可笑的业务。CSS预处理器看起来就好像CSS,但他更像一个魔术师一样,使用部分魔法会暴发一蹴而就的CSS代码。那让您的样多和浏览器之间新扩大了一层,这样不是更为的不好吗?看上去是那般,但真相不是那样的,因为CSS预处理器提供了有的着实有效的性情。

原因
  • CSS有语义化的命名约定和CSS层的离别,将牵动它的可扩张性,质量的增强和代码的协会管制
  • 大方的体裁,覆盖、权重和无数!important,分好层可以让协会命名统一标准,方便维护
  • 有权利感的去命名你的采纳器
那就是说怎样缓解CSS命名难点?

俺们看一下CSS是怎么规范的:使用有意义的或通用的ID和class命名。ID和class的命名应反映该因素的职能或行使通用名称,而毫不用抽象的生硬的命名。反映要素的应用目的是首选;使用通用名称代表该因素不表特定意义,与其同级成分无异,平常是用于扶持命名;使用作用性或通用的称谓能够更适用于文档或模版变化的场所。

常用命名(多记多查英文单词):page、wrap、layout、header(head)、footer(foot、ft)、
content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、
title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

注:类型选用器防止同时使用标签、ID和class作为永恒一个要素选取器;从性质上考虑也应尽量减弱采用器的层级。

那么怎么样缓解CSS命名难题?

俺们看一下CSS是怎么规范的:使用有含义的或通用的ID和class命名。ID和class的命名应反映该因素的功效或应用通用名称,而并非用抽象的别扭的命名。反映要素的接纳目标是首选;使用通用名称代表该因素不表特定意义,与其同级成分无异,平日是用于支援命名;使用效用性或通用的名目可以更适用于文档或模版变化的情形。

常用命名(多记多查英文单词):page、wrap、layout、header(head)、footer(foot、ft)、
content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、
title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

注:类型采取器防止同时选取标签、ID和class作为定点一个元素拔取器;从质量上考虑也应尽量减弱选拔器的层级。

连接(Concatenation)

我认为最有价值的事物是连接你的文书。我相信,你知道使用@import来引用你的.css文件,告诉浏览器获取这几个文件。那样做,浏览器须求追加一个请求,那样有点麻烦,因为您可能有无数个这么的文书。扩充额外的哀求,使你的程序质量变得更低。即便您使用CSS预处理器语言,这几个标题将不会存在。他们只会编译你样式文件中单个.css文件。

SMACSS

SMACSS(Scalable and Modular Architecture for CSS
可增加的模块化架构的CSS)像OOCSS一样以调减重复样式为底蕴。然则SMACSS使用一套七个层次来划分CSS给项目拉动更结构化的法子:

  • Base 设定标签成分的预设值 PS:html{} input[type=text]{}
  • Layout 整个网站的 ‘大架构’ 的外观 PS:#header{margin: 30px 0;}
  • Module 应用在不一致页面公共模块 PS:.button{}
  • State 定义成分不相同的处境 PS:.nav-main{}
  • Theme 画面上所有 ‘主视觉’ 的概念 PS:border-color、background-image
怎么创设结构清晰的CSS?

我们都说CSS学和写都简单,那么写了连年CSS的同室是或不是有静下来思考过,自个儿写CSS是有相比系统的和具备一定专业的,而不是神不守舍的写CSS。此外就是和谐写的CSS在集体中,其他同学是还是不是能寓目代码就精通您写的是怎么?假设没有,那不仿看看那里涉及的部分概念与思考,比如:Sass
、SCSS、LESS、BEM、OOCSS、AMCSS等。让大家一起来长远明白css吧?

  • 先是精通一下BEM(我个人对比喜欢的)

BEM的意趣就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提议的一种前端命名方法论。那种高超的命名格局让您的CSS类对其余开发者来说越发透明而且更有意义。BEM命名约定尤其严俊,而且富含更加多的信息,它们用于一个公司开发一个耗时的大品种。

命名约定的形式如下:

  1. .block{}   // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

  2. .block__element{}  // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

  3. .block--modifier{}   // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。

BEM不是一个框架,它只是一种考虑

何以营造结构清晰的CSS?

世家都说CSS学和写都不难,那么写了连年CSS的同窗是不是有静下来思考过,自个儿写CSS是有比较系统的和具备一定专业的,而不是六神无主的写CSS。别的就是投机写的CSS在集体中,其余同学是还是不是能见到代码就通晓你写的是怎么样?倘使没有,那不仿看看那里涉及的片段定义与探究,比如:Sass
、SCSS、LESS、BEM、OOCSS、AMCSS等。让我们联合来深入摸底css吧?

  • 第一了解一下BEM(我个人相比较欣赏的)

BEM的意趣就是块(block)、成分(element)、修饰符(modifier),是由Yandex团队指出的一种前端命名方法论。那种高超的命超模式让你的CSS类对其他开发者来说更为透亮而且更有意义。BEM命名约定越发严格,而且蕴含越多的新闻,它们用于一个团伙开发一个耗时的大门类。

命名约定的形式如下:

  1. .block{}   // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

  2. .block__element{}  // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

  3. .block--modifier{}   // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。

BEM不是一个框架,它只是一种思想

扩展(Extending)

LESS和Sass是最重视的七个CSS预处理器。大家都辅助增添。就算他们的行事章程略有不相同,但她们的想法是千篇一律的。你可以做一个中坚的类(日常号称mixin)和一群属性,然后在另一个接纳器导入那些属性,如:

JavaScript

// less .bordered(@color: #000) { border: dotted 2px @color; } .header
{ .bordered; } .footer { .bordered(#BADA55); } // 编译出来的CSS .header
{ border: dotted 2px #000000; } .footer { border: dotted 2px #bada55;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// less
.bordered(@color: #000) {
    border: dotted 2px @color;
}
.header { .bordered; }
.footer { .bordered(#BADA55); }
 
// 编译出来的CSS
.header {
    border: dotted 2px #000000;
}
.footer {
    border: dotted 2px #bada55;
}

那边的标题是,如果您未曾概念一个参数的mixin,例如刚才的示范:

JavaScript

.bordered { border: dotted 2px #000; }

1
2
3
.bordered {
    border: dotted 2px #000;
}

那是最后编译的CSS文件,无论你是或不是选择都并未任何关系。因为他是一个使得的拔取器。在Sass中大家可以做得更灵活一些。他有交集(mixins)、伸张(extends)和占位接纳器(placeholders)(假诺你想看看他们中间的界别,我强烈提议您读书那篇文章)。接下来我们简要看看Sass是怎么着行事和编译的:

JavaScript

// sass @mixin bordered($color: #000) { border: dotted 2px $color; }
.header { @include bordered; } .footer { @include bordered(#BADA55); }
//编译的CSS .header { border: dotted 2px black; } .footer { border:
dotted 2px #bada55; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// sass
@mixin bordered($color: #000) {
    border: dotted 2px $color;
}
.header { @include bordered; }
.footer { @include bordered(#BADA55); }
 
//编译的CSS
.header {
    border: dotted 2px black;
}
.footer {
    border: dotted 2px #bada55;
}

它看起来和日前大概等同,但固然大家秋看首个placeholder的用例:

JavaScript

// sass %bordered { border: dotted 2px #000; } .header { @extend
%bordered; } .footer { @extend %bordered; } // 编译的CSS .header,
.footer { border: dotted 2px #000; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// sass
%bordered {
 
    border: dotted 2px #000;
}
.header {
    @extend %bordered;
}
.footer {
    @extend %bordered;
}
 
// 编译的CSS
.header, .footer {
    border: dotted 2px #000;
}

其一有七个优势,首先不会编译出.bordered类名,其次会利用组合选用器,合并相同的样式,使代码变得越来越从简。

BEM(不是说都要加下划线,紧要针对的是共同体)

BEM和SMACSS相当相近,主要用于怎么着给项目命名。一个简单命名更易于让别人伙同干活。比如选项卡是一个块(Block),那么些块里的因素是标签之一(Element),而日前选项卡是一个修饰状态(Modifier):

  • block 代表了更高级其他肤浅或机件
  • block__element 代表.block的后台,用于形成一个完整的.block全部。
  • .block–modifier 代表.block的不比情状或不相同版本。
  • 修饰符使用的是,子模块使用_符号。

    亚洲必赢官网 2

    BEM

BEM优缺点

可取:BEM 的助益在于所爆发的 CSS
类名都只行使一个项目选取器,可以免止传统做法中由于多个品种接纳器嵌套带来的繁杂的个性级联难点。在
BEM 命名规则中,所有的 CSS
样式规则都只用一个系列选拔器。由此具有样式规则的特异性(specificity)都是如出一辙的,也就不存在复杂的先期级难题。那足以简化属性值的层叠规则。代码清单中的命名规则的益处在于逐个CSS 类名都很不难明了,而且类名的层系关系足以与 DOM
节点的树型结构相呼应。 缺点: CSS 类名会相比较长同时复杂。乍看之下,依照BEM 命名规则发出的 CSS
类名都会很复杂,但其实在明白了命名规则之后,可以很不难了然其意义。

  • 俺们再看一下OOCSS(面向对象CSS)

OOCSS 代表的是面向对象 CSS(Object Oriented
CSS),是一种把面向对象方法学应用到 CSS 代码协会和管理中的实践。
OOCSS最根本的一些就是:升高他的百步穿杨和可重用性。那几个也是OOCSS最器重的少数。OOCSS主张是通过在基础零部件中添加越来越多的类,从而伸张基础零部件的CSS规则,从而使CSS有更好的增添性。

我们有一个容器是页面page的1/4宽,有一个褐色的背景,1px黄色的边框,10px的左左侧距,5px的顶端距,10px的底下距,以前对于如此一个体制,大家平常给这些容器成立一个类,并把这几个样式全体充裕。像上边那样。

  1. 1 // template
    2 
    3 <div class="size1of4"></div>
    4 
    5 // style
    6 
    7 .size1of4 {
    8 
    9  background: blue;
    

    10
    11 border: 1px solid #ccc;
    12
    13 margin: 5px 10px 10px;
    14
    15 width: 25%;
    16
    17 } 

唯独使用oocss的话,大家不这么做,我把为这么些容器创立越多的类,并且每一个样式对应一个类,那样是为了前面可以重复使用那些组件的体制,防止再一次写相同的体制,就拿那几个实例来说,我们给那个容器扩张上边的类:bgBlue,solid格雷,mts,mlm,mrm,mbm

  1. 1 // template
    2 
    3 <div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
    4 
    5 // style
    6 
    7 .size1of4 {width: 25%;}
    8 
    9 .bgBlue {background:blue}
    

    10
    11 .solidGray {border: 1px solid #ccc}
    12
    13 .mts {margin-top: 5px}
    14
    15 .mrm {margin-right: 10px}
    16
    17 .mbm {margin-bottom: 10px}
    18
    19 .mlm {margin-left: 10px} 

OOCSS的优点

  • 减少CSS代码。

  • 装有净化的HTML标记,有语义的类名,逻辑性强的层系关系。

  • 语义标记,有助于SEO。

  • 更好的页面优化,更快的加载时间(因为有无数零部件重用)。

  • 可扩展的符号和CSS样式,有越来越多的机件可以放置库中,而不影响其余的零件。

  • 能轻松构造新的页面布局,或创设新的页面风格。

OOCSS的缺点

  • OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特其余多,倘若运用在小型项目中大概见不到何以功效。所以用不用OOCSS应该按照你的花色来决定。

  • 若是没用抢眼的利用,创制组件大概对于你来说是一堆没用的东西,成为一烂摊子,给你的护卫带来意料之外的杯具,说不定仍然个保安的梦魇。

  • 最好给逐个零件备写一份表明文档,有助于调用与保安。

  • AMCSS(属性模块)。

性情模块只怕说AM,其主旨就是有关定义命名空间用来写样式。通俗的讲就是,给一个因素加上属性,再经过质量选拔器定位到那一个因素。达到防止过多的采取class。

  1. 1 // template
    2 
    3 <div am- Row ></div>
    4 
    5 <div am- Column = "12"> Full < /div>
    6 
    7 </ div> <div am- Row > <div am- Column = "4"> Thirds </div>
    8 
    9 <div am- Column = "4"> Thirds </div>
    

    10
    11

    Thirds < /div>
    12
    13 // style
    14
    15 [am- Row ] { / max-width, clearfixes / }
    16
    17 [am- Column ~= “1” ] { / 1/12th width, floated / }
    18
    19 [am- Column ~= “2” ] { / 1/6th width, floated / }
    20
    21 [am- Column ~= “3” ] { / 1/4th width, floated / }
    22
    23 [am- Column ~= “4” ] { / 1/3rd width, floated / }
    24
    25 [am- Column ~= “5” ] { / 5/12th width, floated / } / etc /
    26
    27 [am- Column ~= “12” ] { / 100% width, floated / } 

您会小心到第一件事情就是有am-前缀。那也是AM宗旨部分,确保属性模块不会与现有属性抵触。你可以动用你协调喜爱的任何前缀名,我常选择的是ui-、css-或然其余前缀,但那些示例中使用的是am-前缀。HTML的管用对您或你的档次来说是越发重大,就类似于选用data-前缀起始定义的属性类似。
你只怕会小心到的第二件事情就是相近于1、4或12这样的值,使用类名变得极为麻烦——造成冲突的机遇很多。但定义了大家自身的命名空间,实际上校空间变得很小,用于工作中不会招致争持。为了更好的劳作,可以自由接纳最强烈而且有含义的符号。

我们固然有如此多的好的方案去化解css的有的难题,不过有没有一种东西仍然工具来代替大家去做这几个吗,作为一个程序员大家不爱好做太劳碌的事务。那么接下去大家谈一谈css的营造工具

BEM优缺点

可取:BEM 的独到之处在于所发出的 CSS
类名都只使用一个体系拔取器,可以幸免古板做法中由于三个品类接纳器嵌套带来的复杂性的性质级联难题。在
BEM 命名规则中,所有的 CSS
样式规则都只用一个项目选取器。因而具有样式规则的特异性(specificity)都是一样的,也就不设有复杂的预先级难题。那可以简化属性值的层叠规则。代码清单中的命名规则的裨益在于各个CSS 类名都很不难明了,而且类名的层系关系得以与 DOM
节点的树型结构相呼应。 缺点: CSS 类名会对比长同时复杂。乍看之下,按照BEM 命名规则发出的 CSS
类名都会很复杂,但骨子里在熟谙了命名规则之后,可以很简单通晓其意义。

  • 我们再看一下OOCSS(面向对象CSS)

OOCSS 代表的是面向对象 CSS(Object Oriented
CSS),是一种把面向对象方医学应用到 CSS 代码社团和管制中的实践。
OOCSS最重大的某些就是:提升他的油滑和可重用性。这几个也是OOCSS最根本的一点。OOCSS主张是经过在基础零部件中添加更加多的类,从而增添基础零部件的CSS规则,从而使CSS有更好的增添性。

大家有一个容器是页面page的1/4宽,有一个红色的背景,1px蓝色的边框,10px的左左边距,5px的上边距,10px的上边距,从前对于这么一个样式,大家平日给那么些容器创造一个类,并把那几个样式全体拉长。像上面那样。

  1. 1 // template
    2 
    3 <div class="size1of4"></div>
    4 
    5 // style
    6 
    7 .size1of4 {
    8 
    9  background: blue;
    

    10
    11 border: 1px solid #ccc;
    12
    13 margin: 5px 10px 10px;
    14
    15 width: 25%;
    16
    17 } 

而是使用oocss的话,我们不这么做,我把为那么些容器创造更加多的类,并且每一种样式对应一个类,那样是为了后边可以重复使用那个零件的体裁,避免重新写相同的样式,就拿那一个实例来说,大家给那个容器伸张上面的类:bgBlue,solid格雷,mts,mlm,mrm,mbm

  1. 1 // template
    2 
    3 <div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
    4 
    5 // style
    6 
    7 .size1of4 {width: 25%;}
    8 
    9 .bgBlue {background:blue}
    

    10
    11 .solidGray {border: 1px solid #ccc}
    12
    13 .mts {margin-top: 5px}
    14
    15 .mrm {margin-right: 10px}
    16
    17 .mbm {margin-bottom: 10px}
    18
    19 .mlm {margin-left: 10px} 

OOCSS的优点

  • 减少CSS代码。

  • 享有洁净的HTML标记,有语义的类名,逻辑性强的层次关系。

  • 语义标记,有助于SEO。

  • 更好的页面优化,更快的加载时间(因为有过多组件重用)。

  • 可增加的记号和CSS样式,有愈多的零件可以松手库中,而不影响其余的组件。

  • 能轻轻松松构造新的页面布局,或创设新的页面风格。

OOCSS的缺点

  • OOCSS适合真正的巨型网站开发,因为大型网站用到的可重用性组件特其余多,如若选择在小型项目中或许见不到怎么效益。所以用不用OOCSS应该根据你的品类来支配。

  • 一旦没用抢眼的行使,创造组件大概对此你来说是一堆没用的事物,成为一烂摊子,给您的掩护带来意想不到的杯具,说不定如故个保证的恐怖的梦。

  • 最好给每种零件备写一份注明文档,有助于调用与维护。

  • AMCSS(属性模块)。

性情模块大概说AM,其主旨就是有关定义命名空间用来写样式。通俗的讲就是,给一个因素加上属性,再经过品质选用器定位到那些因素。达到幸免过多的应用class。

  1. 1 // template
    2 
    3 <div am- Row ></div>
    4 
    5 <div am- Column = "12"> Full < /div>
    6 
    7 </ div> <div am- Row > <div am- Column = "4"> Thirds </div>
    8 
    9 <div am- Column = "4"> Thirds </div>
    

    10
    11

    Thirds < /div>
    12
    13 // style
    14
    15 [am- Row ] { / max-width, clearfixes / }
    16
    17 [am- Column ~= “1” ] { / 1/12th width, floated / }
    18
    19 [am- Column ~= “2” ] { / 1/6th width, floated / }
    20
    21 [am- Column ~= “3” ] { / 1/4th width, floated / }
    22
    23 [am- Column ~= “4” ] { / 1/3rd width, floated / }
    24
    25 [am- Column ~= “5” ] { / 5/12th width, floated / } / etc /
    26
    27 [am- Column ~= “12” ] { / 100% width, floated / } 

您会注意到第一件业务就是有am-前缀。那也是AM主旨部分,确保属性模块不会与存活属性争持。你可以动用你本身喜爱的别的前缀名,我常拔取的是ui-、css-或许其他前缀,但这个示例中应用的是am-前缀。HTML的卓有功效对你或你的花色以来是丰硕关键,就象是于选用data-前缀初阶定义的习性类似。
你可能会小心到的第二件业务就是近似于1、4或12如此的值,使用类名变得颇为麻烦——造成争辨的时机很多。但定义了我们团结的命名空间,实际少将空间变得很小,用于工作中不会促成冲突。为了更好的做事,能够自由选拔最让人惊讶而且有意义的标志。

俺们即便有这么多的好的方案去解决css的片段难点,但是有没有一种东西如故工具来顶替大家去做这几个吗,作为一个程序员大家不希罕做太费事的事务。那么接下去我们谈一谈css的创设工具

配置(Configuration)

LESS和Sass都辅助变量,你可以调用那一个变量,将将他们作为质量的值:

JavaScript

// sass $brand-color: #009f0A; … h1 { color: $brand-color; }

1
2
3
4
5
6
// sass
$brand-color: #009f0A;
h1 {
    color: $brand-color;
}

那是一个很好的性状,因为你可以储存一些紧要的东西,比如说颜色仍然网格的升幅,将他们存放在同一个地方,如若您需求修改部分不平常改变的代码,会变得老大的地利。

另一个好处理,能够利用变量的插值,如上面演示的情势:

JavaScript

// sass @mixin border($side) { border-#{$side}: solid 1px #000; }
.header { @include border("left"); } // 编译的CSS .header {
border-left: solid 1px #000; }

1
2
3
4
5
6
7
8
9
10
11
12
// sass
@mixin border($side) {
    border-#{$side}: solid 1px #000;
}
.header {
    @include border(&quot;left&quot;);
}
 
// 编译的CSS
.header {
    border-left: solid 1px #000;
}

SUIT

SUIT起点于BEM,然则它对组件名使用驼峰式和连字号把组件从他们的梳洗和子孙后代中不同出来:

  • 修饰符使用的是,子模块使用_符号。

    亚洲必赢官网 3

    SUIT

如果你不想使用如此严格或者复杂的命名规则,给每一个选择器前加前缀同样可以达到这样的效果。

.s-product-detauils{}
.t-product-detauils{}
.js-product-detauils{}

结构本性将会被应用到s-product-details选用器中。主旨属性将采用于t-product-details拔取器。

OK,大家来探索一下webpack是怎么落到实处模块化的。

With :local (without brackets) local mode can be switched on for this
selector. :global(.className) can be used to declare an explicit
global selector. With :global (without brackets) global mode can be
switched on for this
selector. webpack会把class分为两种,一种是local(本地的),一种是global(全局的)。默认导出的都是当地的,但是你可以透过
:global(…)开关来支配导出全局。上边我们看一下板栗。

  1. 1 // 输入
    2 
    3 : local (.className) { background: red; }
    4 
    5 : local .className { color: green; }
    6 
    7 : local (.className .subClass) { color: green; }
    8 
    9 : local .className .subClass : global (. global - class -name) { color: blue; }
    

    10
    11 // 导出
    12
    13 ._23_aKvs-b8bW2Vg3fwHozO { background: red; }
    14
    15 ._23_aKvs-b8bW2Vg3fwHozO { color: green; }
    16
    17 ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
    18
    19 ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 . global – class -name { color: blue; } 

:local(className)被编译为唯一可识其他标志,:global(className)原样输出,当然我们也得以控制导出的格式。配置如下:

  1. 1 {
    2 
    3  test: /\.css$/ ,
    4 
    5  use : [
    6 
    7    {
    8 
    9     loader: 'css-loader',
    

    10
    11 options: {
    12
    13 modules: true ,
    14
    15 localIdentName: ‘[path][name]__[local]–[hash:base64:5]’
    16
    17 }
    18
    19 }
    20
    21 ]
    22
    23 } 

OK,大家来探究一下webpack是怎么落到实处模块化的。

With :local (without brackets) local mode can be switched on for this
selector. :global(.className) can be used to declare an explicit
global selector. With :global (without brackets) global mode can be
switched on for this
selector. webpack会把class分为二种,一种是local(本地的),一种是global(全局的)。默许导出的都是地点的,不过你可以通过
:global(…)开关来支配导出全局。下边我们看一下板栗。

  1. 1 // 输入
    2 
    3 : local (.className) { background: red; }
    4 
    5 : local .className { color: green; }
    6 
    7 : local (.className .subClass) { color: green; }
    8 
    9 : local .className .subClass : global (. global - class -name) { color: blue; }
    

    10
    11 // 导出
    12
    13 ._23_aKvs-b8bW2Vg3fwHozO { background: red; }
    14
    15 ._23_aKvs-b8bW2Vg3fwHozO { color: green; }
    16
    17 ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; }
    18
    19 ._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 . global – class -name { color: blue; } 

:local(className)被编译为唯一可甄其他标示,:global(className)原样输出,当然大家也可以决定导出的格式。配置如下:

  1. 1 {
    2 
    3  test: /\.css$/ ,
    4 
    5  use : [
    6 
    7    {
    8 
    9     loader: 'css-loader',
    

    10
    11 options: {
    12
    13 modules: true ,
    14
    15 localIdentName: ‘[path][name]__[local]–[hash:base64:5]’
    16
    17 }
    18
    19 }
    20
    21 ]
    22
    23 } 

针对预处理器(Against the preprocessors)

  • 预处理器是一种工具,您要采用得先要有一个顺应的环境。假诺你牵记将其集成到您的应用程序中,也亟需卓殊的编码。
  • 如果您不想让你的代码变得一塌糊涂,你须要有一个寓目机制,用来监测你的文本。如若如此,你每一个品种始于时就要求周转那些监测机制。
  • 平常开发人士只看到.less或.sass文件,可是出口是怎么卓殊重大。你或然有写得很好的Sass代码,但那并不意味,你最终会有很好的CSS代码。只怕会有一部分特异性的标题,所以要求定期检测编译的版本。

ACSS

设想什么筹划一个系统的接口。原子(Atoms)是创制一个区块的最宗旨的特质,比如说表单按钮。分子(Molecules)是广大个原子(Atoms)的重组,比如说一个表单中含有了一个标签,输入框和按钮。生物(Organisms)是众多成员(Molecules)的组合物,比如一个网站的顶部区域,他饱含了网站的标题、导航等。而模板(Templates)又是很多浮游生物(Organisms)的结合体。比如一个网站页面的布局。而最后的页面就是例外的模板。

亚洲必赢官网 4

ACSS

CSS的scoped实现?

当今在种种框架中都会有scoped属性,使大家的css具有模块化性质,不会传染到其余模块,那么scoped是何许完成的呢?大家一同来揭秘它神秘的面罩吧?

要是你是一个早出晚归的同室,你早晚会意识在HTML的style标签中有一个scoped属性。让大家来一头看一下以此天性的神奇啊。

平素以来,文档上的STYLE成分平日都是成效域全局的,拔取器按照全局的CSS优先规则来设置的。要兑现部分的接纳需求先选到容器成分,再用后代选用器来完毕。scoped属性可以让STYLE成分不再效能于大局,而从目前STYLE成分所在的容器起先拔取后代。

  1. 1
    2 
    3  <style scoped >
    4 
    5    span {color:red;}
    6 
    7  </style>
    8 
    9   我是第1个DIV内的SPAN 
    

    10
    11

    12
    13

    14
    15

    20
    21 我是第2个DIV内的SPAN
    22
    23

    24
    25

    26
    27 我是第3个DIV内的SPAN
    28
    29

     

结果:

亚洲必赢官网 5

俺们得以望见第多个div并不曾被第一及第四个style所感染,也就是说带有scoped属性的css是一个单身的功能域,不会影响到其余模块!!太好了,那大家随后在style里面添加scoped属性就足以周密化解啦亚洲必赢官网 6慢!BUT,那种方法唯有在火狐浏览器才生效,其他浏览器就是最新的chrome浏览器也不扶助啊。我@#¥%……

不要急年轻人,大家来看一下vue的代码,当大家在style中加了scoped属性后

亚洲必赢官网 7

嗬,那不就是大家恰好讲过的AMCSS(属性模块)的使用吗?也就是说vue在编译的时候,把带有scoped属性的的模块,加上了一个唯一的质量,然后通过类名+属性拔取器的法门来完毕模块化!

骨子里任何框架也是用的好像的不二法门,大家再看一下,小程序wepy框架的完结呢?

亚洲必赢官网 8

本条是我们刚刚讲过OOCSS(面对对象CSS)!!

对的,那样组合框架来讲是或不是可以更能长远掌握大家刚刚讲过的始最后啊?

CSS的scoped实现?

现在在各样框架中都会有scoped属性,使我们的css具有模块化性质,不会传染到其余模块,那么scoped是何等完成的啊?我们共同来揭开它神秘的面罩吧?

设若你是一个燃膏继晷的同室,你肯定会发觉在HTML的style标签中有一个scoped属性。让大家来一头看一下以此性子的神奇吗。

直白以来,文档上的STYLE元素平日都是成效域全局的,拔取器按照全局的CSS优先规则来设置的。要贯彻部分的采纳须求先选到容器成分,再用后代选取器来达成。scoped属性可以让STYLE成分不再成效于大局,而从此时此刻STYLE成分所在的容器起头接纳后代。

  1. 1
    2 
    3  <style scoped >
    4 
    5    span {color:red;}
    6 
    7  </style>
    8 
    9   我是第1个DIV内的SPAN 
    

    10
    11

    12
    13

    14
    15

    20
    21 我是第2个DIV内的SPAN
    22
    23

    24
    25

    26
    27 我是第3个DIV内的SPAN
    28
    29

     

结果:

亚洲必赢官网 9

我们得以瞥见第五个div并从未被第一及第四个style所感染,也就是说带有scoped属性的css是一个单身的功能域,不会影响到其余模块!!太好了,这大家之后在style里面添加scoped属性就足以健全解决啦亚洲必赢官网 10慢!BUT,这种方式只有在火狐浏览器才生效,其余浏览器就是最新的chrome浏览器也不支持啊。我@#¥%……

不要急年轻人,大家来看一下vue的代码,当我们在style中加了scoped属性后

亚洲必赢官网 11

嗬,那不就是我们正好讲过的AMCSS(属性模块)的行使吗?也就是说vue在编译的时候,把带有scoped属性的的模块,加上了一个唯一的质量,然后通过类名+属性选用器的不二法门来落成模块化!

实际上任何框架也是用的好像的办法,大家再看一下,小程序wepy框架的贯彻呢?

亚洲必赢官网 12

那个是我们刚刚讲过OOCSS(面对对象CSS)!!

对的,那样组合框架来讲是或不是力所能及更能深远通晓大家刚刚讲过的内容了啊?

壮大阅读

  • CSS Preprocessor
  • Sass教程
  • How to Choose the Right CSS
    Preprocessor
  • CSS Preprocessors: Focused
    Decisions
  • Sass And LESS: An Introduction To CSS
    Preprocessors
  • Poll Results: Popularity of CSS
    Preprocessors
  • On CSS
    preprocessors
  • Understand the Power of Sass and Why You should use CSS
    Preprocessors
  • OOCSS & CSS Preprocessors
    (pt.1)
  • OOCSS & CSS Preprocessors
    (pt.2
  • 8 CSS preprocessors to speed up development
    time

ITCSS

  • Settings
    全局可用配置,设置开关。$color-ui:#BADA55;$spacing-unit:10px;
  • Tools通用工具函数。@mixin font-color(){font-color:$color-ui;}
  • Generic 通用基础样式。诺玛lize,reset,boxsizing:border-box;
  • Base 未归类的html成分。ul{list-style: square outside;}
  • Objects设计有些先导利用专用类。.ul-list__item{padding:$spacing-unit};
  • Components 设计符合你们的组件.products-list{@include
    font-brand();border-top:1px solid $color-ui;}
  • 特朗普s
    重写,只影响一块的DOM。(平常带上大家的!important)(比如唯有颜色不一致等)

终极我列出部分自个儿就要利用的技术,并且持之以恒做下来:

  • 尽心尽力不让本身的体制层级超过三层
  • 尽只怕不应用!important,通过添加和选取类名,比如.hidden类名
  • 尽只怕远离Sass中牵线@extend的貌似经验法则——他们有些是迷惑人
  • 尽心尽力在体制表中添加注释
  • 让团队写CSS有一个标准规范——哈利罗Berts写了一个很闻名的CSS指南
  • 除此以外,应该有一个足以显示成分样式的模块库
  • 运用类似scss-lint工具,让你的SCSS/CSS和正式保持一致
  • 尽心尽力不要使用*诸如此类的全局拔取器
  • JavaScript钩子是行使的类名,尽量加上前缀js-
  • 尽心尽力在档次中重复使用类名和模块
  • 取名尽量和Bootstrap框架的零件接近
  • 在体制中幸免选择#id

推而广之阅读:
www.leemunroe.com/css
https://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html
eslint:

哪些按需加载css?

偶尔大家需求把一部分使得的宽广的css放到一个common.css里面,不过当我们项目丰裕大的时候,common的情节就会变得老大庞大,而且难以有限帮衬。

率先大家只能说一下应声有多少个比较火的CSS预处理器,Less、Sass
、Stylus和postCss,那是一个CSS史上的壮烈飞跃。他重点提供了以下职能

  • 嵌套语法

  • 变量

  • @import

  • 混入

  • 继承

  • 函数

  • 逻辑控制

叩问了css预处理器,那么我们怎么优化大家的common.css呢?

要想化解那些难题,大家先是来看一看LESS中的mixin是何等运转的。

  1. 1 // 你可以勾兑“类”选拔器恐怕“id”选用器,例如:
    2 
    3 .a, #b {
    4 
    5  color: red;
    6 
    7 }
    8 
    9 .mixin-class
    

    10
    11 {
    12
    13 .a();
    14
    15 }
    16
    17 .mixin-id {
    18
    19 #b();
    20
    21 } 

上述将收获:

  1. 1 .a, #b {
    2 
    3  color: red;
    4 
    5 }
    6 
    7 .mixin-class
    8 
    9 {
    

    10
    11 color: red;
    12
    13 }
    14
    15 .mixin-id {
    16
    17 color: red;
    18
    19 }  

小提示:当你调用混合集的时候,括号可加可不加。

  1. 1 .a(); //那三种调用格局效果是相同的
    2 
    3 .a;
    

     

万一您想要创制一个混合集,不过却不想让它输出到你的样式中,你可以在混合集的名字背后加上一个括号。

  1. 1 .my-mixin {
    2 
    3  color: black;
    4 
    5 }
    6 
    7 .my-other-mixin() {
    8 
    9  background: white;
    

    10
    11 }
    12
    13 .class {
    14
    15 .my-mixin;
    16
    17 .my-other-mixin;
    18
    19 } 

输出:

  1. 1 .my-mixin {
    2 
    3  color: black;
    4 
    5 }
    6 
    7 .class {
    8 
    9  color: black;
    

    10
    11 background: white;
    12
    13 } 

好了,大家驾驭这一个规律就可以用less中的mixins重新修改我们的common.less了,而且不会呈现尤其臃肿,我们可以按需加载大家的样式了,是否很棒啊亚洲必赢官网 13

大家的CSS模块化就讲到那里了,有啥观点或提出可以联系本人啊!

 

——————————————————

一经您喜爱大家的小说,关怀大家的万众号和大家互动吧。

亚洲必赢官网 14

怎样按需加载css?

有时候大家需求把部分卓有功能的大面积的css放到一个common.css里面,然而当大家项目丰裕大的时候,common的情节就会变得相当庞大,而且难以保险。

首先大家只能说一下即时有几个比较火的CSS预处理器,Less、Sass
、Stylus和postCss,那是一个CSS史上的顶天立地飞跃。他首要提供了以下功能

  • 嵌套语法

  • 变量

  • @import

  • 混入

  • 继承

  • 函数

  • 逻辑控制

打探了css预处理器,那么我们如何优化大家的common.css呢?

要想缓解这么些难题,大家第一来看一看LESS中的mixin是何等运转的。

  1. 1 // 您可以勾兑“类”采取器恐怕“id”选取器,例如:
    2 
    3 .a, #b {
    4 
    5  color: red;
    6 
    7 }
    8 
    9 .mixin-class
    

    10
    11 {
    12
    13 .a();
    14
    15 }
    16
    17 .mixin-id {
    18
    19 #b();
    20
    21 } 

上述将赢得:

  1. 1 .a, #b {
    2 
    3  color: red;
    4 
    5 }
    6 
    7 .mixin-class
    8 
    9 {
    

    10
    11 color: red;
    12
    13 }
    14
    15 .mixin-id {
    16
    17 color: red;
    18
    19 }  

小提醒:当您调用混合集的时候,括号可加可不加。

  1. 1 .a(); //那三种调用形式效果是一样的
    2 
    3 .a;
    

     

如若你想要成立一个混合集,然而却不想让它输出到您的体制中,你可以在混合集的名字背后加上一个括号。

  1. 1 .my-mixin {
    2 
    3  color: black;
    4 
    5 }
    6 
    7 .my-other-mixin() {
    8 
    9  background: white;
    

    10
    11 }
    12
    13 .class {
    14
    15 .my-mixin;
    16
    17 .my-other-mixin;
    18
    19 } 

输出:

  1. 1 .my-mixin {
    2 
    3  color: black;
    4 
    5 }
    6 
    7 .class {
    8 
    9  color: black;
    

    10
    11 background: white;
    12
    13 } 

好了,我们了解这么些规律就可以用less中的mixins重新修改我们的common.less了,而且不会显示更加臃肿,大家能够按需加载大家的体制了,是或不是很棒啊亚洲必赢官网 15

大家的CSS模块化就讲到那里了,有怎么着意见或提出足以联系本人哦!

 

——————————————————

若是您喜爱大家的稿子,关心大家的民众号和大家互动吧。

亚洲必赢官网 16

BEM

亚洲必赢官网 17

好的,我找到了一个新的好玩工具。那几个预处理器可以省去大批量的年月,但他无法为您写出好的社团。首先,我开始考虑是一个命名约定,让大家来看以下的HTML标签:

JavaScript

<header class="site-header"> <div
class="logo"></div> <div
class="navigation"></div> </header>

1
2
3
4
&lt;header class=&quot;site-header&quot;&gt;
    &lt;div class=&quot;logo&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;navigation&quot;&gt;&lt;/div&gt;
&lt;/header&gt;

唯恐会写出相应的体裁:

JavaScript

.site-header { … } .logo { … } .navigation { … }

1
2
3
.site-header { … }
.logo { … }
.navigation { … }

这么的样式能健康的行事,但它有一个难题——阅读CSS,让人难于领悟。例如,logo是属于header部分的,你大概有另一个logo要放在页脚footer处。那么将添加一个后生接纳器来支配:

JavaScript

.site-header .logo { … }

1
.site-header .logo { … }

但是利用这个采用器并不是很好的呼吁,因为它始终须要依靠于特定的标志和结构。一旦您把logo移到<header>外面,样式将会丢掉。其它一种做法是给logo添加一个site-header,给其重新命名:

JavaScript

.site-header-logo { … }

1
.site-header-logo { … }

很棒了,本身不怕表明,但它并无法使用于具有情状之下。例如,我想在12的圣诞节接纳一个圣诞节版本的logo。所以,我无法写:

JavaScript

.site-header-logo-xmas { … }

1
.site-header-logo-xmas { … }

因为我的逻辑是,写一个选用器要像嵌套HTML标签一样匹配。

BEM只怕化解这样的气象。那意味着块(Block)、成分(Element)和修改器(Modifier)和部分成立规则,你能够依照那么些规则。使用BEM,大家的小例将变为:

JavaScript

.site-header { … } /* block */ .site-header__logo { … } /*
element */ .site-header__logo–xmas { … } /* modifier */
.site-header__navigation { … } /* element */

1
2
3
4
.site-header { … } /* block */
.site-header__logo { … } /* element */
.site-header__logo–xmas { … } /* modifier */
.site-header__navigation { … } /* element */

也就是说site-header是我们的块。那么logo和navigation是那几个块的要素,圣诞版本的logo是修饰符。或者它看起来不难,不过它的确很强大。一旦您开首接纳它,会发现她能让你的构造更为的精良。当然也有置之不顾的理由,那就是因为其语法。是的,恐怕看起来有些丑,但为了有一个好的结构,我会准备为此做出自我就义。(更好的读书请点这和这)。

推而广之阅读

  • BEM
  • BEM Methodlogy
  • A New Front-End Methodology:
    BEM
  • Maintainable CSS with
    BEM
  • BEM: The Block, Element, Modifier Approach To Decoupling HTML And
    CSS
  • What is BEM?
  • Thoughts About SCSS and
    BEM

OOCSS

亚洲必赢官网 18

自从我发觉BEM,我就起来在思想怎样科学的使用本人的类名。大概,我的首先件工作要读一篇有关面向对象的CSS。面向对象编程添加了有些抽像的定义,CSS也支撑这样的概念。如若您使用了CSS预处理器,你或多或少知道有些。做为一个编纂代码的人,我意识那一个定义离自身平日编程很近,拿JavaScript为例,有三个首要条件:

单身的布局和样式

大家用上边的事例来开展介绍:

JavaScript

.header { background: #BADA55; color: #000; width: 960px; margin: 0
auto; } .footer { background: #BADA55; text-align: center; color:
#000; padding-top: 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
.header {
    background: #BADA55;
    color: #000;
    width: 960px;
    margin: 0 auto;
}
.footer {
    background: #BADA55;
    text-align: center;
    color: #000;
    padding-top: 20px;
}

其间有部分体裁是再一次的,我们得以考虑在另一个类中领到这么些相同的体制:

JavaScript

.colors-skin { background: #BADA55; color: #000; } .header { width:
960px; margin: 0 auto; } .footer { text-align: center; padding-top:
20px; }

1
2
3
4
5
6
7
8
9
10
11
12
.colors-skin {
    background: #BADA55;
    color: #000;
}
.header {
    width: 960px;
    margin: 0 auto;
}
.footer {
    text-align: center;
    padding-top: 20px;
}

因此大家选择colors-skin做为一个对象,用来扩张。那样HTML模板修改成像那样:

JavaScript

<div class="header colors-skin"> … </div>
<div class="colors-skin"> … </div> <div
class="footer colors-skin"> … </div>

1
2
3
&lt;div class=&quot;header colors-skin&quot;&gt; … &lt;/div&gt;
&lt;div class=&quot;colors-skin&quot;&gt; … &lt;/div&gt;
&lt;div class=&quot;footer colors-skin&quot;&gt; … &lt;/div&gt;

如此那般做有多少个好处:

  • 有一个类,它可以运用频仍
  • 若是须要修改,只须要修改一个地点
  • 在CSS样式中去除重复的代码,使其文件变得更低

独自的器皿和内容

此间的想法是,每一种成分应该有相同的体裁,不管他置身何地。所以,你应当尽量防止使用像下边演示的选取器:

JavaScript

.header .social-widget { width: 250px; }

1
2
3
.header .social-widget {
    width: 250px;
}

即使您把.social-widget移动.header容器的外界,那么.social-widget的幅度就变了。更加是用在页面上的零件。那也是自家鼓励CSS模块化以及我强烈指出采纳更多的岁月去尝尝。就我个人而言,以下的条件会将CSS写得更好。

框架

假若您在GitHub上开拓OOCSS库您可以看到一个框架。是的,那些框架使用了面向对象的概念,他的CSS有诸多很不错的现成组件。很短一段时间我并不爱好框架。如若你有在干活选择框架,你会发现他分为八个部分。事实上,你选拔框架处理部分事务,你无法不信守他的平整。然而本身更爱好使用一些分寸的框架。当然我不是说自身得重新去造轮子,但本人接连试图去寻找一种平衡。平日现成的缓解方案导致系统的一塌糊涂和复杂。我提出是为自然的目的成立一个特定的事物。借使您准备去覆盖一些事物,你总是想到框架中的东西。

但事,我强烈指出你去搜寻一个OOCSS框架。那是一个破例的知识块,或者它将符合用在你须求的地点。最早是由Nicole
Sullivan提议如此的一个定义。假设你对OOCSS有哪些打算恐怕想法,可到这里列席座谈。

伸张阅读

  • OOCSS
  • Object-Oriented CSS
  • An Introduction To Object Oriented CSS
    (OOCSS)
  • The Future of OOCSS: A
    Proposal
  • The flag object
  • CSS Performance and
    OOCSS
  • OOCSS, for Great
    Justice
  • Nicole Sullivan Talks OOCSS and
    Process

SMACSS

亚洲必赢官网 19

另一个流行的定义是SMACSS。SMACSS代表可伸缩的和是模块化的CSS结构种类。Jonathan
Snook为CSS开发人士介绍了近似于那样的样式指南。为了单独的应用程序将其分成以下几类:

  • 基本(base):用以一个粗略的选取器的宗旨样式,如clearfix
  • d布局(Layout):概念网格
  • 模块(Module):一群成分相结合在共同形成的一个模块,比如说header和sidebar
  • 状态(State):要素的不等景观。如隐藏、按住,伸张等规则定义给目的
  • 主题(Them):越来越多的样式

本人一向不动用SMACSS的其余经验,便它是相当受欢迎,实际上也能有助于你有更好的想法。这比一个框架的概念更强。所以,你不要求依据任何严峻的平整、类依旧零部件。

壮大阅读

  • 亚洲必赢官网 ,Scalable and Modular Architecture for CSS
  • SMACSS: Notes On
    Usage
  • An Introduction To SMACSS Guidelines For Writing
    CSS
  • Let’s Talk SMACSS,
    Man
  • SMACSS

Atomic Design

亚洲必赢官网 20

精晓了OOCSS和SMACSS后,请允许我找一个适合的比方,请快快登录这个页面。那里体现了一个大侠的原子设计概念。它的小编是Brad
Frost,众所周知,他是一位有名的Web开发人士,致力于响应式设计和移动端支付。

本条想法是充裕有趣的。以下是一对术语,大家得以说,物质的为主单位是原子。Brad
Frost说我们的页面是用运动的原子创设,一个原子可以是:

JavaScript

<label>Search the site</label>

1
&lt;label&gt;Search the site&lt;/label&gt;

或者

JavaScript

<input type="text" placeholder="enter keyword"
/>

1
&lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;

也就是说原子是概括了部分着力样式的DOM成分。如颜色、字体大小只怕联网动画。后来那几个部分可以构成元素子,例如:

JavaScript

<form> <label>Search the site</label> <input
type="text" placeholder="enter keyword" />
<input type="submit" value="search" />
</form>

1
2
3
4
5
&lt;form&gt;
    &lt;label&gt;Search the site&lt;/label&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;
    &lt;input type=&quot;submit&quot; value=&quot;search&quot; /&gt;
&lt;/form&gt;

从而表单成分包罗了多少个原子。那样抽象带来的油滑,因为我们得以应用同样的原子来构建另一个成员。那样一来,大家在不相同的内外文中可以选用相同的方式:

Brad
Frost并不曾终止。生特体是打造分子的事物,听从千篇一律的点子,我们得以编制以下的协会,并将其誉为有机体:

JavaScript

<header> <div class="logo"> </div>
<nav> <ul> <li><a
href="#">Home</a></li> <li><a
href="#">About</a></li> <li><a
href="#">Contacts</a></li> </ul>
</nav> <form> <label>Search the site</label>
<input type="text" placeholder="enter keyword"
/> <input type="submit" value="search" />
</form> </header>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
&lt;header&gt;
    &lt;div class=&quot;logo&quot;&gt; &lt;/div&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contacts&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;form&gt;
        &lt;label&gt;Search the site&lt;/label&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;enter keyword&quot; /&gt;
        &lt;input type=&quot;submit&quot; value=&quot;search&quot; /&gt;
    &lt;/form&gt;
&lt;/header&gt;

其次件事是模板的概念。他们不是直接相关的赛璐珞反应,但被放入了Web的上下文。一旦大家初始结合不同的生物创设大家的模板。后来那些模板方式就是我们最终取得的页面。

你大概早已选择类似的格局来营造应用程序。可是,命名的东西以一种客观的主式带来突出的布局。在支付中,你和你的队友会有不少事情须求去弄了解。分离的原子和分子是很要紧的有的,因为它提升了工作功能和让您更好的掩护您的Web应用程序。

伸张阅读

  • Atomic
    Design
  • The “Other” Interface: Atomic Design With
    Sass
  • Atomic Design: Some Thoughts and One
    Example

OrganicCSS

亚洲必赢官网 21

半年前,我写了一篇文章,是关于于Organic的,他是一个用JavaScript写的一个壮烈的小框架。它更像是一种设计形式,我个人相当欣赏。我居然在一些个种类中应用了它,并且一切都很顺遂。假如您有趣味的话,我强烈推荐您读书那篇文章。

当自家读书了BradFrost的文章,我就已经有了近乎于的概念,因为自个儿知道Organic。布拉德做的极度的棒,不过我主宰更尖锐的去探听,或尝试自身在依照原子设计概念的基础上写一个袖珍的框架。我最终甄选了Sass作为预处理器和在Github上开创了一库organic-css。

原子(Atoms)

让自身匀先从框架最小的一有些开端——原子。维基百科是这么定义的,原子是物质的着力单位。在CSS中,我觉得它是一个品质和一个属性值,例如:

JavaScript

margin-top: 24px;

1
margin-top: 24px;

单独为了写样式添加原子而直接添加类名,那并不是本人想要的,若是有一个这么的项目:

JavaScript

body { margin-top: 24px; } header { margin-top: 24px; }

1
2
3
4
5
6
body {
    margin-top: 24px;
}
header {
    margin-top: 24px;  
}

预处理器将会错过她协调出力,因为我想要的结果是这么的:

JavaScript

body, header { margin-top: 24px; }

1
2
3
body, header {
    margin-top: 24px;
}

在Sass中得以接纳placeholders的作用,例如:

JavaScript

%margin-top-24 { margin-top: 24px; } body { @extend %margin-top-24; }
header { @extend %margin-top-24; }

1
2
3
4
5
6
7
8
9
10
%margin-top-24 {
 
    margin-top: 24px;
}
body {
    @extend %margin-top-24;
}
header {
    @extend %margin-top-24;
}

就此我只可以选择placeholder。那也表示,我必需求定义很多placeholders,才能运用。在那一刻,我说了算,这几个框架将只包含原子。或许有一些分子和通用的函数,例如reset.css、网格的定义等等。我想写点东西,作为一个基础的CSS开发。恐怕我会看到项目中的一些格局,将其位于主题处,作为一个从头,并维持到底和精炼。

政工变得特其他一致化,我创立了一个mixin作为一个原子。如这么些例子:

JavaScript

@include define-atom("block") { display: block; } @include
define-atom("font-family") { font-family: Georgia; }

1
2
3
4
5
6
@include define-atom(&quot;block&quot;) {
    display: block;
}
@include define-atom(&quot;font-family&quot;) {
    font-family: Georgia;
}

使用那种格局,我成立了一个原子群,并且可以很简单的适合用来各种品类。你可以点击查阅。我还要拿任何的框架作为对照,让本人更好的去履行,从中学到很多东西。还足以创设一个mixin分子,将原子相结合在共同:

JavaScript

@mixin header { // <- molecule called 'header' @include
atoms(( block, clearfix, font-family )); }

1
2
3
4
5
6
7
@mixin header { // &lt;- molecule called &#039;header&#039;
    @include atoms((
        block,
        clearfix,
        font-family
    ));
}

分子(Molecules)

成员是一个DOM成分须求样式,但她一贯不子成分。大概他有子成分,便也不会平昔连接到它。如<img
src=”logo.jpg”
/>,大概是一个分子。假若您很难在你的页面识别那些成员,只需求想到怎样是由原子创设就行。有些成分也有只怕是创设其他成员的原子。如:

JavaScript

@mixin login-box { @include atoms(( block, font-size-20, margin-top-23,
bold )); }

1
2
3
4
5
6
7
8
@mixin login-box {
    @include atoms((
        block,
        font-size-20,
        margin-top-23,
        bold
    ));
}

俺们将面对一些很有趣的事。比如说大家的body标签。他是怎么吗?它是一个分子或任何什么呢?当然,那必要有的体裁,但貌似在原子中富含其余成员。它应当是其他东西。我的下结论是,CSS应该是生死攸关部分,也就是说,借使body样式必要多少个原子,那么她就是一个成员。那也就意味着,从理论上讲,我不应有增大其余其他的成员给它。那看起来有些不切实际,但在一大半意况下,会让你选拔差其他选取器,那将是一个好的开拓进取迹象。

细胞器(Organelles)

借使你认识到这几个DOM成分是成员,那么您可以将其看到是一个细胞器。例如,典型的表单成分是一个很好的细胞器例子,他带有像label、input和textarea那样的成员。

JavaScript

.login-form { @include label; @include input; @include textarea; }

1
2
3
4
5
.login-form {
    @include label;
    @include input;
    @include textarea;
}

那几个大概是框轲中的一有的,它牢牢的连日到眼下应用程序中。原子和成员或者在差别品种里面活动,而细胞器是不大概会活动的。

更抽象(More abstractions)

无数时候你大概想把多少个其余东西放在一起,那样细胞器变得越来越空虚:

JavaScript

Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism

1
Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism

那将直面一个抉择难题,你将怎么样打造你的CSS。我此前只在一个项目中行使OrganicCSS,到近年来截止,我还是可以说她是清楚的。我把不相同的成分放在他们自身的目录中和按他们的名命名,那样本身得以很不难的找到她们,并做相应的拍卖。例如,假使有一个细胞器称为header,我只必要将其修改为o-header。后来,让本人读到HTML标记,我就能够阅览该因素的CSS样式就在细胞器文件夹中。

增加阅读

  • Micro framework following atomic
    design.

总结

那是一个很有趣的旅程。我不知情本人前几天会不会拔取OrganicCSS,但这并不是最要紧的有些。我能从中学到东西才是最要害的。我驾驭本身必须变更我们的CSS开发进度,我已毕了。我认为大家应当多谈谈CSS的框架。你可以看出我们有广大好的资源。大家不可以不找到她们,学习他们做什么样以及哪些工作。唯有那样我们才可以控制是还是不是利用他们。更好的是,当你看来任何图片你能够成立一些更契合您的必要。

专门讲明:本文有广大约念也是第一接触,就对此文举行翻译,尽管有知道错语的地点,希望不会给您带来误解,同时更期待那译文能改变您对CSS的营造形式,从而找出更适合你或你团队利用CSS的顶级办法。最终希望更加多的同行朋友能指正文中不正确的地点和享受有关的资源(^_^)

翻译手语:整个翻译依据原文线路进行,并在翻译进程略加了民用对技术的知道。假诺翻译有窘迫之处,还烦请同行朋友引导。多谢!

赞 2 收藏 1
评论

亚洲必赢官网 22

网站地图xml地图