下一场做的更好

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,solidGray,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地图