在大多数文章中，咱们并未特别注意CSS文件的可保护与可读性的问题，当完结一项前端的作业之后，许多人都会忘掉该项意图结构与细节。可是代码并不是马上就能彻底定型，在余下的时刻里还有不断的保护作业，而这些作业或许不会是你自己完结。所以，结构优良的代码能很大程度上优化它的可保护性。下面列出四则技巧进步CSS文件可保护性的办法，以此作为攻略，以一种较好的CSS款式安排习气来进行WEB前端开发。
一、CSS款式文件分化
关于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，能够分别将 大局款式、布局、字体款式、表单、评论和其他分为几个不同的块来持续作业。
而关于较大的工程，这样显然不会有什么作用。此刻，就需求将款式分化到几个不同的款式表文件。下面的master stylesheet 就是这一办法的比如，它的作业主要是导入其他款式文件。运用这一办法不仅能优化款式结构，而且有利于削减一些不必要的服务器恳求。而分化文件的办法就有许多种，master stylesheet 运用了最常见的一种。
Example Source Code
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
一起关于大型项目，你也能够加上CSS文件的晋级标志或许一些诊断等其他措施，这儿不再胪陈。
二、为CSS文件树立索引
为了能够敏捷的了解整个CSS文件的结构，在文件最初树立文件索引是一个不错的挑选。
一种可行的办法是树立树形的索引，结构上的id 和 class 都能够成为该树的一个分支。
Example Source Code
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
或许也能够这样：
Example Source Code
[Contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
另一种办法能够只是先简单的将内容列举出来，也不需求缩进。下面的一个比如中，如果你需求跳至RSS部分你只需求简单的搜索。
Example Source Code
[Contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
/*--[8. RSS / #rss]--*/
#rss { ... }
#rss img { ... }
定义这样一个款式检索能够很有用的使其别人阅览学习你的代码变得简单。在制作大项意图时分，你也能够将检索打印出来然后在你阅览代码的时分便利查阅。您还能够参阅下面的文章。
CSS实战经验：坚持CSS文件整洁与款式统一
三、格局化CSS特点
当咱们编写代码的时分，运用一些特殊的编码风格会对进步CSS代码的可读性有很大协助。许多人都有各自不同的编码风格。一部分人习气于将色彩和字体的代码放在前面，别的一部分则更喜爱将相似起浮和定位的更“重要”的特点放在前面。相似的，也能够将页面元素依照它在布局中的结构进行排序：
Example Source Code
body,
h1, h2, h3,
p, ul, li,
form {
margin: 0;
padding: 0;
border: 0;
}
一些开发者用一种更为有意思的办法：他们将特点按首字母的顺序排列。值得注意的是，这样一种办法可能对某些浏览器会发生问题。不管自己的格局怎么，你要确保你已经明晰的定义了这些格局办法。这样，你的搭档在阅览你的代码的时分将会感谢你的努力。您还能够参阅下面的文章。
四、合理的利用缩进
为了让你的代码给人感觉更为直观，你能够运用一行来定义大纲元素的款式。当指定的挑选器里的特点超过三个的时分，这种办法将带来混乱。可是，适度的运用这种办法，你能够很清楚的区分相同类的不同点。
Example Source Code
#main-column { display: inline; float: left; width: 300px; }
#main-column h1 { margin-bottom: 20px; }
#main-column p { color: #333; }
一起，款式修正的保护也是个比较麻烦的问题。很多人修正款式之后就忘掉了，成果后来又发现修正的款式导致了页面犯错，不得不苦苦寻觅。因而，为修正的款式构建一个特殊的格局就很必要了。一种很简单的办法是，给修正过的款式缩进，一起，也能够运用一些注释（比如"@new"）来做一个标识。
Example Source Code
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
总的来说，只要树立一个适宜的款式攻略才会对款式表的可读性有所协助。记住，移去每一个对你了解文件没有协助的款式攻略，防止对过多的元素运用过多的款式攻略。然后，为了一个可读性可保护性杰出的CSS文件而努力吧。 |
咨询服务热线：400-099-8848
