CSS架构开发设计指南

　Philip Walton 在AppFolio出任前端开发工程项目师，他在Santa Barbara on Rails的聚会活动上提出了CSS构架和1些最好实践活动，而且在工作中中1直延用。

　　善于CSS的Web开发设计人员不但能够从视觉效果上拷贝商品原形，还能够用编码开展完善的展现。不用应用报表、尽量少的应用照片。假如你是个当之无愧的大神，你能够迅速把全新和最杰出的技术性运用到你的新项目中，例如新闻媒体查寻、过渡、滤镜、变换等。尽管这些全是1个真实的CSS大神所具有的，但CSS非常少被人独立拿出来探讨，或用它去评定某本人的专业技能。

　　趣味的是，大家非常少这样去点评别的語言。Rails开发设计人员其实不会由于其编码较为标准，就觉得他是1名出色的开发设计人员。这仅仅是个标准。自然，他的编码得务必标准。此外，还需结合别的层面考虑到，例如编码是不是可读？是不是非常容易改动或拓展……

　　这全是些很当然的难题，CSS和它们并沒有甚么不一样的地方。今日的Web运用程序流程要比过去更为巨大。1个欠缺思索熟虑的CSS构架常常会消弱发展趋势，是情况下像评定别的語言那样，来评定1下CSS构架了，这些都不可该放在“事后”考虑到或单是属于设计方案师们的事儿。
1.优良的CSS构架总体目标

　　在CSS小区，很难提出某个最好实践活动早已变成大伙儿的广泛共鸣。纯碎地从Hacker News的评价上分辨和开发设计者们对CSS Lint公布后的反映看来，大多数数人对基础的CSS物品是持抵制建议的。因此，其实不是为自身的最好实践活动奠定1套基础的论据，而应当明确真实的总体目标。

　　好的CSS构架总体目标其实不同于开发设计1个好的运用程序流程，它务必是可预测分析、可重用、可维护保养和可伸缩的。

　　可预测分析

　　可预测分析代表着能够像预期的那样标准自身的个人行为。当你加上或改动某个标准时，它其实不会危害到沒有特定的一部分。针对1个小网站来讲，1些寥寥无几的更改其实不算甚么。而针对有着不计其数个网页页面的大网站来讲，可预测分析确是务必的。

　　可重用

　　CSS标准应具有抽象性调解耦性，这样你便可以在现有的基本上迅速搭建新的组件，不用再次改动编号方式。

　　可维护保养

　　当把新组件置放到网站上，而且实行加上、改动或再次设计方案实际操作时，不用重构现有CSS，而且新加上的X其实不会摆脱原来网页页面的Y组件。

　　可拓展

　　当网站发展趋势到1定经营规模后，都必须开展维护保养和拓展。可拓展的CSS代表着网站的CSS构架能够由本人或精英团队随便地管理方法，不用花销太多的学习培训成本费。

　　2.普遍的不正确实践活动

　　在完成优良的CSS构架总体目标以前，大家看来1些普遍的不正确做法，这对大家达到总体目标是有益处的。

　　下面的这些事例尽管都可以以很好的实行，但却会给你带来许多苦恼，虽然大家的用意和心愿全是幸福的，可是这些开发设计方式会让你头疼。

　　基本上在每一个网站上，都会有1个特殊的虚似元素看起来与别的网页页面是彻底1样的，但是仅有1个网页页面以外。当众对这样1种状况时，基本上每一个初学者CSS开发设计人员（乃至是工作经验丰富多彩的）都会以一样的方法来改动。你应当为该网页页面找出些不同寻常的地方（或自身建立），随后再写1个新标准去实际操作。

　　根据父组件来改动组件
 

　　初看，这肯定是段无害的编码，但让大家看来看它是不是做到了大家所设定的总体目标。

　　最先，widget在examle是不能预料的。当这些小构件出現在网页页面两边或首页面时，开发设计人员期待它们以某种特殊的方法显示信息出来，且又不失特点。此外，它也是不能重用或不能拓展的。

　　此外，它也较为难维护保养。1旦这个widget必须再次设计方案，那末你迫不得已改动别的几个CSS款式。想像1下，假如这段编码是应用别的語言撰写的，它基础便是1个类界定，随后在编码的另外一一部分应用该类界定并做出拓展。这立即违背了手机软件开发设计的对外开放/闭合（open/close）标准。

    手机软件实体线（类，控制模块，涵数等）解决拓展对外开放，对改动闭合。

　　过度繁杂的挑选器

　　有时候，会一些文章内容详细介绍CSS挑选器对全部网站的展现起着十分关键的功效，而且声称不用应用任何类挑选器或ID挑选器。

　　但随着着越深层次的开发设计，我越会阔别这类繁杂的挑选器。1个挑选器越繁杂，与HTML就越藕合。借助HTML标识和组成器能够维持HTML编码干整洁净，但却让CSS更为毛重和杂乱。
 

　　对上面编码开展简易的了解。第1个将会是对往下拉菜单开展款式化；第2个想表明文章内容的主题目应当与别的网页页面的H1元素不一样；最终1个表明在第1段的侧面栏地区加上1些附加的室内空间。

　　假如这个HTML是始终不会改变的，那就没法说的地方，但这压根绝不实际。过度繁杂的挑选器会令人印象刻骨铭心，它可让HTML解决掉表层上的繁杂，但针对完成优良的CSS构架总体目标却没什么用途。

　　上面提到的事例全是不具有可预测分析性、可重用、可拓展和可维护保养这4大特点的。比如第1个挑选器（下来菜单）事例，假如1个外型十分类似的往下拉目录必须用在不一样的网页页面上，而且#main-nav其实不属于內部元素，那末你是不是必须再次设计方案？假定开发设计者要想改动第3个事例里div里边一部分标识，那末全部标准都会挨打破。

　　过度通用性的类名

　　当建立可重用的设计方案组件时，在组件的类挑选器中遮盖附件的子元素是很普遍的状况。比如：
 

　　像.title、.contents、.action这些子元素类挑选器能够被安全性地开展款式取名，不用担忧这些款式会扩散到有着同样类名的别的元素中。这是千真万确的。但它并沒有阻拦同样款式类名字会扩散到这个组件上。

　　在1些大中型新项目上，像.title这样的名字很有将会会被用在此外1个网页页面或自身。假如这样的状况产生，那末全部题目一部分显著会和预期的不1样。

　　过度通用性的类挑选器名字会致使很多不能预测分析的CSS款式产生。

　　1个标准做太多事

　　有时，你要在网站的左上角地区做1个20pixels的可视性化组件。
 

　　下面，你必须在网站的别的地区应用该组件，那末上面的这个编码显著是不正确的，不能重用的。

　　难题的重要是你让.widget这个挑选器做的事儿太多，不但对该组件的部位开展了要求，还对它的外型和觉得层面开展了款式。外型和觉得能够通用性，而部位是不能以的。有时，把它们整合起来应用反而会大折扣扣。

　　尽管这些看起来并没有坏处，对1些欠缺工作经验的CSS程序流程员来讲，拷贝和粘贴早已变成1种习惯性。假如1个新精英团队必须1个特殊组件，例如.infobox，她们会尝试应用这个类挑选器。但假如该信息内容框沒有依照期待的那样，在每一个必须的地区正确显示信息出来。这时候，你觉得她们会如何做？以我的工作经验看来，她们会摆脱可重用这1标准，相反，她们会简易地把这些编码拷贝粘贴到每一个必须的地区。做些无须要的反复工作中。

　　3.缘故

　　上面例举的这些基本不正确实践活动都有1个类似性，CSS款式担负过量。

　　对这样的说法你会觉得怪异，终究，它是1个款式表，难道说不可该担负大多数数（假如并不是所有）的款式吗？那不更是大家要想的吗？

　　确实。可是一般来说，事儿并沒有那末简易。內容与主要表现（presentation）相分离出来是件好事儿，但CSS从HTML中单独出来其实不代表着內容也必须从主要表现中分刘海离。换句话说，假如CSS恳求深层次剖析HTML构架，那末从HTML中分刘海拆全部的显示信息编码其实不1定会完成全部的总体目标。

　　另外，HTML非常少会只包括內容，也表明总体架构。一般，构架是会包括container元素，容许CSS防护1些固定不动元素。即便沒有表象类（presentational classes），也能混和HTML清楚地把內容展现出来。

　　我坚信，鉴于当今的HTML和CSS情况，把HTML和CSS明智地融合起来，作为主要表现层是是非非常必须的。而根据模版和部分模版（partials）还可以把內容层开展分离出来。

　　4.处理计划方案。

　　假如把HTML和CSS融合起来，做为1个Web运用程序流程的主要表现层，那末它们必须采用1些方法更好地推动出色CSS构架的产生。

　　最好是的方式是CSS中尽量少的包括HTML构架。CSS则是应当界定元素的视觉效果实际效果，不管该视觉效果元素在哪儿里。假如有1些特殊的组件必须在不一样的场所显示信息不一样的实际效果，那末应当授予不一样的名字。比如，CSS根据.button类挑选器界定了1个按钮组件。假如HTML要想1个特殊的元素看起来像按钮，那末便可以应用.button。假如这里有独特规定，这里的按钮与别的的有一定的不一样（有将会更大和宽些），那末CSS必须界定1个新的类，HTML可使用新的类来授予该元素新的视觉效果实际效果。

　　CSS授予元素的外在特点，HTML在网页页面勤奋行启用。更少的CSS能被更多的HTML构架启用是最好是的。

　　精确地在HTML中申明元素不但能够清楚表述设计方案用意，别的开发设计者还可以清楚地查询标识而且了解元素将展现的模样。假如沒有这类实践活动，它很难区别1个元素的外型设定是成心或不经意的，这样很非常容易致使精英团队错乱。

　　在标识中填入很多的类(classes)是种普遍缺点，这样做常常必须花销附加的活力。1个CSS款式能够给1个特殊组件引入上千次。那末，以便在标识里边开展显示信息申明，就真的值得去反复撰写这样的类吗？

　　尽管这类担忧是合理的，但它将会会造成误导。言下之意便是不管你在CSS中应用1个父挑选器還是亲手撰写上千个Class，这里都会一些附加的挑选。在Rails或别的架构里查询同级別抽象性很大水平上能够在HTML中维持很好的视觉效果外型，而且不用在类中1遍又1满地撰写同样的类。

　　5.最好实践活动。

　　对于上面的种种不正确，我开展了很好地总结，而且依据本身工作经验提出了1些提议，期待它们能协助您更好地完成优良的CSS构架总体目标。

　　潜心

　　保证挑选器对1些元素不开展不相干款式的最好是方式是不给它们机遇。比如像#main-nav ul li ul li div这样的挑选器将会很非常容易地运用于不要想的元素上。另外一层面，像.subnav这样的挑选器就不容易给它们任何机遇。把类挑选器立即运用于你要想的元素上是最好是的方法，而且能够维持元素的可预测分析性。
 

　　控制模块化

　　1个机构构造优良的组件层能够协助处理HTML构架与CSS那种疏松的藕合性。另外，CSS组件自身应当是控制模块化的。组件应当了解怎样开展款式和更好地工作中，可是有关合理布局、精准定位和它们与周边元素的关联不可该做太多的假定。

　　1般而言，CSS要界定的应当是组件的外型，而并不是合理布局或部位。一样在应用background、color和font这些特性时也要遵照标准应用。

　　合理布局和部位理应由1个独立的合理布局类或独立的器皿元素组成（请记牢，合理地把內容与展现开展分离出来实际上便是把內容与器皿开展分离出来）。

　　给类开展取名室内空间

　　大家早已查验出为何父挑选器不可以在封闭式和避免交叉式款式污染上面充分发挥100%的作用。而1个更好的处理计划方案便是在类上运用取名室内空间。假如1个元素是可视性化组件的1员，那末该元素的每一个子元素都应当应用根据取名室内空间的组件。
 

　　给类开展取名室内空间能够维持组件单独性和控制模块化。它能够把现有类矛盾降至最少而且降低子元素的1些独特规定。

　　建立装饰符类来拓展组件

　　当1个现有组件必须在1个特殊的语境中有一定的不一样时，能够建立1个装饰符类（modifier class）来拓展它。
 

　　正如大家看到的，根据父元素的缺陷对组件开展改动，必须重申：1个装饰符类能够在任何地区应用。根据部位的遮盖只能被用在1个特殊的部位，装饰符类还可以依据必须被数次应用。明显，装饰符类是合乎HTML开发设计者要求的。

　　把CSS机构成逻辑性构造

　　Jonathan Snook在其十分出色的《SMACSS》书中提到，CSS能够被分为4个不一样的类：基本（base）、合理布局（layout）、控制模块（modules）和情况（state）。基本包含了复位标准和元素缺省值；合理布局是对站点范畴内的元素开展精准定位和像网格系统软件那样做为1种通用性合理布局小助手；控制模块就是可重用的视觉效果元素；情况即指款式，能够根据JavaScript开展打开或关掉。

　　组件是1个单独的视觉效果元素。模版在另外一层面则是搭建块。模版非常少独自站在自身的角度去叙述视觉效果和觉得，相反，它们是单1的、可重用的方式，能够放在1起产生组件。

　　以便出示更详尽的事例，1个组件将会便是1个方式会话框。该方式将会在头顶部包括渐变色的网站签字、或在周边会有黑影、在右上角会相关闭按钮、部位固定不动在竖直与水平线正中间。这4个方式将会被网站反复数次应用，因此在每次应用的情况下，你都非常少会想起再次编号与设计方案。这些全部的模版即产生了1个控制模块组件。

　　因款式日风格应用类

　　有过大中型企业网站建设的人将会有个这样的工作经验，1个有着类的HTML元素将会彻底不知道道其主要用途。你想删掉它，可是又犹豫不定，由于它的功效你将会还未观念到。1旦这样的事儿1遍又1遍产生的情况下，伴随着時间的推移，新项目中可能有愈来愈多这样的类，只由于精英团队组员都害怕删掉。

　　在Web前端开发开发设计中，类担负了太多的义务，因而才会造成这样的难题。款式化HTML元素、饰演着JavaScript hook人物角色、作用检验、全自动化检测等。当这么多运用程序流程在应用类时，让你从HTML中删掉它们可能变的十分艰辛。

　　但是，应用1些完善的承诺（国际惯例）便可彻底防止这类难题。当在HTML中看到1个类时，你应当马上搞清楚它的目地。我提议在前面应用前缀，比如用于JavaScript的在前面加.js，表明Modernizr classes能够在前面加.supports，沒有加前缀的即用于表明款式。

　　这样来发现未应用的类和从HTML中移除它们可能变得十分简易。你乃至能够全自动进行这1个全过程，在JavaScript中根据交叉式引入HTML中的document.styleSheets目标。假如在document.styleSheets中沒有发现该类，便可安全性移除。

　　1般来讲，最好做法是把內容与演试相分离出来，此外把作用分离出来起来也一样关键。应用款式类像JavaScript hook在某种水平上能够加深CSS与JavaScript之间的藕合，但在不摆脱作用性的前提条件下很难或压根不能能变更外型。

　　有逻辑性的取名类

　　大多数数写CSS的人喜爱应用连标识符来隔开取名词，但连标识符其实不足以区别不一样种类之间的类。

　　Nicolas Gallagher近期对于遇到的难题写了1个处理计划方案，而且获得了极大的取得成功（略有修改），以便表明取名承诺，能够考虑到下列文件格式：
 

　　从上述类中能够发现其很难正确区别种类标准。这不仅会疑惑，并且连全自动检测CSS和HTML也变的很难。1个构造化的取名承诺应当是初看就可以够了解其类名与别的类之间的关联，而且了解它出現在HTML中的部位——重任名更为简易和非常容易检测。

 

　　重做第1个事例：
 

　　6.专用工具

　　维护保养1个高效率且机构优良的CSS构架是是非非常艰难的，特别是在大中型精英团队中。下朝向大伙儿强烈推荐几款很好的专用工具来帮你管理方法网站CSS构架。

　　CSS Preprocessor

　　CSS预解决器选用PHP5撰写，有预解决器的普遍作用，能够帮你迅速撰写CSS。此外一些号称“作用”的预解决器具体上其实不会对CSS构架造成优良功效。下面我出示1个目录，在应用时1定要防止：

　　● 切勿纯碎以便机构编码来嵌套循环标准。仅有当輸出你真实要想的CSS时才能够。

　　●在不用传送主要参数的情况下切勿应用mixin，不带主要参数的mixin更合适用作模版，易拓展。

　　●切勿在挑选器上应用@extend，它并不是个单1的类。从设计方案角度看来是没什么实际意义的，它会澎涨编译程序过的CSS。

　　●在应用组件装饰符标准时，切勿应用@extend UI组件，这样会丧失基本链。

　　@extend和%placeholder是预解决器里边十分好的两个作用。它们能够帮你轻轻松松管理方法CSS抽象性而且不用加上bloat和很多的基类到CSS和HTML里，不然可能很难管理方法。

　　当你第一次应用@extend时，常会与装饰符类1起应用，比如：
 

　　这样做会让你在HTML中丧失承继链。很难应用JavaScript挑选全部的按钮案例。

　　做为1般标准，非常少去拓展UI组件或在了解种类后做些甚么。这是区别模版和组件的1种方法，模版不用参加到运用程序流程的逻辑性，而且可使用预解决器开展安全性拓展。

　　下面是1个引入上面的方式事例：
 

　　CSS Lint

　　CSS Lint是由Nicole Sullivan和Nicholas Zakas撰写的1款编码品质检验专用工具，协助CSS开发设计人员写出更好的编码。她们的网站上是这样详细介绍CSS Lint的：

　　CSS Lint是1个用来帮你找出CSS编码中难题的专用工具，它可做基础的英语的语法查验和应用1套预设的标准来查验编码中的难题，标准是能够拓展的。

　　应用CSS Lint提议：

　　1.不必在挑选器中出現ID。

　　2.在多一部分标准中，不必应用非词义（non-semantic）种类挑选器，比如DIV、SPAN等。

　　3.在1个挑选器中应用的联接符（combinator）不必超出2个。

　　4.任何类名都不必以“js-”刚开始。

　　5.假如在非“I-”前缀标准里常常应用合理布局和精准定位应给予警示

　　6.假如1个类界定后被再次界定成子类，也应给予警示。

　　总结

　　CSS不仅是视觉效果设计方案，也不必由于你撰写CSS就随意抛出程序编写的最好实践活动。像OOP、DRY、开启/闭合、与內容分离出来等这些标准应当运用到CSS里边。不管你怎样机构编码，都要保证方式真实协助到你，而且使你的开发设计更为非常容易和可维护保养的。