你的HTML頁(yè)面書(shū)寫規(guī)范嗎？必須知道的HTML書(shū)寫規(guī)范

言：每一個(gè)行業(yè)都有自己的規(guī)范，不已規(guī)矩，不成方圓。尤其是代碼，代碼規(guī)范便于閱讀，便于維護(hù)。

1.用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

2.嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。

3.對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。

4.不要在自閉合（self-closing）元素的尾部添加斜線

5.不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或</body>）。

6.為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!DOCTYPE html>

7.語(yǔ)言屬性

根據(jù) HTML5 規(guī)范：

強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等.

<html>

</html>

8.IE 兼容模式

IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

9.字符編碼

通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

</head>

10.引入 CSS 和 JavaScript 文件

根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。

<style>

/* ... */

</style>

11.

布爾（boolean）型屬性

布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。

12.

減少標(biāo)簽的數(shù)量

編寫 HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)。請(qǐng)看下面的案例：

<span>

</span>

13.

不要使用 @import

與 <link> 標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題。替代辦法有以下幾種：

使用多個(gè) <link> 元素

通過(guò) Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件

通過(guò) Rails、Jekyll 或其他系統(tǒng)中提供過(guò) CSS 文件合并功能

14.

class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號(hào)（dashe）（不是下劃線，也不是駝峰命名法）。破折號(hào)應(yīng)當(dāng)用于相關(guān) class 的命名（類似于命名空間）（例如，.btn 和 .btn-danger）。

避免過(guò)度任意的簡(jiǎn)寫。.btn 代表 button，但是 .s 不能表達(dá)任何意思。

class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。

使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現(xiàn)形式（presentational）的名稱。

基于最近的父 class 或基本（base） class 作為新 class 的前綴。

使用 .js-* class 來(lái)標(biāo)識(shí)行為（與樣式相對(duì)），并且不要將這些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

言

對(duì)于項(xiàng)目，那就是我們的親兒子啊，作為一個(gè)前端菜鳥(niǎo)，面向用戶就是將自己的兒子介紹給別人認(rèn)識(shí)，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺(jué)咯，哈哈哈~

常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學(xué)，肯定少不了跟Css打交道，命名、縮寫、書(shū)寫順序等都是有一定規(guī)范，這個(gè)規(guī)范可能來(lái)源于你、我、或者瀏覽器等不定向人群（這個(gè)規(guī)范是我瞎編的），今天自己整合收集，以及個(gè)人項(xiàng)目用到的html+css的書(shū)寫規(guī)范送給在"編程界"奮斗的小伙伴，你不是一個(gè)人在戰(zhàn)斗。

話不多說(shuō)，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來(lái)打我。

一命名規(guī)則說(shuō)明

1、所有的命名最好都小寫

2、屬性的值一定要用雙引號(hào)("")括起來(lái)，且一定要有值如class="app",id="app"

3、每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次，排版有規(guī)律工整例如：<div></div>

4、空元素要有結(jié)束的tag或于開(kāi)始的tag后加上"/" <br />、<img />

5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等

6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢,因此，請(qǐng)不要利用標(biāo)題標(biāo)簽來(lái)改變同一行中的字體大小。相反，我們應(yīng)當(dāng)使用層疊樣式表定義來(lái)達(dá)到漂亮的顯示效果。

7、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id

8、給圖片加上alt標(biāo)簽,alt屬性是一個(gè)必需的屬性，它規(guī)定在圖像無(wú)法顯示時(shí)的替代文本。假設(shè)由于下列原因用戶無(wú)法查看圖像，alt 屬性可以為圖像提供替代的信息：網(wǎng)速太慢、src 屬性中的錯(cuò)誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。

9、盡量使用英文命名原則

10、盡量不縮寫，除非一看就明白的單詞如btn。

11、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。

12、scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名

13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁(yè)面布局中使用，因?yàn)槲廴镜目赡苄暂^大；

14、減少id命名，id在JS是唯一的，不能多次使用，id的優(yōu)先級(jí)優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

二網(wǎng)頁(yè)外層重要部分CSS樣式命名

 wrap ------------------ 用于最外層 
 header ---------------- 用于頭部 
 main ------------------ 用于主體內(nèi)容（中部） 
 main-left ------------- 左側(cè)布局 
 main-right ------------ 右側(cè)布局 
 nav ------------------- 網(wǎng)頁(yè)菜單導(dǎo)航條 
 content --------------- 用于網(wǎng)頁(yè)中部主體 
 footer ---------------- 用于底部

三樣式屬性順序

1. 定位：positionz-indexleftrighttopbottomclip等。

2. 自身屬性：widthheightmin-heightmax-heightmin-widthmax-width等。

3. 文字樣式：colorfont-sizeletter-spacing, colortext-align等。

4. 背景：background-imageborder等。

5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。

6. css3中屬性：content、box-shadow、animation、border-radius、transform等

/* yes */ 
 .example { 
 z-index: -1;
 display: inline-block;
 font-size: 16px;
 color: red; 
 background-color: #eee; 
} 
/* no */ 
.example { 
 color: red; 
 background-color: #eee; 
 display: inline-block; 
 z-index: -1; 
 font-size: 16px; 
 }

目的：減少瀏覽器reflow(回流)，提升瀏覽器渲染dom的性能。

關(guān)注我的頭條號(hào)，分享更多的技術(shù)學(xué)習(xí)文章，我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

文檔加載完成到完全顯示之間瀏覽器的渲染流程為：

1）瀏覽器解析html構(gòu)建dom樹(shù)，解析css構(gòu)建cssom樹(shù)即css rule tree：將html和css都解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)；dom樹(shù)的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。2）構(gòu)建render樹(shù)：DOM樹(shù)和cssom樹(shù)合并之后形成render樹(shù)。為了構(gòu)建渲染樹(shù)，瀏覽器大體完成了下列工作：從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)。對(duì)于每個(gè)可見(jiàn)節(jié)點(diǎn)，為其找到適配的CSSOM規(guī)則并應(yīng)用它們。發(fā)射可見(jiàn)節(jié)點(diǎn)，連同其內(nèi)容和計(jì)算的樣式。渲染樹(shù)中包含了屏幕上所有可見(jiàn)內(nèi)容及其樣式信息。3）布局render樹(shù)：有了render樹(shù)，瀏覽器已經(jīng)知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的css定義以及它們的從屬關(guān)系，接著就開(kāi)始布局，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點(diǎn)是從render樹(shù)的根節(jié)點(diǎn)開(kāi)始的，對(duì)應(yīng)dom樹(shù)的document節(jié)點(diǎn)，其初始位置為(0,0)，詳細(xì)的布局過(guò)程為：每個(gè)renderer的寬度由父節(jié)點(diǎn)的renderer確定。父節(jié)點(diǎn)遍歷子節(jié)點(diǎn)，確定子節(jié)點(diǎn)的位置(x,y)，調(diào)用子節(jié)點(diǎn)的layout方法確定其高度，父節(jié)點(diǎn)根據(jù)子節(jié)點(diǎn)的height, margin, padding確定自身的高度)。4）渲染，繪制render樹(shù)：瀏覽器已經(jīng)知道啦哪些節(jié)點(diǎn)要顯示，每個(gè)節(jié)點(diǎn)的css屬性是什么，每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里。就進(jìn)入啦最后一步，按照計(jì)算出來(lái)的規(guī)則，通過(guò)顯卡把內(nèi)容畫(huà)在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開(kāi)始解析而是根據(jù)css樣式的書(shū)寫順序按照dom樹(shù)的結(jié)構(gòu)分布render樣式，完成第（2）步，然后開(kāi)始遍歷每個(gè)樹(shù)節(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的的書(shū)寫順序，在解析過(guò)程中，一旦瀏覽器發(fā)現(xiàn)某個(gè)元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當(dāng)瀏覽器解析到position的時(shí)候突然發(fā)現(xiàn)該元素是絕對(duì)定位元素需要脫離文檔流，而之前卻是按照普通元素進(jìn)行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發(fā)生變化，其他元素也可能會(huì)受到回流的影響而重新排位，最終導(dǎo)致（3）步驟花費(fèi)時(shí)間太久而影響到（4）步驟的顯示，影響了用戶體驗(yàn)。

注：render樹(shù)的結(jié)構(gòu)不等同于DOM樹(shù)的結(jié)構(gòu)，一些設(shè)置display:none的節(jié)點(diǎn)不會(huì)被放在render樹(shù)中，但會(huì)在dom樹(shù)中。

有些情況，比如修改了元素的樣式，瀏覽器并不會(huì)立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁(yè)面默認(rèn)字體等瀏覽器會(huì)馬上進(jìn)行reflow。為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)在屏幕上，并不會(huì)等到所有html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在網(wǎng)絡(luò)上下載其余內(nèi)容。

四 css樣式書(shū)寫規(guī)范

使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

去掉小數(shù)點(diǎn)前的“0”

簡(jiǎn)寫命名(前提是要讓人看懂你的命名才能簡(jiǎn)寫哦)

16進(jìn)制顏色代碼縮寫

連字符CSS選擇器命名規(guī)范

1.長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名。2.不建議使用“_”下劃線來(lái)命名CSS選擇器，為什么呢？

輸入的時(shí)候少按一個(gè)shift鍵；
瀏覽器兼容問(wèn)題（比如使用_tips的選擇器命名，在IE6是無(wú)效的）
能良好區(qū)分JavaScript變量命名（JS變量命名是用“_”）

功能

狀態(tài)

注釋的寫法

/* Header */ 
 內(nèi)容區(qū)
 
 /* End Header */

id的命名

1)頁(yè)面結(jié)構(gòu)

容器: container

頁(yè)頭：header

內(nèi)容：content/container

頁(yè)面主體：main

頁(yè)尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁(yè)面外圍控制整體佈局寬度：wrapper

左右中：left right center(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊(cè)：register

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)籤頁(yè)：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

五 HTML5-語(yǔ)義化

距HTML5標(biāo)準(zhǔn)規(guī)范制定完成并公開(kāi)發(fā)布已經(jīng)有好些年了，但是多數(shù)公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。

什么是語(yǔ)義化？就是用合理、正確的標(biāo)簽來(lái)展示內(nèi)容，比如h1~h6定義標(biāo)題。

語(yǔ)義化優(yōu)點(diǎn)：

易于用戶閱讀，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。
有利于SEO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)
有利于開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。

1、header

<header>定義文檔或者文檔的部分區(qū)域的頁(yè)眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。在一個(gè)文檔中，您可以定義多個(gè)<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。

2、nav

<nav>描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面內(nèi)部其他部分的鏈接列表。在一個(gè)文檔中，可定義多個(gè)元素。

3、main

<main>定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無(wú)二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個(gè)文檔中不能出現(xiàn)多個(gè)<main>標(biāo)簽。

4、article

<article>元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評(píng)論的元素可嵌套在代表博客文章的元素中。

5、aside

<aside>元素表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來(lái)而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

6、footer

<footer>定義最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁(yè)腳。一個(gè)頁(yè)腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。使用footer插入聯(lián)系信息時(shí)，應(yīng)在 footer 元素內(nèi)使用元素。注意不能包含<footer>或者<header>

7、section

<section>表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專題組。

如果元素內(nèi)容可以分為幾個(gè)部分的話，應(yīng)該使用 <article>而不是 <section>。不要把 <section>元素作為一個(gè)普通的容器來(lái)使用，特別是當(dāng)<section>僅僅是為了美化樣式或方便腳本使用的時(shí)候，應(yīng)使用<div>。

碼規(guī)范

CSS樣式表是一個(gè)序列通用字符集，傳輸和存儲(chǔ)過(guò)程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯

文檔內(nèi)嵌樣式表編碼

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

當(dāng)樣式出現(xiàn)在其它文檔，如 HTML 的 STYLE 標(biāo)簽或標(biāo)簽屬性 "style"，樣式的編碼由文檔的決定。

文檔外鏈樣式表編碼

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文檔外鏈樣式表的編碼可以由以下各項(xiàng)按照由高到低的優(yōu)先級(jí)順序決定：

HTTP “Content-Type” 字段參數(shù) “charset”（或其它協(xié)議相似的參數(shù)）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元數(shù)據(jù)設(shè)置（如果有的話）
引用樣式表字符集或文檔編碼（如果有的話）
假定為 UTF-8 編碼

樣式表編碼

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

@charset規(guī)則一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始，否則的話就會(huì)有機(jī)會(huì)讓 BOM 設(shè)置生效（如果有設(shè)置 BOM 的話）而優(yōu)于 [@charset ]() 作為樣式表的編碼
@charset ""; 一定要寫上，并且用小寫字母，不能出現(xiàn)轉(zhuǎn)義符

團(tuán)隊(duì)約定

樣式文件必須寫上 [@charset ]() 規(guī)則，并且一定要在樣式文件的第一行首個(gè)字符位置開(kāi)始寫，編碼名用 “UTF-8”
字符 [@charset ]() ""; 都用小寫字母，不能出現(xiàn)轉(zhuǎn)義符，編碼名允許大小混寫
考慮到在使用“UTF-8”編碼情況下 BOM 對(duì)代碼的污染和編碼顯示的問(wèn)題，在可控范圍下，堅(jiān)決不使用 BOM。（更多關(guān)于 BOM 可參考 BOM的介紹和「帶 BOM 的 UTF-8」和「無(wú) BOM 的 UTF-8」有什么區(qū)別？）

推薦：

@charset "UTF-8";

.jdc{}

不推薦：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規(guī)則不在文件首行首個(gè)字符開(kāi)始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset規(guī)則沒(méi)有用小寫 */

.jdc{}

/* 無(wú)@charset規(guī)則 */
.jdc{}

更多關(guān)于樣式編碼：CSS style sheet representation

代碼風(fēng)格

代碼格式化

樣式書(shū)寫一般有兩種：一種是緊湊格式 (Compact)

.jdc{ display: block;width: 50px;}

一種是展開(kāi)格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

團(tuán)隊(duì)約定

統(tǒng)一使用展開(kāi)格式書(shū)寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書(shū)寫，屬性字符串允許使用大小寫。

/* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無(wú)具體語(yǔ)義定義的標(biāo)簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進(jìn)

統(tǒng)一使用四個(gè)空格進(jìn)行代碼縮進(jìn)，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

.jdc {
    width: 100%;
    height: 100%;
}

分號(hào)

每個(gè)屬性聲明末尾都要加分號(hào)；

.jdc {
    width: 100%;
    height: 100%;
}

代碼易讀性

左括號(hào)與類名之間一個(gè)空格，冒號(hào)與屬性值之間一個(gè)空格

推薦：

.jdc { 
    width: 100%; 
}

不推薦：

.jdc{ 
    width:100%;
}

逗號(hào)分隔的取值，逗號(hào)之后一個(gè)空格

推薦：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推薦：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個(gè)css選擇器或新申明開(kāi)啟新行

推薦：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推薦：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

.jdc {
    color: rgba(255,255,255,.5);
}

不推薦：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進(jìn)制數(shù)值能用簡(jiǎn)寫的盡量用簡(jiǎn)寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為 0 指明單位

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引號(hào)

css屬性值需要用到引號(hào)時(shí)，統(tǒng)一使用單引號(hào)

/* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

屬性書(shū)寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法

CSS3 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多關(guān)于瀏覽器私有前輟寫法：#Vendor-specific extensions

參考閱讀

Google Code Guide

在線咨詢

上一篇：Html中的空格
下一篇：通過(guò)簡(jiǎn)單Html代碼實(shí)現(xiàn)實(shí)時(shí)Web編輯器

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

你的HTML頁(yè)面書(shū)寫規(guī)范嗎？必須知道的HTML書(shū)寫規(guī)范

言：每一個(gè)行業(yè)都有自己的規(guī)范，不已規(guī)矩，不成方圓。尤其是代碼，代碼規(guī)范便于閱讀，便于維護(hù)。

碼規(guī)范

文檔內(nèi)嵌樣式表編碼

文檔外鏈樣式表編碼

樣式表編碼

團(tuán)隊(duì)約定

代碼風(fēng)格

代碼格式化

代碼大小寫

選擇器

代碼縮進(jìn)

分號(hào)

代碼易讀性

屬性值引號(hào)

屬性書(shū)寫順序

CSS3瀏覽器私有前綴寫法

參考閱讀

您的項(xiàng)目需求