CSS编写辅导专业,解耦你的HTML

解耦 HTML、CSS 和 JavaScript

2013/06/22 · CSS,
JavaScript · 2
评论 ·
CSS,
Javascript

本文由 伯乐在线 –
蝈蝈
翻译。未经许可,禁止转载!
英文出处:Philip
Walton。欢迎参与翻译组。

目前在互连网上,任何一个多少复杂的网站可能应用程序都会蕴藏众多HTML、CSS和JavaScript。随着网络使用的升高以及我们对它的器重日益扩展,设定一个有关团队和保养你的前端代码的布署是纯属要求的。

当今的有的重型网络公司,由于越多的人会触发到逐步增添的前端代码,它们会总结去锲而不舍代码的模块化。那样更改程序的一部分代码,并不会不知不觉中过多地震慑三番两次不相干部分的实践进度。

提防意外的结局不是一个便于化解的题材,特别是HTML,CSS和JavaScript本质上是互相正视的。更不好的是,当提到到前端代码时,一些古板总括机科学规范,比如关切分离,这一经久不衰使用在服务端开发中,很少会谈谈到。

在本文中,我将会讲讲我所学到的什么样去解耦我的HTML,CSS和JavaScript代码。从个人以及外人经验所得,那种的最好法子并不是那么明确,而日常是不直观的,而且有时还会与众多所谓的最佳实践相背离。

注:本文为翻译小说,原文<Decoupling Your HTML, CSS, and
JavaScript>

CSS架构

2013/04/24 · CSS ·
CSS

英文原文:CSS Architecture,编译:CSDN-张红月

Philip 沃尔顿 在AppFolio担任前端工程师,他在Santa Barbara on
Rails的团圆上提议了CSS架构和局地至上实践,并且在工作中一贯沿用。

善于CSS的Web开发人士不仅可以从视觉上复制实物原型,还足以用代码举办完善的显现。无需采纳表格、尽只怕少的利用图片。倘使您是个名副其实的大师,你可以赶快把新型和最典型的技能应用到您的体系中,比如媒体询问、过渡、滤镜、转换等。固然那一个都以一个真正的CSS高手所怀有的,但CSS很少被人独自拿出去研讨,可能用它去评估某个人的技巧。

有意思的是,我们很少那样去评价其他语言。Rails开发人士并不会因为其代码相比规范,就觉得她是一名卓越的开发人员。那无非是个原则。当然,他的代码得必须规范。此外,还需集合其余地方考虑,比如代码是不是可读?是还是不是不难修改或扩大……

那都以些很当然的题材,CSS和它们并没有怎么分裂之处。后天的Web应用程序要比在此以前尤其宏大。一个缺失深图远虑的CSS架构往往会削弱发展,是时候像评估其余语言这样,来评估一下CSS架构了,那一个都不应有置身“事后”考虑如故唯有属于设计师们的事体。

亚洲必赢官网 1

1.脍炙人口的CSS架构目标

在CSS社区,很难指出某个最佳实践已经改成我们的广阔共识。纯粹地从Hacker
News的评论上判断和开发者们对CSS
Lint文告后的反应来看,超过半数人对宗旨的CSS东西是持反对意见的。所以,并不是为投机的特等实践奠定一套核心的实证,而应该确定真正的对象。

好的CSS架构目的并不相同于开发一个好的应用程序,它必须是可预测、可选择、可爱抚和可伸缩的。

可预测

可预测意味着可以像预想的那样正式本人的表现。当您添加可能修改某个规则时,它并不会影响到没有点名的局地。对于一个小网站的话,一些微乎其微的改动并不算什么。而对此所有广大个页面的大网站来说,可预测却是必须的。

可重用

CSS规则应享有抽象和解耦性,那样你就足以在现有的功底上高速营造新的机件,无需另行修改编码格局。

可维护

当把新组件放置到网站上,并且实施添加、修改恐怕重新设计操作时,无需重构现有CSS,并且新加上的X并不会打破原有页面的Y组件。

可扩展

当网站发展到一定范围后,都须求展开维护和伸张。可增添的CSS意味着网站的CSS架构可以由个人恐怕社团轻易地管理,无需开支太多的读书成本。

 

2.普遍的失实实践

在落成完美的CSS架构目的从前,大家来看一些大规模的错误做法,那对大家完结目标是有实益的。

上边的那个事例即便都足以很好的执行,但却会给您带来许多干扰,尽管大家的企图和希望都以美好的,但是那个开销形式会让你头疼。

差不离在逐个网站上,都会有一个特定的杜撰成分看起来与其它页面是一点一滴等同的,可是唯有一个页面除外。当面对诸如此类一种处境时,大致每种新手CSS开发人士(甚至是经验充足的)都会以同样的形式来修改。你应当为该页面找出些新鲜之处(恐怕本人创办),然后再写一个新规则去操作。

基于父组件来修改组件

CSS

.widget { background: yellow; border: 1px solid black; color: black;
width: 50%; } #sidebar .widget { width: 200px; } body.homepage .widget
{ background: white; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.widget {  
  background: yellow;  
  border: 1px solid black;  
  color: black;  
  width: 50%;  
}  
 
#sidebar .widget {  
  width: 200px;  
}  
 
body.homepage .widget {  
  background: white;  
}

初看,这纯属是段无害的代码,但让我们来探视它是否达到了咱们所设置的靶子。

第一,例子中的widget是不可预言的。当那一个小部件出现在页面两侧或许主页面时,开发人士期望它们以某种特定的主意显示出来,且又不失特色。别的,它也是不行重用或不足增添的。

其它,它也比较难保险。一旦这一个widget须要重新规划,那么你只好修改其余多少个CSS样式。想象一下,如若那段代码是利用其他语言编写的,它基本就是一个类定义,然后在代码的另一有些采取该类定义并做出增添。那向来违反了软件开发的盛开/闭合(open/close)原则。

软件实体(类,模块,函数等)应对扩张开放,对修改闭合。

超负荷复杂的选拔器

突发性,会有点小说介绍CSS选用器对一切网站的来得起着那些关键的功力,并且声明无需使用其余类选取器可能ID接纳器。

但伴随着越长远的支付,我越会远离那种复杂的选取器。一个取舍器越复杂,与HTML就越耦合。依靠HTML标签和组合器可以保持HTML代码干干净净,但却让CSS越发毛重和紊乱。

XHTML

#main-nav ul li ul li div { } #content article h1:first-child { }
#sidebar > div > h3 + p { }

1
2
3
#main-nav ul li ul li div { }  
#content article h1:first-child { }  
#sidebar > div > h3 + p { }

对上边代码进行简单的敞亮。第二个或许是对下拉菜单举行样式化;首个想声明小说的主标题应该与其余页面的H1成分不一致;最终一个表示在首先段的侧面栏区域拉长一些额外的上空。

借使这几个HTML是永久不变的,这就无可说之处,但那根本毫无现实。过于复杂的选用器会令人印象深入,它可以让HTML摆脱掉表面上的错综复杂,但对此达成美好的CSS架构目的却绝不用处。

上边提到的事例都以不抱有可预测性、可接纳、可扩充和可爱护那四大特色的。例如首个选用器(下来菜单)例子,假设一个外观极度相似的下拉列表须求用在不相同的页面上,并且#main-nav并不属于内部因素,那么您是还是不是必要再一次规划?假若开发者想要修改第多个例证里div里面有些标志,那么整个规则都会被打破。

超负荷通用的类名

当创设可选拔的规划组件时,在组件的类接纳器中覆盖附件的子成分是很普遍的风貌。例如:

XHTML

<div class=”widget”> <h3 class=”title”>…</h3>
<div class=”contents”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In condimentum justo et est dapibus sit amet euismod
ligula ornare. Vivamus elementum accumsan dignissim. <button
class=”action”>Click Me!</button> </div> </div>

1
2
3
4
5
6
7
8
9
<div class="widget">  
  <h3 class="title">…</h3>  
  <div class="contents">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    In condimentum justo et est dapibus sit amet euismod ligula ornare.  
    Vivamus elementum accumsan dignissim.  
    <button class="action">Click Me!</button>  
  </div>  
</div>

CSS

.widget {} .widget .title {} .widget .contents {} .widget .action {}

1
2
3
4
.widget {}  
.widget .title {}  
.widget .contents {}  
.widget .action {}

像.title、.contents、.action那一个子成分类采取器可以被平安地展开体制命名,无需担心那些样式会蔓延到拥有相同类名的其余因素中。那是言之凿凿的。但它并从未堵住相同样式类名称会蔓延到那么些组件上。

在一部分大型项目上,像.title那样的称谓很有或者会被用在此外一个页面大概自身。如若那样的图景时有发生,那么一切标题部分明显会和预期的不一致。

超负荷通用的类选拔器名称会促成众多不行预测的CSS样式暴发。

一个条条框框做太多事

有时候,你要在网站的左上角区域做一个20pixels的可视化组件。

CSS

.widget { position: absolute; top: 20px; left: 20px; background-color:
red; font-size: 1.5em; text-transform: uppercase; }

1
2
3
4
5
6
7
8
.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

上面,你必要在网站的别样区域使用该器件,那么地点的这么些代码显著是不当的,不可重用的。

题材的重假如你让.widget这些选用器做的政工太多,不仅对该零件的职分展开了确定,还对它的外观和感到方面进行了体制。外观和感觉可以通用,而地方是不可以的。有时候,把它们组成起来使用反而会大让利扣。

固然那一个看起来并无害处,对一些缺少经验的CSS程序员来说,复制和粘贴已经成为一种习惯。倘诺一个新社团要求一个一定组件,比如.infobox,他们会尝试选用那几个类选用器。但一旦该消息框没有依据期望的那么,在各种必要的地点正确突显出来。这时,你以为他俩会怎么办?以本人的阅历来看,他们会打破可选拔这一规则,相反,他们会简单地把这么些代码复制粘贴到每种需求的地方。做些不要求的重新工作。

3.原因

下面列举的那么些健康错误实践都有一个相似性,CSS样式承担过多。

对那样的传道您会深感意外,终究,它是一个样式表,难道不应有负责一大半(假诺不是全部)的体裁吗?那不正是大家想要的呢?

确实。可是平日来讲,事情并不曾那么粗略。内容与表现(presentation)相分离是件善事,但CSS从HTML中独立出来并不表示内容也亟需从表现中分离。换句话说,如若CSS请求长远剖析HTML架构,那么从HTML中分拆所有的显得代码并不一定会兑现所有的靶子。

此外,HTML很少会只含有内容,也代表完全框架。日常,架构是会蕴藏container成分,允许CSS隔离一些一定成分。即使没有表象类(presentational
classes),也能混合HTML清晰地把内容浮现出来。

本人相信,鉴于方今的HTML和CSS状态,把HTML和CSS明智地整合起来,当做表现层是丰裕要求的。而通过沙盘和有些模板(partials)也可以把内容层开展分离。

 

4.化解方案。

一经把HTML和CSS结合起来,作为一个Web应用程序的变现层,那么它们须要采用一些格局更好地推进出色CSS架构的变异。

最好的方法是CSS中尽可能少的带有HTML架构。CSS则是应该定义成分的视觉效果,无论该视觉成分在哪儿。如果有一部分一定的零部件要求在区其余场合呈现不一致的功效,那么应该给予分裂的称号。例如,CSS通过.button类选取器定义了一个按钮组件。假若HTML想要一个一定的要素看起来像按钮,那么就可以使用.button。固然那里有特殊需求,那里的按钮与任何的相形见绌(有大概更大和宽些),那么CSS需求定义一个新的类,HTML能够行使新的类来予以该因素新的视觉效果。

CSS赋予成分的外在特征,HTML在页面上进展调用。更少的CSS能被越来越多的HTML架构调用是最好的。

确切地在HTML中宣示元素不仅可以清楚表明设计意图,其余开发者也得以清楚地翻看标记并且知道元素将显示的典范。若是没有那种实践,它很难区分一个要素的外观设置是明知故问或下意识的,那样很简单造成协会混乱。

在标记中填入大批量的类(classes)是种常见缺陷,那样做往往要求费用额外的活力。一个CSS样式可以给一个一定组件引用上千次。那么,为了在标记里面进行展示申明,就真正值得去重新编写那样的类吗?

固然那种担心是卓有成效的,但它或者会发出误导。言下之意就是无论你在CSS中动用一个父拔取器依旧亲手编写上千个Class,那里都会稍微额外的选料。在Rails或然其它框架里查看同级别抽象很大程度上可以在HTML中保险很好的视觉外观,并且无需在类中两遍又三次地编写相同的类。

 

5.一流实践。

本着地方的各个错误,我举办了很好地总括,并且依照自个儿经验指出了一部分指出,希望它们能支援你更好地促成杰出的CSS架构目的。

专注

确保接纳器对一部分元素不开展无关样式的最好点子是不给它们机会。例如像#main-nav
ul li ul li
div那样的接纳器或然很不难地应用于不想要的因素上。另一方面,像.subnav那样的选拔器就不会给它们别样机会。把类接纳器直接动用于您想要的成分上是最好的办法,并且可以保持成分的可预测性。

CSS

/* Grenade */ #main-nav ul li ul { } /* Sniper Rifle */ .subnav { }

1
2
3
4
5
/* Grenade */
#main-nav ul li ul { }  
 
/* Sniper Rifle */
.subnav { }

模块化

一个团伙结构可以的组件层可以协助缓解HTML架构与CSS那种松散的耦合性。其它,CSS组件本人应当是模块化的。组件应该清楚怎么举办体制和更好地劳作,不过关于布局、定位以及它们与周围元素的涉嫌不应有做太多的如果。

相似而言,CSS要定义的应该是组件的外观,而不是布局仍然地点。同样在动用background、color和font那么些属性时也要遵循原则选择。

布局和义务应该由一个单独的布局类依旧独立的器皿成分结合(请牢记,有效地把内容与体现进行分离其实就是把内容与容器举办分离)。

给类实行命名空间

大家曾经检查出为何父选取器无法在封闭和防护交叉样式污染方面发挥100%的功力。而一个更好的消除方案就是在类上应用命名空间。若是一个要素是可视化组件的一员,那么该因素的各样子元素都应有运用基于命名空间的零部件。

CSS

/* High risk of style cross-contamination */ .widget { } .widget
.title { } /* Low risk of style cross-contamination */ .widget { }
.widget-title { }

1
2
3
4
5
6
7
/* High risk of style cross-contamination */
.widget { }  
.widget .title { }  
 
/* Low risk of style cross-contamination */
.widget { }  
.widget-title { }

给类进行命名空间可以维持组件独立性和模块化。它可以把现有类争执降至最小并且收缩子成分的有些特殊须求。

成立修饰符类来增加组件

当一个现有组件必要在一个特定的语境中有所不一样时,能够创建一个修饰符类(modifier
class)来扩大它。

CSS

/* Bad */ .widget { } #sidebar .widget { } /* Good */ .widget { }
.widget-sidebar { }

1
2
3
4
5
6
7
/* Bad */
.widget { }  
#sidebar .widget { }  
 
/* Good */
.widget { }  
.widget-sidebar { }

正如大家看出的,基于父成分的弱项对组件进行改动,需求反复:一个修饰符类可以在其余地方拔取。基于地方的覆盖只可以被用在一个特定的职位,修饰符类也可以依照需求被频仍选用。显著,修饰符类是相符HTML开发者需要的。

把CSS协会成逻辑结构

Jonathan
Snook在其丰硕卓绝的《SMACSS》书中提到,CSS可以被分为八个差距的类:基础(base)、布局(layout)、模块(modules)和状态(state)。基础包括了复位原则和要素缺省值;布局是对站点范围内的要素进行定点以及像网格系统那样作为一种通用布局助手;模块即是可选取的视觉成分;状态即指样式,能够由此JavaScript进行开启或关闭。

零件是一个独立的视觉元素。模板在一边则是营造块。模板很少独自站在投机的角度去描述视觉和感觉,相反,它们是单纯的、可接纳的情势,可以放在一块儿形成组件。

为了提供更详实的事例,一个零件只怕就是一个情势对话框。该方式或然在头顶包涵渐变的网站签名、恐怕在四周会有阴影、在右上角会有关闭按钮、地点一定在笔直与水平线中间。那两个形式或然被网站再一次多次施用,所以在历次使用的时候,你都很少会想到重新编码与陈设。这个富有的模板即形成了一个模块组件。

因体制清劲风骨使用类

有过大型网站建设的人或许有个这么的经验,一个拥有类的HTML元素或然完全不晓得其用途。你想删除它,但是又顾后瞻前,因为它的作用你大概还未发现到。一旦那样的工作五次又五遍暴发的时候,随着时光的延迟,项目上校会有更加多这样的类,只因为公司成员都不敢删除。

CSS编写辅导专业,解耦你的HTML。在Web前端开发中,类承担了太多的权利,由此才会发出这么的题目。样式化HTML成分、扮演着JavaScript
hook角色、功用检测、自动化测试等。当那样多应用程序在使用类时,让您从HTML中剔除它们将会变的不得了困难。

唯独,使用一些老于世故的预约(惯例)即可完全幸免那种题材。当在HTML中看出一个类时,你应该立刻了然它的目的。我指出在前头使用前缀,例如用于JavaScript的在前头加.js,表示Modernizr
classes可以在前方加.supports,没有加前缀的即用于表示样式。

那样来发现未利用的类和从HTML中移除它们将会变得万分简单。你还是能自行完结那么些进程,在JavaScript中经过交叉引用HTML中的document.styleSheets对象。尽管在document.styleSheets中没有意识此类,即可安全移除。

相似的话,最佳做法是把内容与示范相分离,此外把效果分别开来也同样主要。使用样式类像JavaScript
hook在某种程度上得以变本加厉CSS与JavaScript之间的耦合,但在不打破作用性的前提下很难大概根本不能改动外观。

有逻辑的命名类

大部写CSS的人欢畅使用连字符来分隔命名词,但连字符并不足以区分不同门类之间的类。

Nicolas
Gallagher近来针对碰着的题材写了一个解决方案,并且取得了惊天动地的打响(略有改动),为了验证命名约定,可以设想以下格式:

CSS

/* A component */ .button-group { } /* A component modifier
(modifying .button) */ .button-primary { } /* A component sub-object
(lives within .button) */ .button-icon { } /* Is this a component
class or a layout class? */ .header { }

1
2
3
4
5
6
7
8
9
10
11
/* A component */
.button-group { }  
 
/* A component modifier (modifying .button) */
.button-primary { }  
 
/* A component sub-object (lives within .button) */
.button-icon { }  
 
/* Is this a component class or a layout class? */
.header { }

从上述类中得以窥见其很难正确区分类型规则。这不仅会困惑,而且连自动测试CSS和HTML也变的很难。一个结构化的命名约定应该是初看就可以领悟其类名与任何类之间的涉嫌,并且知道它出现在HTML中的地方——职务名更加简明和简单测试。

CSS

/* Templates Rules (using Sass placeholders) */ %template-name
%template-name–modifier-name %template-name__sub-object
%template-name__sub-object–modifier-name /* Component Rules */
.component-name .component-name–modifier-name
.component-name__sub-object
.component-name__sub-object–modifier-name /* Layout Rules */
.l-layout-method .grid /* State Rules *亚洲必赢官网 ,/ .is-state-type /* Non-styled
JavaScript Hooks */ .js-action-name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* Templates Rules (using Sass placeholders) */
%template-name  
 
%template-name–modifier-name  
 
%template-name__sub-object  
 
%template-name__sub-object–modifier-name  
 
 
/* Component Rules */
.component-name  
.component-name–modifier-name  
.component-name__sub-object  
.component-name__sub-object–modifier-name  
 
/* Layout Rules */
.l-layout-method  
.grid  
 
/* State Rules */
.is-state-type  
 
/* Non-styled JavaScript Hooks */
.js-action-name

重做首个例子:

CSS

/* A component */ .button-group { } /* A component modifier
(modifying .button) */ .button–primary { } /* A component sub-object
(lives within .button) */ .button__icon { } /* A layout class */
.l-header { }

1
2
3
4
5
6
7
8
9
10
11
/* A component */
.button-group { }  
 
/* A component modifier (modifying .button) */
.button–primary { }  
 
/* A component sub-object (lives within .button) */
.button__icon { }  
 
/* A layout class */
.l-header { }

 

6.工具

护卫一个迅速且协会优良的CSS架构是不行拮据的,特别是在大型集团中。上面向大家推荐两款很好的工具来帮你管理网站CSS架构。

CSS Preprocessor

CSS预处理器接纳PHP5编写,有预处理器的广泛作用,可以帮你疾速编写CSS。此外有些号称“作用”的预处理器实际上并不会对CSS架构爆发杰出效益。上面我提供一个列表,在选拔时一定要避免:

  • 切勿纯粹为了社团代码来嵌套规则。唯有当输出你实在想要的CSS时才得以。
  • 在无需传递参数的时候切勿使用mixin,不带参数的mixin更契合当作模板,易扩大。
  • 切勿在采用器上选择@extend,它不是个十足的类。从设计角度来看是毫无意义的,它会膨胀编译过的CSS。
  • 在应用组件修饰符规则时,切勿使用@extend UI组件,那样会错过基础链。

@extend和%placeholder是预处理器里面尤其好的八个职能。它们可以帮你轻轻松松管理CSS抽象并且无需添加bloat和大气的基类到CSS和HTML里,否则将会很难管理。

当你首先使用@extend时,常会与修饰符类一起利用,例如:

CSS

.button { /* button styles */ } /* Bad */ .button–primary { @extend
.button; /* modification styles */ }

1
2
3
4
5
6
7
8
9
.button {  
  /* button styles */
}  
 
/* Bad */
.button–primary {  
  @extend .button;  
  /* modification styles */
}

如此那般做会让你在HTML中失去继承链。很难使用JavaScript采取具有的按钮实例。

作为一般规则,很少去扩张UI组件恐怕在知情类型后做些什么。这是分别模板和组件的一种格局,模板无需参加到应用程序的逻辑,并且可以使用预处理器举行安全扩大。

上面是一个引用上边的形式例子:

CSS

.modal { @extend %dialog; @extend %drop-shadow; @extend
%statically-centered; /* other modal styles */ } .modal__close {
@extend %dialog__close; /* other close button styles */ }
.modal__header { @extend %background-gradient; /* other modal header
styles */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.modal {  
  @extend %dialog;  
  @extend %drop-shadow;  
  @extend %statically-centered;  
  /* other modal styles */
}  
 
.modal__close {  
  @extend %dialog__close;  
  /* other close button styles */
}  
 
.modal__header {  
  @extend %background-gradient;  
  /* other modal header styles */
}

CSS Lint

CSS Lint是由Nicole
Sullivan和Nicholas
Zakas编纂的一款代码质量检测工具,帮忙CSS开发人士写出更好的代码。他们的网站上是那样介绍CSS
Lint的:

CSS
Lint是一个用来帮你找出CSS代码中难题的工具,它可做为主的语法检查以及选拔一套预设的条条框框来检查代码中的难点,规则是足以扩充的。

使用CSS Lint建议:

  • 1.毫不在选用器中出现ID。
  • 2.在多一些规则中,不要使用非语义(non-semantic)类型拔取器,例如DIV、SPAN等。
  • 3.在一个挑选器中使用的连接符(combinator)不要当先2个。
  • 4.任何类名都休想以“js-”起头。
  • 5.如果在非“I-”前缀规则里平日利用布局和定位应予以警示
  • 6.如若一个类定义后被重复定义成子类,也应给予警告。

 

总结

CSS不仅仅是视觉设计,也毫不因为您编写CSS就不管抛出编程的最佳实践。像OOP、DRY、打开/闭合、与内容分别等这几个规则应有运用到CSS里面。无论你如何社团代码,都要力保艺术确实协助到你,并且使您的开发特别便于和可保证的。

赞 3 收藏
评论

亚洲必赢官网 2

CSS编写指导标准和指出,CSS编写指点标准

 在参加范围庞大、历时漫长且参预人口过多的档次时,所有开发者遵从如下规则极为紧要:

  • 保证 CSS 易于尊崇
  • 维持代码清晰易懂
  • 有限支撑 CSS 的可拓展性

  为了兑现这一对象,大家要选用诸多主意。

  本文档第一部分将探索语法、格式以及分析 CSS
结构;第二有的将围绕方法论、思维框架以及编写与安顿 CSS 的眼光。

亚洲必赢官网 3


目标

HTML,CSS和JavaScript之间总会存在耦合关联。不管怎么着,这个技巧与生俱来就是要和其他举办互动。举个例子,一种飞闪转换职能兴许会在样式表中用富含类选用器定义,但它平日由HTML开端化,并通过用户交互,如编写JavaScript,来触发。由于前端代码的有些耦合是不可逆袭的,你的靶子就不应有是简单地化解之间的耦合,而应当是收缩代码间不必要的看重耦合关系。一个后端开发者应该力所能及对HTML模板中的标记举行更改,而无需担心意外破坏CSS规则或然有些JavaScript功效。由于现行的web团队日渐增大且专业化,那么些目标比过去更甚。

前天在web上其余大一些的网站或应用程序都饱含大批量的html,css和javascript。随着互联网的进步和大家对互连网越来越正视,陈设社团和保险你的前端代码是纯属少不了的。

 CSS 文档分析

  无论编写什么文档,我们都应当保持统一的作风,包含联合的笺注、统一的语法与统一的命名规范。

反模式

前者代码的紧耦合现象并不三番五次很醒目。事实上复杂的是,一方面看起来似乎松耦合,但从一方面则是紧耦合。以下是自己曾经多次做过仍旧看过,以及吸取我的不是中,总括的装有的反情势。对各个情势,我会尝试去解释为啥耦合这么不佳,并且指出什么去幸免它。

超负荷复杂的选拔器

CSS Zen
加登向世界显示了你可以完全改变整个网站的外观而无需变更任意一个的HTML标记。那是语义网运动的独领风骚代表,主要条件之一就是去防止采取表象类。乍一看,CSS
Zen
加登只怕看起来像是一个很好的解耦合例子,毕竟,把体制从标记语言中分离出来是它的严重性所在。不过,若根据那样做,难题就来了,你会日常须求在你的体裁表里有那般的选取器,如下:

JavaScript

#sidebar section:first-child h3 + p { }

1
#sidebar section:first-child h3 + p { }

CSS Zen
加登中,即使HTML大概与CSS完全分开,但CSS会强耦合到HTML中去,此时就须要你对标记语言的构造有深层次的精通。那说不定看起来就好像并不是很不佳,尤其是某人爱惜着CSS,同时要求维护HTML,但只要你伸张了重重人手进去,那种情状就变得无法控制了。即使某个开发者在某种情况下在首个<section>前伸张了<div>,上面的规则就不可以生效,可是他也不亮堂里边原因。

若是你网站的记号很少改动,CSS Zen
加登就是一个万分不错的呼声。不过那和前几天的Web应用不尽然皆以那种景观。与冗长而又复杂的CSS选用器比较,最好的主意是在可视化组件本身的根元素增添一个或三个类选择器。比如,倘若侧边栏有子菜单,只需求为每一个子菜单成分扩展submenu类选取器,而毫不用这么的花样:

CSS

ul.sidebar > li > ul { /* submenu styles */ }

1
2
3
ul.sidebar > li > ul {
  /* submenu styles */
}

那种艺术的结果是在HTML中要求越来越多的类接纳器,但从长久来看,那又降低了耦合度,以及让代码更可选取和可珍重,并且仍能让你的标记自文档化。若是HTML里没有类选拔器,那多少个对CSS不熟悉的开发者就不清楚HTML的改变怎么着影响了任何代码。另一方面,在HTML中利用类接纳器能很清晰地看出那一个体制或许功用被应用到了。

今天大一些的web集团,越多的人接触越到比例更是大的前端代码。由此,大多数商行努力有限支撑他们的代码模块化。改变一个应用程序的一有的平常无意中影响到近似不相干的其余部分。

  总则

  将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL
等能够算作例外,终归那有些大家也不能。

  我赞成于用 4 个空格而非 Tab 缩进,并且将宣示拆分成多行。

几个类选用器的天职

一个类选取器往往是用来还要作为样式和JavaScript的钩子。尽管那看起来似乎很节省(因为至少压缩了一个类标志),但实则,那是把成分的突显和效果耦合起来了。

XHTML

<button class=”add-item”>Add to Cart</button>

1
<button class="add-item">Add to Cart</button>

上述例子描述了一个分包add-item类样式的”添加到购物车”按钮。

设若开发者想为此因素添加一个单击事件监听器,用已经存在的类选用器作为钩子非凡的不难。我的趣味是,既然已经存在了一个,为什么要添加另一个啊?
可是想想看,有很多像那样的按钮,遍布了上上下下网站,都调用了一致的JavaScript作用。再想想看,如若市场社团想要其中一个和其余看起来完全分歧但效果雷同的按钮呢。只怕那样就须要越来越多显明的情调了。

难点就来了,因为监听单击事件的JavaScript代码希望add-item类采取器被应用到,但是你新的按钮又力不从心使用那几个样式(大概它必须排除所有宣称的,然后再重置新的样式)。还有,如若您测试的代码同时也目的在于选择add-item类接纳器,那么你只可以要去立异那么代码应用的地点。更不佳的是,即便这么些”添加到购物车”功效不仅仅是当前使用使用的话,相当于说,把那份代码抽象出来作为一个独立的模块,那么就是一个简练的体裁修改,或者会在一齐两样的施用中吸引难题。

应用javaScript钩子最好的(事实上也是相比鼓励的)做法是,假如您必要这么做,使用一种方法来防止样式和作为类拔取器之间的耦合。

自个儿的私家指出是让JavaScript钩子使用前缀,比如:js-*。那样的话,当开发者在HTML源代码中见到如此的类拔取器,他就完全通晓其中缘由了。所以,上述的”添加到购物车”的例子可以重写成这么:

XHTML

<button class=”js-add-to-cart add-item”>Add to Cart</button>

1
<button class="js-add-to-cart add-item">Add to Cart</button>

明天,假使须要一个看起来分裂的按钮,你可以很简短地修改下样式类选用器,而无论是行为的类接纳器。

XHTML

<button class=”js-add-to-cart add-item-special”>Add to
Cart</button>

1
<button class="js-add-to-cart add-item-special">Add to Cart</button>

防护意外的震慑不是一个便于解决的题材,特别是出于HTML、CSS和JavaScript本身是相互关联的。

  单一文件与多文本

  有人喜欢在一份文件文件中编辑所有的故事情节,而自我在搬迁至 Sass
未来初阶将样式拆分成五个小文件。那都以很好的做法。无论你挑选哪一种,下文的平整都将适用,而且只要您听从这个规则的话你也不会遭逢哪些问题。那二种写法的界别仅仅在于目录以及区块标题:

JavaScript愈多的体制操作

JavaScript能用类接纳器去DOM中查找成分,同样,它也能透过伸张或移除类拔取器来改变成分的样式。但假如那些类选取器和当下加载页面时区其他话也会有难题。当JavaScript代码使用太多的整合样式操作时,那么些CSS开发者就会轻易去改变样式表,却不明了破坏了根本成效。也并不是说,JavaScript不应该在用户交互之后更改可视化组件的外观,而是一旦如此做,就应当运用一种同等的接口,应该选择和暗中认同样式区其他类选择器。

和js-*前缀的类选拔器类似,我推荐使用is-*前缀的类选拔器来定义这个要改成可视化组件的情况,这样的CSS规则可以像那样:

JavaScript

.pop-up.is-visible { }

1
.pop-up.is-visible { }

留神到状态类选拔器(is-visible)是接连在组件类选择器(pop-up)后,那很要紧。因为状态规则是讲述一个的景观,不应该单独列出。如此不一样就可以用来分别更多和暗许组件样式不一样的意况样式。

除此以外,可以让我们可以编写测试场景来保险像is-*如此这般的前缀约定是还是不是遵从。一种测试这几个规则的办法是利用CSSLint和HTML
Inspector。

越多关于特定情景类选取可以查看乔纳森 Snnok编写的非常卓越的SMACSS书籍。

更不佳的是,古板的微机科学标准如分离关注点,一直是劳动器端开发的一局地,却很少被琢磨在前端代码中。

  目录

  在 CSS 的启幕,我会维护一份目录,就像是这样:

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............You’re reading it!
 * RESET...............Set our reset defaults
 * FONT-FACE...........Import brand font files
 */

  这份目录可以告知其他开发者这一个文件中实际包括什么内容。那份目录中的每一项都与其对应的区块标题相同。

  如果您在保证一份单文件
CSS,对应的区块将也在同样文件中。假使您是在编辑一组小文件,那么目录中的每一项应当对应相应的
@include 语句。

JavaScript”选择器”

jQuery和新的API,像document.querySelectorAll,让用户非凡简单地通过一种他们早已非凡领会的语言–CSS选取器来查找DOM中的成分。尽管如此有力,但一样有CSS拔取器已经存在的等同的题材。JavaScript采用器不应过度倚重于DOM结构。那样的拔取器格外慢,并且须求更长远认识HTML知识。

就率先个例子来讲,负责HTML模板的开发者应该能在标记上做为主的更改,而不需担心破坏基本的作用。假如有个功能会被弄坏,那么它就相应在标记上明明。

本身已经提及到应该用js-*前缀的类选用器来表示JavaScript钩子。别的针对解决样式和作用类选用器之间的二义性,须要在标记中表明出来。当某人编写HTML看到js-*前缀的类选取器时,他就会了解那是别有用途的。但假若JavaScript代码使用一定的符号结构查找成分时,正在触发的成效在标记上就不那么明显了。

为了幸免采用冗长而又扑朔迷离的接纳器遍历DOM,百折不挠运用单一的类照旧ID选取器。
考虑以下代码:

JavaScript

var saveBtn = document.querySelector(“#modal div:last-child >
button:last-child”)

1
var saveBtn = document.querySelector("#modal div:last-child > button:last-child")

如此那般长的选拔器是足以节省你在HTML中添加一个类拔取器,但同样让您的代码对于标记更改相当不难受到震慑。如若设计者突然决定要把有限支撑按钮放在右侧,而让废除按钮放在左边,那样的选用器就不再匹配了。

一个更好的格局(使用上述的前缀方法)是一味使用类选取器。

JavaScript

var saveBtn = document.querySelector(“.js-save-btn”)

1
var saveBtn = document.querySelector(".js-save-btn")

近日标记可以变动它想改的,并且只要类接纳仍然在正确的因素上,一切都会很健康。

在本文中,我将探讨本身是什么样学会分离我的HTML、CSS和JavaScript。据自身的经验和本身所了然的其旁人的阅历,完毕目的的最好的办法是不醒目,反直觉的,有时不便宜大批量所谓的“最佳实践”的。

  区块标题

  目录应该对应区块的标题。如下:

/*------------------------------------*\
    $RESET
\*------------------------------------*/

  区块标题前缀 $ 可以让大家采用 [Cmd|Ctrl]+F
命令查找标题名时将追寻范围界定在区块标题中。

  如果您在维护一份大文件,那么在区块之间空 5 行,如下:

/*------------------------------------*\
    $RESET
\*------------------------------------*/
[Our
reset
styles]





/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/

  在大文件中高速查看时那个大块的空档有助于区分区块。

  如果您在维护多份以 include 连接的 CSS
的话,在每份文件头加上标题即可,不必如此空行。

类选用器就是您的契约

使用方便的类接纳器以及可预测的类名约定可以减小大约各种HTML,CSS和JavaScript之间的耦合。初叶是因为为了彰显HTML要求领悟许多类选拔器的名称,那种在标记中行使过多类选拔器看起来像是强耦合的马迹蛛丝。不过我意识,使用类接纳器和历史观编程设计中的事件如故观望者格局极度相似。在事件驱动编程中,为了不直接在目的A上调用对象B,而是对象A不难地在提供的环境中公布一个一定的风云,然后对象B能够订阅那几个事件。那样,对象B就不需求知道其他有关目的A的接口,而唯有须求领悟监听什么风浪。按理说,事件系统要求某种方式上的耦合,因为对象B须求精通订阅的轩然大波名称,但和对象A必要知道对象B的国有措施相比较,这一度更松散的耦合了。

HTML类接纳器都分外相似。与CSS文件中定义复杂的选用器(如同HTML的内部接口一样)不一致的是,它可以通过单一类拔取器不难定义一个可视化组件的外观。CSS文件不要求关切HTML对类采用器的行使与否。同样,JavaScript不用那个急需更深入了解HTML结构的复杂DOM遍历功用,而是唯有监听与类名一致的要素的用户交互。类拔取器应该像是胶水一样,把HTML,CSS和JavaScript连接在协同。从个体经验得知,它们也是最不难以及最好的法门把三者技术连接起来,而不是因陋就简过度。

目标

HTML、CSS和JavaScript之直接连会有部分耦合。不管怎么样,这几个技能被用来互相作用。举个例子,一个fly-in
transition(飞入变换)只怕在体制表中定义了一个类选拔器,但它一般是由用户交互来触发,通过JavaScript来进行,并且经过在html中添加一个类来初阶化。

出于在你的前端代码中设有一些耦合是不可防止的。你的对象不该是不难地全盘打消耦合,而应当是最小化耦合,使那有的代码不必借助于其余一些。

后端开发人士应该可以改变HTML模板中的标记而不用担心不小心破坏一个CSS规则或部分JavaScript功用。随着前日的Web团队规模的增大和专业化,这一目标是比过去更重视。

 代码顺序

  尽量听从一定顺序编排规则,那将保证您丰盛发挥 CSS 中首先个 C
的意思:cascade,层叠。

  一份规划非凡的 CSS 应当比照如下排列:

  如此一来,当您各种编写 CSS
时,各个区块都足以自动一而再在它前边区块的质量。那样就可以减弱代码相互抵消的一部分,收缩某些特殊的难题,组成更了不起的
CSS 结构。

  关于这上边的越多新闻,强烈推荐 Jonathan Snook 的 SMACSS。

未来

网页超文本技术工作小组(WHATWG)正在转业于web组件的正式,能让开发者把HTML,CSS和JavaScript绑定一起作为一个单独的机件大概模块,并与其他的页面元素进行相互封装。假设那个标准已经在一大半的浏览器中落到实处的话,那么我在本文中提供的过多指出就变得不那么重大了(因为代码和什么人交互变得很明显);可是无论如何,理解这几个更广泛的基准以及为什么必要它们依然很关键。尽管那个实践在Web组件时期会变得不那么重大,但中间的说理依然适用。在巨型团队和重型应用中的实践依然要适用于小模块的编撰中,反之则不要求。

反模式

前端代码是还是不是一环扣一环耦合并不是驰名中外的。不过雪上加霜的是,从一个角度接近松散耦合从另一个角度看事实上却是紧凑耦合的。

以下都以反格局,包罗自家屡屡见过或自个儿亲身做过并从自身的荒谬中学会的。对每种,我准备解释为啥耦合是不好的,以及怎么样避免。

 CSS 样式集分析

[selector]{
    [property]:[value];
    [<- Declaration ->]
}

[选择器]{
    [属性]:[值];
    [<- 声明 ->]
}

  编写 CSS 样式时,我习惯遵循这个规则:

  • class 名称以连字符(-)连接,除了下文提到的 BEM 命名法;
  • 缩进 4 空格;
  • 声称拆分成多行;
  • 宣示以相关性顺序排列,而非字母顺序;
  • 有前缀的扬言适当缩进,从而对齐其值;
  • 缩进样式集从而反映 DOM;
  • 保留最终一条评释最终的支行。

  例如:

.widget{
    padding:10px;
    border:1px solid #BADA55;
    background-color:#C0FFEE;
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
}
    .widget-heading{
        font-size:1.5rem;
        line-height:1;
        font-weight:bold;
        color:#BADA55;
        margin-right:-10px;
        margin-left: -10px;
        padding:0.25em;
    }

  大家可以发现,.widget-heading 是 .widget
的子成分,因为前者的样式集比后者多缩进了一级。那样经过缩进就能够让开发者在翻阅代码时神速拿到那样的紧要消息。

  大家还足以窥见 .widget-heading
的讲明是基于其相关性排列的:.widget-heading
是行间成分,所以大家先添加字体相关的样式讲明,接下去是此外的。

  以下是一个从未有过拆分成多行的例证:

.t10    { width:10% }
.t20    { width:20% }
.t25    { width:25% }       /* 1/4 */
.t30    { width:30% }
.t33    { width:33.333% }   /* 1/3 */
.t40    { width:40% }
.t50    { width:50% }       /* 1/2 */
.t60    { width:60% }
.t66    { width:66.666% }   /* 2/3 */
.t70    { width:70% }
.t75    { width:75% }       /* 3/4*/
.t80    { width:80% }
.t90    { width:90% }

  在这一个事例(来自inuit.css’s table grid system)中,将 CSS
放在一行内可以使得代码更严密。

结论

可保证的HTML,CSS和JavaScript的标志是各样开发者可以简单并且很自信地编写代码库的各种部分,而不需担心那么些修改会无意中影响到任何不相干部分。阻止那样意外的后果的最佳方法之一是,通过一组可以发挥其义的,任何开发者碰到时能想出它的用处的,可预测的人性化的类选取器名,把那三者技术整合在共同。

为幸免上述的反方式,请把下述的条件谨记于心:

  • 1.
    在CSS和JavaScript里,优先考虑显式组件和作为类接纳器,而不是繁体的CSS选择器。
    1. 命名组件要基于它们是什么样,而不是它们在哪个地方
    1. 并非为样式和行为采用同样的类选取器去
    1. 把状态样式和暗中认同样式区分开来

在HTML中如此运用类接纳器平时会须求多多亟需表现的类选取器,但得到的是可预知性和可维护性,这一点值得肯定。毕竟,为HTML扩张类采用器是一对一不难的,不需求开发者有稍许技术。摘自尼科尔as
Gallagher的原话:

当你要寻找一种形式来压缩花费在编排和修改CSS的时日上来制作HTML和CSS时,那就涉嫌到您不或者不承受假使您想改变样式,你是不想花费越多时光去改变HTML成分上的类接纳器。那对前者和后端开发者都有必然的实用性,任什么人都得以重新安插预营造的乐高积木。那样没有人会去显得CSS的魔力了。

1 赞 收藏 2
评论

过度复杂的采取器

CSS禅意花园向世界注明了你可以完全改变总体网站的外观并丝毫不曾变动标记。那是语义Web的活动的海报,和它的一个最主要条件是防止选用表象的类。

乍一看,CSS禅意花园可能看起来像一个解耦的很好的例子。毕竟,它的全体含义是将样式从标记分离。但是,难点是,要到位那或多或少,你平凡需求在你的样式表看起来像下边那样的拔取器:

#sidebar section:first-child h3 + p { }

CSS禅意花园中,HTML大致全盘退出了CSS,但CSS对html是极品耦合和内需社团的标志的学识极度精晓。

那看起来还不易假诺一个人即维护CSS还维护HTML,可是如果您扩充一些越来越多的人到你的构成,它高效就会失控。要是一个开发者来临并加上一个<
div >在<section>从前,上述规则将不会做事,开发人士恐怕不晓得自个儿做了哪些。

CSS禅意花园是一个了不起的想法,只要你的网站的标志很少改变。但明日的Web应用程序日常不会有那样的景况。

取而代之冗长,复杂的CSS选取器,最好(只要有可能)风格是您所有的可视化组件有一个或多少个类在根成分组件本人上。例如,若是您在您的边栏里有一个子菜单,仅仅添加submenu类到每种子菜单成分,而不用像下面那样:

ul.sidebar > li > ul {
  /* submenu styles */
}

那种措施最后需要越多的类在HTML中,但它会降低(html,css)之间的耦合,从长远来看那使CSS代码更可选择和可保护。它也得以让你的符号标记标记自我(self-documenting)。假若在HTML中没有类,开发人士不清楚CSS不能预感她的号子变化将震慑其余的代码。另一方面,如若在HTML有类那很肯定要素被利用的体裁和功用。

 命名规范

  一般景色下我都以以连字符(-)连接 class 的名字(例如 .foo-bar 而非
.foo_bar 或 .fooBar),可是在少数特定的时候自个儿会用 BEM(Block, Element,
Modifier)命名法。

  BEM 命名法可以使得选拔器更标准,更清楚,更具语义。

  该命名法依据如下格式:

.block{}
.block__element{}
.block--modifier{}

  其中:

  • .block 代表某个基本的说梅止渴成分;
  • .block__element 代表结合 .block 的一个子成分;
  • .block–modifier 代表 .block 的某部差异景况或版本。

  打个比方:

.person{}
.person--woman{}
    .person__hand{}
    .person__hand--left{}
    .person__hand--right{}

  这几个事例中我们描述的中坚要素是一个人,然后这厮大概是一个妇人。大家还知道人拥有手,那一个是身体的一有些,而手也有两样的状态,就如左手与右手。

  那样大家就足以依据亲成分来划定选取器的命名空间并转达该选取器的效率,例如依照那些接纳器是一个子成分(__)依旧其亲成分的两样景况(–)。

  由此,.page-wrapper
是一个独自的选取器。那是一个符合规范的命名,因为它不是别的成分的子成分或任何情状;可是.widget-heading 则与其余对象有涉嫌,它应当是 .widget
的子成分,所以我们应有将其重命名为 .widget__heading。

  BEM
命名法纵然不太美观,而且卓殊冗长,可是它使得大家得以因而名称飞速获知成分的功用和因素之间的涉及。与此同时,BEM
语法中的重复部分至极便宜 gzip 的压缩算法。

  无论你是或不是拔取 BEM 命名法,你都应当保障 class
命名得当,力保一字不多、一字不少;将成分命名抽象化以增强复用性(例如
.ui-list,.media)。子成分的命名则要尽大概精准(例如
.user-avatar-link)。不用操心 class 名的数目或长度,因为写得好的代码
gzip 也能管用收缩。

关于小编:蝈蝈

亚洲必赢官网 4

(微博博客园:@烈焱石)
个人主页 ·
我的篇章

亚洲必赢官网 5

一个类有超过一个职务

偶然一个类即用于样式的目标,还作为一个JavaScript钩子(javascript拔取符)。纵然那或许看起来像一个节约(因为它须求一个更少的类标志)实际上一个要素表示和作为的耦合。

<button class="add-item">Add to Cart</button>

地点的例证体现了一个“添加到购物车”按钮样式与添加物品类。

若是开发者想要给那个成分添加一个单击事件监听器,它可以很简单将早已存在的类当作挂钩。我的意趣是,如若一个(类)已经存在,为何要添加另一个呢?

可是想象一下,在方方面面网站里,有不少那个按钮,他们全都看起来一样,并且全体调用相同的JavaScript成效。然后想象一下营销集团想要其中一个按钮看起来完全与众差距。只怕它需求多多更大的更引发眼球的颜料。

这里有一个标题,因为JavaScript代码里单击事件监听器期待 add-item
类继续被采用,不过你的新按钮未来无法应用那些类(或它必须复原一切早已宣称的(样式)并且重置新样式)。更大的题材是,假如你有局地测试代码,也冀瞅着add-item类出现,所以您也会有另一个地点的代码(测试代码)须要更新。

更不佳的是只要您的 “Add
to Cart”
作用使用的不可是这个应用程序。假使代码已经被架空到一个单独的模块然后一个概括的作风改变现行可能在完全两样的应用程序间引入bug。

运用类作为JavaScript钩子是截然可以承受的(实际上鼓励),然而一旦您要这么做,要按这种方式,幸免样式类和表现类之间的耦合。

我个人的指出是为具有JavaScript钩子使用前缀。我使用 js –
*。那样,当一个开发人士在HTML源码中见到那般一个类(带前缀),她就精通通晓到哪儿去找使用这一个类的目标。

地点的事例中 “Add to Cart”
将被重写为:

<button class="js-add-to-cart add-item">Add to Cart</button>

明天,假如一个一定的 “Add
to
Cart”按钮需求看起来不一样,您可以大约地改成样式类和分手行为类本身。

<button class="js-add-to-cart add-item-special">Add to Cart</button>

  HTML 中的 class

  为了确保易读性,在 HTML 标记中用七个空格隔开 class 名,例如:

<div class="foo--bar  bar__baz">

  扩大的空格应当可以使得在使用三个 class 时更易阅读与一定。

JavaScript对体制知道的太多

无异于,JavaScript可以选取类来搜寻DOM中的元素,它也得以添加或删除类来改变成分的体制。但那只怕爆发一个题材,如果那么些类不是强烈有别于于出现在页面加载中的类。

借使JavaScript对关于组件样式代码知道的太多,下边的景况将变得可怜平日,一个CSS开发人士修改样式表并没有发觉到他正在破坏关键的功用。

那并不是说JavaScript不应该变更组件的外观在用户与她们竞相后,但应有经过一种同等的接口。它应该使用与概念的暗许样式类有可想而知有别于的类。

类似于 js-* 前缀的类,我提议使用 is-*
前缀定义改变可视化组件状态的类拔取器。一个CSS规则示例大概看起来像这么:

.pop-up.is-visible { }

小心,状态类(is-visible)和零部件类(pop-up)是混合关系,那一点是重大的。因为状态规则描述组件的场地,他们不应有单独出现。那分别有助于进一步区分意况样式是自暗许组件样式的例外情状。

此外,为了利用一个近乎 is-*
的前缀,大家得以编制测试程序来确保我们依据了平整。一个测试那几个品种的条条框框方法是接纳
CSSLint 和 HTML
Inspector。

更多关于特定情景类的音讯中得以在良好的书
SMACSSJonathan
Snook
中找到。

  JavaScript 钩子

  切勿将标志 CSS 样式的 class 用作 JavaScript 钩子。把 JS
行为与体制混在一块儿将无法对其个别处理。

  即使你要把 JS 和少数标记绑定起来的话,写一个 JS 专用的
class。不难地说就是划定一个前缀 .js- 的命名空间,例如
.js-toggle,.js-drag-and-drop。那代表大家得以因此 class 同时绑定 JS 和
CSS 而不会因为争论而引发麻烦。

<th class="is-sortable  js-is-sortable">
</th>

  上边的那几个标记有两个class,你能够用其中一个来给这一个可排序的表格栏添加样式,用另一个丰富排序功效。

JavaScript “选择符”

jQuery 和新的APIs 如document.querySelectorAll使用户非凡简单在DOM中经过言语他们深谙的CSS拔取器查找成分。即便那是老大强劲的,但它有一度CSS选取器出现的一致的难题。

JavaScript“选取器”不应当过度注重于DOM结构。这样的拔取器是越发慢的,而且亟需优异领会HTML知识。

参照第二个示范,开发人士在一个HTML模板上工作应该可以对标记做基本变动而不用担心会基本成效爆发影象。倘诺效果是可以打破的,它应该在标记能明了看到。

自己早就关系过 js-*
前缀的类应该作为JavaScript钩子。除了将样式类从效果类分开,他们还发布标记的打算。当有人在编制HTML是探望一个
js-*前缀的类,他们就会了然那是用来做什么样的。如若JavaScript代码查询成分不借助于特定的标志结构,在标记中不是醒目的如何效果正在爆发。

取而代之长DOM结构复杂的接纳器,百折不挠单类选取器或id选取器。

设想上面的代码:

var saveBtn = document.querySelector("#modal div:last-child > button:last-child")

那长的选择器使您不要给HTML添加一个类,也会让你的代码很简单受标记的变通的印象。借使设计师突然决定把保存按钮和注销按钮交流地方,上面的拔取器将不再匹配。

一个更好的法门(使用方面提到的前缀的章程)仅仅是行使一个类。

var saveBtn = document.querySelector(".js-save-btn")

前几日的符号可以随心所欲变动,只要类平昔在科学的要素上,一切都将很好地干活。

  I18n

  纵然本人(该 CSS Guideline 文档原作者 Harry罗Berts)是个英帝国人,而且自个儿根本拼写 colour 而非
color,不过为了追求统一,我觉着在 CSS 中用美式拼法更佳。CSS
以及其他多数言语都以以美式拼法编写,所以如若在 .colour-picker{} 中写
color:red 就贫乏统一性。我原先主张同时用两种拼法,例如:

.color-picker,
.colour-picker{
}

  可是本人近年参加了一份规模庞大的 Sass
项目,这些项目中有不少的颜料变量(例如 $brand-color,$highlight-color
等等),每种变量要保证三种拼法实在麻烦,要摸索并替换时也急需两倍的工作量。

  所以为了统一,把装有的 class
与变量都是你插足的品种的惯用拼法命名即可。

类是你的钥匙

大约拥有项目标HTML、CSS和JavaScript之间的耦合可以被减轻通过适当的使用的类和一个可预测的类命名约定。

乍一看在标记中行使大批量的类那可能看起来像一个高耦合的信号,因为HTML须求精通那几个类的名字。但本人觉着采取类的做法非凡相近古板的次序设计事件模型(隐式风格调用)或外观格局(旁观者方式或发布订阅方式)。

在事件驱动编程中,取而代之对象 a 调用对象 b 一个主意,对象 a
只是简短的在一个加以的场合会下会触发特定的风浪,而目的b可以订阅该事件。那种格局,对象a不必要了解其余关于目的b
的接口,只要求领悟要监听的风浪。

可以说事件系统设有一个形式的耦合由于目的B要求明白事件的名字从而订阅,但和目的a须求了然对象B的公家措施相比它是至极松散的耦合。

给HTML添加类是相当相像的。取而代之在CSS文件定义复杂的接纳器(这一定于驾驭HTML的内部接口),它可以通过一个类不难地定义组件的视觉外观。HTML大概会选拔选择或不使用这几个类,CSS无需关怀。

一如既往,JavaScript不必要复杂DOM系列效用,那也急需格外了然html结构知识,它可以简不难单的监听用户的交互成分,通过磋商的类名。

类应该是将您的HTML、CSS和JavaScript连接在共同的关键。在本身的经验中那是是最简单易行和最棒的措施来连接那多个技术而尚未将她们混合在一起太多。

 注释

  我使用行宽不当先 80 字节的文档块风格注释:

/**
 * This is a docBlock style comment
 * 
 * This is a longer description of the comment, describing the code in more
 * detail. We limit these lines to a maximum of 80 characters in length.
 * 
 * We can have markup in the comments, and are encouraged to do so:
 * 
   <div class="foo">
       <p>Lorem</p>
   </div>
 * 
 * We do not prefix lines of code with an asterisk as to do so would inhibit
 * copy and paste.
 */


/**
 * 这是一个文档块(DocBlock)风格的注释。
 *
 * 这里开始是描述更详细、篇幅更长的注释正文。当然,我们要把行宽控制在 80 字节以内。
 *
 * 我们可以在注释中嵌入 HTML 标记,而且这也是个不错的办法:
 *
    <div class="foo">
        <p>Lorem</p>
    </div>
 *
 * 如果是注释内嵌的标记的话,在它前面不加星号,以免被复制进去。
 */

  在诠释中应当尽量详细描述代码,因为对您来说清晰易懂的始末对其余人可能并非如此。每写一些代码就要特别写注释以详解。

未来

WHATWG时下正值为Web组件业内办事,那将允许开发人士将HTML、CSS和JavaScript压在联名作为单身的零件或模块从而从别的的页面封装。

当有一天正式在大部浏览器中贯彻,我在这篇文章中给的好多提议将变得不那么紧要(因为它会越发旗帜鲜清代码是为着什么工作);但是,它依然是任重先生而道远的,精通更广阔的尺度和怎么需求他们。

尽管在Web组件的一世那些做法变得不那么首要,这一冲突依然适用。用于大型的集体和重型应用程序的做法,依然会工作对于个体开发人员写的小模块。相反是不要求的气象。

  注释的开展用法

  注释有好多很高档的用法,例如:

  • 准修饰拔取器(Quasi-qualified selectors)
  • 代码标签
  • 一而再标记

结论

编纂可保险的HTML、CSS和JavaScript的要领是个人开发人士可以很不难地和自信地编辑部分的代码库而这么些变化不经意间影响其余不相干的部分。

提防意外的后果的一个最好的不二法门来是经过一组可预知的类来连接那多个技术,任何开发人士遇到这一个类都能清楚它们的企图和挑选的他俩目标。

为了防止上边的反形式,牢记上面的规格:

  • 在CSS和JavaScript用强烈组件和表现类代替复杂的CSS接纳器。
  • 作风组件重视于它们是如何,而不是他们的义务。
  • 体制和作为并非使用相同的类。
  • 从暗许的体制分离出情况样式。

那种办法往往在HTML中显示多量类,但在可预言性和可维护性上的收益是值得的。终归,在HTML中添加类是一对一不难,并半数以上开发人士的技术水平可以形成。引用
尼科尔as
Gallagher的一段话:

当您挑选修改HTML和CSS,试图减弱你花在撰文和编辑CSS上的汪洋光阴,那包括接受,你无法不花越来越多的时刻转移HTML成分的类,借使你想改变成分的品格。那被认证是一定实用的,包罗前端和后端开发人士——任什么人都足以重新排列预先打造的“乐高积木”;事实评释,没有人可以推行css炼金术。

万一您以为本人翻译的没错你可以关注本人的微博

  准修饰拔取器(Quasi-qualified selectors)

  你应有幸免超负荷修饰选取器,例如即便您能写 .nav{} 就玩命不要写
ul.nav{}。过分修饰拔取器将震慑属性,影响 class
复用性,增加接纳器私有度。这一个都以你应当努力防止的。

  但是有时候你大概希望告知其余开发者 class 的利用限制。以 .product-page
为例,那几个 class 看起来像是一个根容器,大概是 html 只怕 body
成分,可是仅凭 .product-page 则不可能断定。

  大家可以在甄选器前拉长准修饰(即将前边的种类选取器注释掉)来讲述大家统筹的
class 功效范围:

/*html*/.product-page{}

  那样大家就能可看重获知该 class 的功效范围而不会影响复用性。

  其它例子如:

/*ol*/.breadcrumb{}
/*p*/.intro{}
/*ul*/.image-thumbs{}

  这样大家就能在不影响代码私有度的前提下获知 class 成效范围。

  代码标签

  借使您写了一组新样式的话,能够在它上面加上标签,例如:

/**
 * ^navigation ^lists
 */
.nav{}

/**
 * ^grids ^lists ^tables
 */
.matrix{}

  那几个标签可以使得其余开发者神速找到相关代码。若是一个开发者须求摸索和列表相关的一些,他即使搜索
^lists 就能火速稳定到 .nav,.matrix 以及其余有关部分。

  继承标记

  将面向对象的思绪用于 CSS 编写的话,你常常能找到两片段 CSS
密切相关(其一为底蕴,其一为开展)却分列两处。大家得以用持续标记来在原成分和后续成分之间建立紧凑联系。那个在诠释中的写法如下:

  在要素的主题样式中:

/**
 * Extend `.foo` in theme.css
 */
 .foo{}

  在要素的展开样式中:

/**
 * Extends `.foo` in base.css
 */
 .bar{}

  那样一来大家就能在两块相隔很远的代码间成立紧凑联系。


 编写 CSS

  以前的章节首要探索怎样安插CSS,这几个皆以不难量化的条条框框。本章将探索更理论化的东西,也将探索大家的千姿百态与艺术。

 编写新组件

  编写新组件时,要在起初处理 CSS 以前写好 HTML
部分。这可以令你精确判断哪些 CSS 属性可以继续,幸免再一次浪费。

  先写标记的话,你就足以关注数据、内容与语义,在那事后再添加必要的
class 和 CSS 样式。

 面向对象 CSS

  我以面向对象 CSS
的主意写代码。我把组件分成结构(对象)与外观(拓展)。正如以下分析(注意此处并非示例):

.room{}

.room--kitchen{}
.room--bedroom{}
.room--bathroom{}

  我们在屋子里有很多房间,它们都有同步的有些:地板、天花板、墙壁和门。那些共享的有的我们可以停放一个华而不实的
.room{} class
中。不过大家还有其余特殊的房间:一个厨房可能有地砖,卧室大概有地毯,洗手间恐怕没有窗户不过卧室会有,逐个屋子的墙壁颜色恐怕也会差距。面向对
象 CSS 的思绪使得大家把相同部分虚幻出来组成结构有些,然后用更实际的
class 来拓展这一个特点并加上特殊的处理方法。

  所以比起编写多量分别不相同的模块,应当努力找出那么些模块中另行的设计情势并将其抽象出来,写成一个方可复用的
class,将其看作基础然后编写其余拓展模块的与众差距景况。

  当你要编写一个新组件时,将其拆分成结构和外观。编写结构有些时用最通用
class 以保险复用性,编写外观时用更具象的 class 来添加设计方法。

 布局

  所有组件都休想表明宽度,而由其亲成分或格栅系统来支配。

  坚决不用表明中度。中度应当只是用于尺寸已经固定的事物,例如图片和 CSS
Pepsi-Cola。在 p,ul,div
等因素上不该阐明中度。即使须求的话可以动用进一步灵活的 line-height。

  格栅系统应该作为书架来精晓。是它们容纳内容,而不是把它们本身当成内容装起来,正如你先搭起书架再把东西放进去。比起声明它们的尺寸,把格栅系统和要素的其他属性分来开处理更有助于布局,也使得大家的前端工作更连忙。

  你在格栅系统上不应有添加任何样式,它们仅仅是为布局而用。在格栅系统里头再添加样式。在格栅系列中任何动静下都毫无添加盒模型相关属性。

 UI 尺寸

  我用很多措施设定 UI 尺寸,包涵百分比,px,em,rem
以及干脆什么都毫不。

  理想图景下,格栅系统应该用百分比设定。如上所述,因为自身用格栅系统来固定栏宽和页宽,所以我可以不要理会成分的尺码。

  我用 rem 定义字号,并且辅以 px 以格外旧浏览器。那可以拥有 em 和 px
的优势。上面是一个那一个美妙的 Sass
Mixin,假使你在别处表明了基本字号(base-font-size)的话,用它就足以变动
rem 以及包容旧浏览器的 px。

@mixin font-size($font-size){
    font-size:$font-size +px;
    font-size:$font-size / $base-font-size +rem;
}

  我只在早就稳定尺寸的元素上应用 px,包含图形以及尺寸已经用 px 固定的
CSS Pepsi-Cola。

  字号

  我会定义一些与格栅系统原理类似的 class 来声称字号。这么些 class
可以用来双重标题分级,关于那点请阅读 Pragmatic, practical font-sizing in
CSS。

 简写

  CSS 简写应当谨慎使用。

  编写像 background: red;
那样的天性的确很便捷,然而你那样写的意趣其实是同时申明 background-image:
none; background-position: top left; background-repeat: repeat;
。纵然大多数时候那样不会出什么难点,不过固然只出一遍难点就值得考虑要不要废弃简写了。这里应该改为
background-color: red;。

  类似的,像 margin: 0;
那样的申明的确简洁清爽,可是仍旧应当尽可能写清楚。要是你只是想修改底边边距,就要具体有些,写成
margin-bottom: 0;。

  与此同时你需求注脚的天性也要写清楚,不要因为简写而关乎其余性质。例如若是你只想改掉底部的
margin,那就不用用会把任何边距也清零的 margin: 0。

  简写即使好,但也很不难滥用。

 ID

  在大家开首拍卖选用器在此之前,牢记那句话:

  在 CSS 里坚决毫不用 ID。

  在 HTML 里 ID 可以用来 JS 以及锚点定位,可是在 CSS 里如果用
class,一个 ID 也绝不用。

  Class
的优势在于复用性,而且私有度也并不高。在项目中私有度相当简单导致难题,所以将其下落就愈加紧要。ID
的私有度是 class 的 255 倍,所以在 CSS 中坚决毫不选用。

 选择器

  务必保持选用器简短高效。

  通过页面成分地方而一定的选取器并不可以。例如 .sidebar h3 span{}
那样的接纳器就是定位过于倚重相对地方,如若把 span 移到 h3 和 sidebar
外面时就很难保全其样式。

  结构复杂的选用器将会潜移默化属性。选取器结构越复杂(如 .sidebar h3 span
为三层,.content ul p a 是四层),浏览器的付出就越大。

  尽量使得样式不依赖于其固定,尽量保持选用器简洁清晰。

  作为一个完好无损,选用器应当尽量不难(例如唯有一层协会),可是 class
名则不应有过于简短,例如 .user-avatar 就远比 .usr-avt 好。

  牢记:class 无所谓是或不是语义化;应当关注它们是否创造。不要强调 class
名要吻合语义,而要着重应用合理且不会过时的名称。

  过度修饰的选拔器

  由前文所述,过度修饰的选择器并不出彩。

  过度修饰的选用器是指像 div.promo 那样的。很只怕您只用 .promo
也能博取相同的法力。当然你大概有时候会要求用成分类型来修饰
class(例如你写了一个 .error
而且想让它在区其他要素类型中显得效果差距,例如 .error { color: red; }
div.error { padding: 14px; }),不过多数时候仍旧应当尽量防止。

  再举一个修饰过度的选取器例子,ul.nav li
a{}。如前文所说,大家当即就足以删掉 ul 因为大家领略 .nav
是个列表,然后我们就足以窥见 a 一定在 li
中,所以大家就能将这么些选项器改写成 .nav a{}。

  采取器品质

  即使浏览器质量逐步提高,渲染 CSS
速度越来越快,可是你仍然应当关心效能。使用简便、没有嵌套的选取器,不使用全局采纳器(*
{})作为基本选拔器,幸免采取日渐复杂的 CSS3 新选用器可以避免那样的难题。

  译注,主题选拔器:浏览器解析接纳器为从右向左的逐条,最右端的要素是样式生效的成分,是为骨干拔取器。

 使用 CSS 拔取器的目标

  比起大力采纳拔取器定位到某成分,更好的点子是给你想要添加样式的要素直接抬高一个
class。我们以 .header ul {} 那样一个拔取器为例。

  假定这么些 ul 就是那一个网站的全站导航,它放在 header 中,而且如今甘休是
header 中唯一的 ul 成分。.header ul{}
的确可以生效,可是那样并不是好方法,它很简单过时,而且尤其晦涩。如若我们在
header 中再添加一个 ul
的话,它就会沿用我们给这几个导航部分写的样式,哪怕我们着想的不是以此成效。那意味我们依旧要重构许多代码,要么给前面的
ul 新写过多种式来平衡在此以前的震慑。

  你的接纳器必须符合您要给这几个因素添加样式的由来。思考一下,「我一定到那几个因素,是因为它是
.header 下的
ul,依然因为它是自我的网站导航?」那将决定你应当怎样选择拔取器。

  确保您的基本选取器不是体系选用器,也不是高级对象或抽象拔取器。例如你在我们的
CSS 中一定找不到比如 .sidebar ul {} 可能 .footer .media {}
那样的拔取器。

  表明清晰:直接找到你要加上样式的成分,而非其亲成分。不要想当然地认为
HTML 不会变动。用 CSS 直接命中你要求的成分,而非投机取巧。

  完整内容请参见我的稿子 Shoot to kill; CSS selector intent

 !important

  只在起接济成效的 class 上用 !important。用 !important
升高优先级也足以,例如如果你要让某条规则一直生效的话,能够用 .error {
color:red!important; }。

  幸免主动利用 !important。例如 CSS
写得很复杂时绝不用它来取巧,要出色收拾一视同仁构在此以前的有些,保持选用器简短并且避免用
ID 将效率拔群。

 魔数与相对定位

  魔数(Magic
Number)是指那一个「凑巧有效率」的数字,使用魔数格外不佳,因为它们只是治标不治本而且缺少拓展性。

  例如使用 .dropdown-nav li:hover ul { top: 37px; }
把下拉菜单移动下来没有良策,因为此处的 37px 就是个魔数。37px
会生效的因由是因为那时 .dropbox-nav 碰巧高 37px 而已。

  那时你应当用 .dropdown-nav li:hover ul { top: 100%; },也即无论
.dropbox-down 多高,这些下拉菜单都会往下活动 100%。

  每当你要在代码中放入数字的时候,请小心。倘诺您能用一个主要字(例如
top: 100%
意即「从地方拉到最上面」)替换之,或然有更好的化解方法的话,就尽量防止直接出现数字。

  你在 CSS 中留给的各个数字,都以您许下而不愿坚守的答应。

 条件判断

  专门为 IE 写的体制基本上都以足以幸免的,唯一必要为 IE
专门处理的是为着处理 IE 不协助的情节(例如 PNG)。

  简单来讲,借使您重构 CSS 的话,所有的布局和盒模型都不要额外兼容IE。约等于说你几乎不用 <!–[if IE 7]> element{
margin-left:-9px; } < ![endif]–> 恐怕类似的匹配 IE 的写法。

 Debugging

  如若您要消除 CSS 难题的话,先把旧代码拿掉再写新的。即使旧的 CSS
中有难题的话,写新代码是化解不了的。

  把 CSS 代码和 HTML 部分删掉,直到没有 BUG
甘休,然后你就精通难题出在哪儿了。

  有时候写上一个 overflow: hidden
可能此外能把难题藏起来的代码的确意义卓有成效,可是 overflow
方面可能根本就没难点。所以要治本,而不是仅仅治标。

 CSS 预处理器

  我用 Sass。使用时应该灵活运用。用 Sass 可以令你的 CSS
更强硬,但是并非嵌套得太复杂。在 Vanilla CSS
中,只在须要的地方用嵌套即可,例如:

.header{}
.header .site-nav{}
.header .site-nav li{}
.header .site-nav li a{}

  那样的写法在平时 CSS 里全然用不到。以下为倒霉的 Sass 写法:

.header{
    .site-nav{
        li{
            a{}
        }
    }
}

  固然您用 Sass 的话,尽量这么写:

.header{}
.site-nav{
    li{}
    a{}
}

  原文:General CSS notes, advice and guidelines

 

问CSS样式表编写有什规范?

当在XHTML中行使CSS,CSS里定义的成分名称是分别轻重缓急写的。为了防止那种错误,我提出具有的定义名称都施用小写。

class和id的值在HTML和XHTML中也是分别轻重缓急写的,借使您一定要大小写混合写,请密切确认你在CSS的概念和XHTML里的标签是相同的。

用单引号和双引号都可以,只是不要混用。如”123’就不可以.
 

怎使本身编写的html,css代码越发专业

您好,提问者:
—–>参考文档:www.cnblogs.com/…1.html
孙成 [权威专家]

在插手范围巨大、历时漫长且参预人口过多的花色时,所有开发者坚守如下规则极为紧要:
保持…

网站地图xml地图