然后做的更好

CSS: 试试,然后做的更好

2015/08/28 · CSS ·
CSS

本文由 伯乐在线 –
赖信涛
翻译,JustinWu
校稿。未经许可,禁止转发!
英文出处:css-tricks.com。欢迎参与翻译组。

您有没有担心过自己写的 CSS
都错了?有没有想过会失掉一些让整个变得更好更简单的新办法?是还是不是想在 CSS
方面更有自信呢?

那在那地点你和 Anna 肯定感同身受:

自身的 CSS充满了自家怀疑。现在 class
使用什么的名字系统更确切呢?将来如何又是最好的?什么是差的?

——Anna Debenham (@anna_debenham) November 13,
2014

纵然您也写了成百上千
CSS,然则根本不曾过这么的多疑,那么就相比较令人担心了。要么就是你一等聪明,要么,呵呵,你懂的

本身近年写 CSS
的方法是:即使尝试,做的更好。我不是想要宣扬特殊的方法论或者严峻的平整。那更像是一些宽松的原理,保险工作在可控的限定内,积极地品尝,然后做的更好一些。

提个醒:那是自己个人的格局。我工作的品种大致唯有自身要好承担 CSS。从近日css-tricks
上的投票来看,其中55%也一律适用于你。我想来,和你一起坐班的人更加多,我的提出的意义就越小。
//译注:原文 csstricks 网站边栏有一个投票。

以下就是事无巨细的原理:

绝不懒惰。你怎么着时候偷懒了,自己心灵都知道。比如对某个难点你喜欢草草的迅猛勘误,而不是干净了然这几个难点。或者是哪些文件看起来非常就及时将
CSS
放进去而不是思考它究竟该放在哪儿。又或者是当某个场景显然需求新的方式时您却齐镳并驱。

使用你喜欢的法子。知晓吧?在模块中自己爱不释手光明正天下使用子选拔器。.module > h2那种形式经常出现在本人的
CSS
中。严厉的方法论肯定不辅助那种做法,但是我可不管。在它出错以前,我会间接那样使用,可是到今日了却都是对的。假若它出错了,我再改。原因比较我事先所涉及的。

用你欣赏的法门实行命名。一经让自己根据某个规则来命名,我脑子里肯定会一团糟。我应当会花上一两日的时间来接受那几个规则,并且重新开展田间管理。大家的档次完全是基于自家要好的爱好举行命名的。总体上来说,我感到更轻松,更神速。

行使自己觉得高效的工具。自己不会推荐什么工具,因为好的工具是不分畛域的。要是我觉着某个工具很有用,我就会去用。只要它能节省时间,做出更好地功用,更好地集团,解决质量难点,自动做出最佳选项,不管它是什么,我用了。

有一条原则是自个儿直接以来坚信的:在整个项目中有限辅助拔取器的低特异性。结合
Harry
的特异性图表可以很好地通晓那句话。特异性是会稳步回升的,因而要防备一上马就生出高特异性,否则它会火速变成一个题材。可以设想多用:.class{}

有目标性地重新访问页面的逐条部分。目标不仅是反省各样部分的 CSS
良好,还要准备做的更好,适用于多数人。我意识每一遍自己再度访问一个地点,都是做最终润色的一个火候,那让自身对旧代码更有自信。

1 赞 2 收藏
评论

干什么要CSS模块化?

您是不是为class命名而倍感烦扰?
您是不是有怕跟人家使用相同class名而感觉到忧虑?
你是或不是因层级结构不清晰而深感困扰?
你是否因代码难以复用而倍感痛苦?
您是不是因为common.css的石破天惊而感到恐惧?

然后做的更好。如果有,恭喜你来对了地点!本文子禽为你一一解决这么些难点!

为何要CSS模块化?

你是否为class命名而深感苦恼? 

您是不是有怕跟人家拔取同一class名而感到忧虑? 

你是还是不是因层级结构不清楚而感觉到苦恼? 

你是或不是因代码难以复用而深感不适?

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

假使有,恭喜你来对了地方!本文少禽为你一一解决这几个难点!

为何要CSS模块化?

你是否为class命名而倍感苦恼? 

您是不是有怕跟人家接纳同一class名而感觉到忧虑? 

您是或不是因层级结构不清晰而感到不快? 

你是还是不是因代码难以复用而倍感痛楚?

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

假定有,恭喜您来对了地点!本文子禽为你一一解决这几个难题!

关于小编:赖信涛

亚洲必赢官网 1

个人网站

个人主页 ·
我的篇章 ·
18 ·
 

亚洲必赢官网 2

那就是说什么样缓解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作为固定一个元素选拔器;从质量上考虑也应尽量减弱选择器的层级。

那就是说什么样缓解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学和写都不难,那么写了连年CSS的同室是还是不是有静下来思考过,自己写CSS是有比较系统的和享有一定专业的,而不是含含糊糊的写CSS。其它就是自己写的CSS在协会中,其余同学是或不是能看到代码就精通你写的是何等?若是没有,那不仿看看那里提到的局地定义与思考,比如:Sass
、SCSS、LESS、BEM、OOCSS、AMCSS等。让大家一并来深入摸底css吧?

  • ###### 首先明白一下BEM(我个人对比喜欢的)

BEM的情趣就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队指出的一种前端命名方法论。那种高超的命超级模特式让您的CSS类对任何开发者来说尤为透明而且更有意义。BEM命名约定越发严格,而且富含更加多的音讯,它们用于一个协会开发一个耗时的大品类。

取名约定的方式如下:

.block{}   // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。
.block__element{}  // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。
.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不是一个框架,它只是一种沉思

怎么构建结构清晰的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不是一个框架,它只是一种考虑

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的上面距,从前对于这么一个样式,大家平时给那个容器创造一个类,并把这么些样式全体拉长。像上面那样。

// template
<div class="size1of4"></div>
// style
.size1of4 {
  background: blue;
  border: 1px solid #ccc;
  margin: 5px 10px 10px;
  width: 25%;
}

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

// template
<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
// style
.size1of4 {width: 25%;}
.bgBlue {background:blue}
.solidGray {border: 1px solid #ccc}
.mts {margin-top: 5px}
.mrm {margin-right: 10px}
.mbm {margin-bottom: 10px}
.mlm {margin-left: 10px}

OOCSS的优点

  • 减少CSS代码
  • 所有净化的HTML标记,有语义的类名,逻辑性强的层次关系
  • 语义标记,有助于SEO
  • 更好的页面优化,更快的加载时间(因为有很多零部件重用)
  • 可扩展的号子和CSS样式,有越来越多的机件可以松开库中,而不影响其他*
    的组件
  • 能轻轻松松构造新的页面布局,或创造新的页面风格

OOCSS的缺点

  • OOCSS适合真正的特大型网站开发,因为大型网站用到的可重用性组件特其余多,如若选取在小型项目中可能见不到什么功用。所以用不用OOCSS应该依照你的门类来决定。

  • 一经没用抢眼的选用,创造组件可能对于你的话是一堆没用的东西,成为一烂摊子,给你的护卫带来出人意料的杯具,说不定照旧个维护的梦魇。

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

  • ##### AMCSS(属性模块)

品质模块或者说AM,其主导就是关于定义命名空间用来写样式。通俗的讲就是,给一个元素加上属性,再通过品质选取器定位到那么些元素。达到防止过多的施用class。

// template
<div am- Row ></div>
<div am- Column = "12"> Full < /div> 
</ div> <div am- Row > <div am- Column = "4"> Thirds </div> 
<div am- Column = "4"> Thirds </div> 
<div am- Column = "4"> Thirds < /div> </ div> 
// style 
[am- Row ] { /* max-width, clearfixes */ } 
[am- Column ~= "1" ] { /* 1/12th width, floated */ } 
[am- Column ~= "2" ] { /* 1/6th width, floated */ } 
[am- Column ~= "3" ] { /* 1/4th width, floated */ } 
[am- Column ~= "4" ] { /* 1/3rd width, floated */ } 
[am- Column ~= "5" ] { /* 5/12th width, floated */ } /* etc */ 
[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的打造工具

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的营造工具

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(…)开关来支配导出全局。上面大家看一下板栗。

// 输入
: local (.className) { background: red; }
: local .className { color: green; } 
: local (.className .subClass) { color: green; } 
: local .className .subClass : global (. global - class -name) { color: blue; } 
// 导出 
._23_aKvs-b8bW2Vg3fwHozO { background: red; } 
._23_aKvs-b8bW2Vg3fwHozO { color: green; } 
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 { color: green; } 
._23_aKvs-b8bW2Vg3fwHozO ._13LGdX8RMStbBE9w-t0gZ1 . global - class -name { color: blue; }

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

{
  test: /\.css$/ ,
  use : [
    {
     loader: 'css-loader',
     options: {
       modules: true ,
       localIdentName: '[path][name]__[local]--[hash:base64:5]'
     }
   }
 ]
}
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 } 

CSS的scoped实现?

现行在各个框架中都会有scoped属性,使我们的css具有模块化性质,不会污染到此外模块,那么scoped是怎么贯彻的啊?大家一起来揭开它神秘的面罩吧?

借使您是一个早出晚归的校友,你一定会发觉在HTML的style标签中有一个scoped属性。让我们来一同看一下那么些特性的神奇吗。

直白以来,文档上的STYLE元素寻常都是效用域全局的,采用器根据全局的CSS优先规则来安装的。要兑现部分的接纳须求先选到容器元素,再用后代采取器来落成。scoped属性可以让STYLE元素不再效用于大局,而从当前STYLE元素所在的容器开端选用后代。

<div>
  <style scoped >
    span {color:red;}
  </style> 
   我是第1个DIV内的SPAN 
</div> 
<div> 
  <style scoped > 
    span {color:green;}
  </style> 
   我是第2个DIV内的SPAN  
</div>
<div> 
   我是第3个DIV内的SPAN  
</div>

结果:

亚洲必赢官网 3

结果

俺们得以看见第四个div并不曾被第一及第四个style所感染,也就是说带有scoped属性的css是一个独门的功效域,不会影响到任何模块!!太好了,那我们未来在style里面添加scoped属性就足以周到解决啦

亚洲必赢官网 4

慢!BUT,那种办法唯有在火狐浏览器才生效,别的浏览器就是最新的chrome浏览器也不帮助啊。我@#¥%……

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

亚洲必赢官网 5

微信图片_20170816201320.png

咦,那不就是我们恰好讲过的AMCSS(属性模块)的使用吗?也就是说vue在编译的时候,把带有scoped属性的的模块,加上了一个唯一的属性,然后经过类名+属性采取器的法子来达成模块化!

事实上任何框架也是用的好像的章程,大家再看一下,小程序wepy框架的兑现啊?

亚洲必赢官网 6

微信图片_20170817161148.png

其一是大家刚刚讲过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

     

结果:

亚洲必赢官网 7

大家得以看见第多少个div并不曾被第一及第三个style所感染,也就是说带有scoped属性的css是一个独立的作用域,不会影响到其它模块!!太好了,那大家今后在style里面添加scoped属性就足以周到解决啦亚洲必赢官网 8慢!BUT,那种方法唯有在火狐浏览器才生效,别的浏览器就是最新的chrome浏览器也不协理啊。我@#¥%……

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

亚洲必赢官网 9

哎呀,那不就是咱们恰好讲过的AMCSS(属性模块)的行使吗?也就是说vue在编译的时候,把带有scoped属性的的模块,加上了一个唯一的特性,然后经过类名+属性选取器的点子来落到实处模块化!

实质上任何框架也是用的接近的措施,大家再看一下,小程序wepy框架的达成啊?

亚洲必赢官网 10

那么些是我们刚刚讲过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

     

结果:

亚洲必赢官网 11

大家可以看见首个div并不曾被第一及第三个style所感染,也就是说带有scoped属性的css是一个单身的成效域,不会潜移默化到别的模块!!太好了,这大家今后在style里面添加scoped属性就足以圆满解决啦亚洲必赢官网 12慢!BUT,那种方式唯有在火狐浏览器才生效,其余浏览器就是最新的chrome浏览器也不协助啊。我@#¥%……

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

亚洲必赢官网 13

哎呀,那不就是大家刚刚讲过的AMCSS(属性模块)的选择吗?也就是说vue在编译的时候,把带有scoped属性的的模块,加上了一个唯一的属性,然后通过类名+属性采用器的办法来完成模块化!

实在任何框架也是用的好像的措施,大家再看一下,小程序wepy框架的落成吗?

亚洲必赢官网 14

以此是我们刚刚讲过OOCSS(面对对象CSS)!!

对的,那样组合框架来讲是或不是力所能及更能深远精晓大家刚刚讲过的始最后呀?

哪些按需加载css?

偶尔大家须要把一部分管用的广泛的css放到一个common.css里面,不过当大家项目丰富大的时候,common的情节就会变得非凡庞大,而且难以保险。

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

  • 嵌套语法
  • 变量
  • @import
  • 混入
  • 继承
  • 函数
  • 逻辑控制

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

要想解决那些标题,我们先是来看一看LESS中的mixin是怎么样运转的。

// 你可以混合“类”选择器或者“id”选择器,例如:
.a, #b {
  color: red;
}
.mixin-class
{
  .a();
}
.mixin-id {  
  #b();
}

如中将获得:

.a, #b {
  color: red;
}
.mixin-class
{
  color: red;
}
.mixin-id {
  color: red;
}  

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

.a();  //这两种调用方式效果是一样的
.a;

假若您想要创造一个混合集,不过却不想让它输出到您的体裁中,你能够在混合集的名字背后加上一个括号。

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

输出:

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

好了,大家知晓这些规律就足以用less中的mixins重新修改大家的common.less了,而且不会显示万分臃肿,大家得以按需加载大家的体裁了,是还是不是很棒啊

亚洲必赢官网 15

大家的CSS模块化就讲到那里了,有哪些意见或提出足以联系我哦!

亚洲必赢官网 16

自家的斯巴鲁号

如何按需加载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了,而且不会显示很是臃肿,咱们得以按需加载大家的体制了,是还是不是很棒啊亚洲必赢官网 17

大家的CSS模块化就讲到这里了,有何意见或提出足以联系自身哦!

 

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

只要您喜爱大家的稿子,关怀我们的公众号和大家互动吧。

亚洲必赢官网 18

怎么按需加载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了,而且不会来得极度臃肿,大家可以按需加载大家的样式了,是或不是很棒啊亚洲必赢官网 19

俺们的CSS模块化就讲到那里了,有啥样观点或提出可以联系自己啊!

 

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

即使您欣赏大家的文章,关切大家的万众号和大家相互吧。

亚洲必赢官网 20

网站地图xml地图