如果你曾經(jīng)收藏過(guò)許多關(guān)于CSS的最佳實(shí)踐但還沒(méi)開(kāi)始利用它們,，那么這篇文章將幫助你制作一個(gè)很好且很有組織的CSS文件 來(lái)應(yīng)用于一些CSS最佳實(shí)踐,。在這里我將為為我的下一個(gè)項(xiàng)目制作一個(gè)基本的CSS模板文件,。使用標(biāo)準(zhǔn)的重設(shè)(Reset)方法,，定義一些基本的方便的類， 命名一些常見(jiàn)的頁(yè)面區(qū)域等…

在開(kāi)始之前,，創(chuàng)建一個(gè)新建文件夾并將它命名為”styles”(您也可以命名自己喜歡的名字),，然后在該文件夾下創(chuàng)建兩個(gè)文件分別命名為“reset.css” 和 “style.css”。現(xiàn)在你的文件夾結(jié)構(gòu)不出意外的話應(yīng)該是這樣的:

–root
|
styles
– reset.css
– style.css
|

1-單獨(dú)使用一個(gè)全局CSS重設(shè)方法

我以Eric Meyer的重設(shè)為基礎(chǔ),。只是去掉了其中的 “ins”, “del”和 “table” ,，因?yàn)槲覍?shí)在是很少使用它們，因?yàn)槟承┰蛴种匦露x了 “strong” 和 “em” ,，我知道您也許會(huì)有自己的方式,，所以您也可以自由為自己的文件定義。寫完CSS重設(shè)后,，將其存儲(chǔ)為”reset.css”,。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}

在這個(gè)重設(shè)文件里我去掉了 “body” 樣式，因?yàn)橥ǔＮ覀冊(cè)诓煌捻?xiàng)目中都會(huì)定義不同的”body”樣式,，所以我們將它放在style.css文件中。

2-在頂部為樣式表添加描述注釋

現(xiàn)在我們打開(kāi)style.css來(lái)開(kāi)始寫一些基本的樣式,。在創(chuàng)建一個(gè)新樣式文件(style.css)后,，第一件事應(yīng)該是在文件頂部寫一些結(jié)構(gòu)性的 注釋,，用來(lái)描述一些樣式的細(xì)節(jié)，比如版本,、作者,、作者的詳細(xì)聯(lián)系方式等，這將幫助你和其他前端開(kāi)發(fā)人員使用該文件,。描述細(xì)節(jié)應(yīng)當(dāng)包括像作者姓名,、版本和提 供更多信息的URL地址。我比較喜歡Wordpress格式,，因?yàn)樗容^廣泛,。

/*
主題名稱: 玫瑰主題
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在這里可以提示它的父級(jí)模板
版本: 版本號(hào)
彬Go-集前端開(kāi)發(fā)/網(wǎng)頁(yè)設(shè)計(jì)/網(wǎng)站可用性/用戶體驗(yàn)于一體的趣味互聯(lián)網(wǎng)生活
網(wǎng)址:http://blog./
*/

3-定義便于搜索的目錄表

現(xiàn)在，我們來(lái)一起定義我們樣式的目錄表,。定義TOC能幫助其他人甚至自己更容易與閱讀和理解代碼,。也許您會(huì)覺(jué)得這個(gè)沒(méi)什么必要，但請(qǐng)相信我,！

首先讓我們看看它應(yīng)當(dāng)是什么樣子的:

[目錄表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

正如您看到的,，我們將目錄表從0到9分成10部分。

• TOC非常簡(jiǎn)單以至于它不會(huì)花費(fèi)您超過(guò)1分鐘的時(shí)間,。
• 您不用為每個(gè)項(xiàng)目定義不同的TOC,。
• 命名的使用非常普遍，所以可以適合模本的任何部分,。
• 不使用動(dòng)態(tài)的#ID和.class,。
• 它并不大所以不會(huì)占用很多Kbytes。
• 順序的數(shù)字很有用,，用途請(qǐng)往下看,。

4-使用注釋將每個(gè)部分隔開(kāi)并使用一個(gè)=標(biāo)記

請(qǐng)看一下樣式，在0部分我將之前的重設(shè)樣式表reset.css導(dǎo)入,。

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);
/* =1 Global

–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––*/

在每個(gè)部分的分區(qū)注釋中使用=標(biāo)記,，可以幫助您和您的團(tuán)隊(duì)其他成員快速找到需要的代碼。大家都知道,，在CSS樣式中的聲明幾乎是不會(huì)使用等號(hào)的,，所 以我們可以使用等號(hào)來(lái)幫助搜索。比如你想尋找表單的相關(guān)樣式代碼,，可以先查看目錄表中表單對(duì)應(yīng)的數(shù)字,，然后搜索”=7″便可以快速跳轉(zhuǎn)到表單的相關(guān)代碼區(qū) 域。

5-定義最常用的類

其實(shí)有一些類是我們要經(jīng)常使用的,，那我們?yōu)槭裁床灰淮涡园阉鼈兌级x好呢,？現(xiàn)在正是時(shí)候！我添加了一些個(gè)人比較喜歡的,，當(dāng)然您也可以按照自己的喜好進(jìn)行增刪改,。將它們定義在“=1 Global”下,。
我還把body選擇器定義在了Global中。
注:一下定義類僅僅是比較簡(jiǎn)單的一些,。

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

6-為鏈接和標(biāo)題定義樣式

最后,，我們來(lái)定義適當(dāng)?shù)逆溄雍蜆?biāo)題的樣式，因?yàn)樗麄冊(cè)谌魏雾?xiàng)目中都是必需的,。如果你在制作某個(gè)網(wǎng)頁(yè),，你不可能不是用它們。

/* =2 Links
––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}

style.css模板的最終代碼

/*
主題名稱: 玫瑰主題
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在這里可以提示它的父級(jí)模板

[目錄表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer
*/
/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

總結(jié)

感謝大家閱讀本文,，CSS最佳實(shí)踐在某種意義上的確會(huì)對(duì)我們提供很大的幫助,。它可以幫助我們節(jié)省更多的工作時(shí)間，顯著提高工作效率,。如果您有任何看法或建議,，歡迎評(píng)論。