CSS書寫規範和順序

前言

對於項目，那就是咱們的親兒子啊，做爲一個前端菜鳥，面向用戶就是將本身的兒子介紹給別人認識，確定要讓他白白淨淨，漂漂亮亮的啦，給別人一眼就喜歡上的感受咯，哈哈哈~

常在河邊走，哪有不溼鞋，在咱們編程的工程中，尤爲是前端的同窗，確定少不了跟Css打交道，命名、縮寫、書寫順序等都是有必定規範，這個規範可能來源於你、我、或者瀏覽器等不定向人羣（這個規範是我瞎編的），今天本身整合收集，以及我的項目用到的html+css的書寫規範送給在"編程界"奮鬥的小夥伴，你 不是一我的在戰鬥。

話很少說，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，很差吃你來打我。

切入主題↓↓↓

一、命名規則說明

• 一、全部的命名最好都小寫
• 二、屬性的值必定要用雙引號("")括起來，且必定要有值如class="app",id="app"
• 三、每一個標籤都要有開始和結束，且要有正確的層次，排版有規律工整例如：<div></div>
• 四、空元素要有結束的tag或於開始的tag後加上"/" <br />、<img />
• 五、表現與結構徹底分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
• 六、<h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢,所以，請不要利用標題標籤來改變同一行中的字體大小。相反，咱們應當使用層疊樣式表定義來達到漂亮的顯示效果。
• 七、給每個表格和表單加上一個惟一的、結構標記id
• 八、給圖片加上alt標籤,alt屬性是一個必需的屬性，它規定在圖像沒法顯示時的替代文本。假設因爲下列緣由用戶沒法查看圖像，alt 屬性能夠爲圖像提供替代的信息：網速太慢、src 屬性中的錯誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。
• 九、儘可能使用英文命名原則
• 十、儘可能不縮寫，除非一看就明白的單詞如btn。
• 十一、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。
• 十二、scss中的變量、函數、混合、placeholder採用駝峯式命名
• 1三、後代選擇器：體-修飾符便可（例：.m-page .cut{}）注：後代選擇器不要在頁面佈局中使用，由於污染的可能性較大；
• 1四、減小id命名，id在JS是惟一的，不能屢次使用，id的優先級優先與class，因此id應該按需使用，而不能濫用。

二、網頁外層重要部分CSS樣式命名

wrap ------------------ 用於最外層
  header ---------------- 用於頭部
  main ------------------ 用於主體內容（中部）
  main-left ------------- 左側佈局
  main-right ------------ 右側佈局
  nav ------------------- 網頁菜單導航條
  content --------------- 用於網頁中部主體
  footer ---------------- 用於底部
複製代碼

三、樣式屬性順序

• 一、定位：position z-index left right top bottom clip等。
• 二、自身屬性：width height min-height max-height min-width max-width等。
• 三、文字樣式：color font-size letter-spacing, color text-align等。
• 四、背景：background-image border等。
• 五、文本屬性: text-align vertical-align text-wrap text-transform text-indent text-decoration  letter-spacing word-spacing white-space text-overflow等。
• 六、css3中屬性：content、box-shadow、animation、border-radius、transform等

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

目的：減小瀏覽器reflow(迴流)，提高瀏覽器渲染dom的性能。

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

1）瀏覽器解析html構建dom樹，解析css構建cssom樹即css rule tree：將html和css都解析成樹形的數據結構； dom樹的構建過程是一個深度遍歷過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點。

2）構建render樹：DOM樹和cssom樹合併以後造成render樹。爲了構建渲染樹，瀏覽器大致完成了下列工做：從DOM樹的根節點開始遍歷每一個可見節點。對於每一個可見節點，爲其找到適配的CSSOM規則並應用它們。發射可見節點，連同其內容和計算的樣式。渲染樹中包含了屏幕上全部可見內容及其樣式信息。

3）佈局render樹：有了render樹，瀏覽器已經知道網頁中有哪些節點，各個節點的css定義以及它們的從屬關係，接着就開始佈局，計算出每一個節點在屏幕中的位置和大小。(html採用了一種流式佈局的佈局模型，從上到下，從左到右順序佈局，佈局的起點是從render樹的根節點開始的，對應dom樹的document節點，其初始位置爲(0,0)，詳細的佈局過程爲：每一個renderer的寬度由父節點的renderer肯定。父節點遍歷子節點，肯定子節點的位置(x,y)，調用子節點的layout方法肯定其高度，父節點根據子節點的height, margin, padding肯定自身的高度)。

4）渲染，繪製render樹：瀏覽器已經知道啦哪些節點要顯示，每一個節點的css屬性是什麼，每一個節點在屏幕中的位置是哪裏。就進入啦最後一步，按照計算出來的規則，經過顯卡把內容畫在屏幕上。

瀏覽器並非一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序按照dom樹的結構分佈render樣式，完成第（2）步，而後開始遍歷每一個樹節點的css樣式進行解析，此時的css樣式的遍歷順序徹底是按照以前的的書寫順序，在解析過程當中，一旦瀏覽器發現某個元素的定位變化影響佈局，則須要倒回去從新渲染。

例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當瀏覽器解析到position的時候忽然發現該元素是絕對定位元素須要脫離文檔流，而以前倒是按照普通元素進行解析的，因此不得不從新渲染，解除該元素在文檔中所佔位置，然而因爲該元素的佔位發生變化，其餘元素也可能會受到迴流的影響而從新排位，最終致使（3）步驟花費時間過久而影響到（4）步驟的顯示，影響了用戶體驗。

注：render樹的結構不等同於DOM樹的結構，一些設置display:none的節點不會被放在render樹中，但會在dom樹中。

有些狀況，好比修改了元素的樣式，瀏覽器並不會馬上迴流(reflow)或重繪(repaint)，而是把這些操做積攢一批，而後作一次reflow，這也叫作異步reflow。可是在有些狀況下，好比改變窗口大小，改變頁面默認字體等瀏覽器會立刻進行reflow。

爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈如今屏幕上，並不會等到全部html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在網絡上下載其他內容。

四、 css樣式書寫規範

1、使用CSS縮寫屬性

CSS有些屬性是能夠縮寫的，好比padding,margin,font等等，這樣精簡代碼同時又能提升用戶的閱讀體驗。

去掉小數點前的「0」

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

16進制顏色代碼縮寫

連字符CSS選擇器命名規範

1.長名稱或詞組可使用中橫線來爲選擇器命名。

2.不建議使用「_」下劃線來命名CSS選擇器，爲何呢？

• 輸入的時候少按一個shift鍵；
• 瀏覽器兼容問題 （好比使用_tips的選擇器命名，在IE6是無效的）
• 能良好區分JavaScript變量命名（JS變量命名是用「_」）

• 功能

語義	命名	簡寫
清除浮動	clearboth	cb
左浮動	floatleft	fl
內聯	inlineblock	ib
文本居中	textaligncenter	tac
垂直居中	verticalalignmiddle	vam
溢出隱藏	overflowhidden	oh
徹底消失	displaynone	dn
字體大小	fontsize	fz
字體粗細	fontweight	fs

• 狀態

語義	命名	簡寫
選中	selected	sel
當前	current	crt
顯示	show	show
隱藏	hide	hide
打開	open	open
關閉	close	vclose
出錯	error	err
不可用	disabled	dis

註釋的寫法:

/* Header */
內容區
/* End Header */
複製代碼

id的命名:

1)頁面結構

• 容器: container

• 頁頭：header

• 內容：content/container

• 頁面主體：main

• 頁尾：footer

• 導航：nav

• 側欄：sidebar

• 欄目：column

• 頁面外圍控制總體佈局寬度：wrapper

• 左右中：left right center (2)導航

• 導航：nav

• 主導航：mainnav

• 子導航：subnav

• 頂導航：topnav

• 邊導航：sidebar

• 左導航：leftsidebar

• 右導航：rightsidebar

• 菜單：menu

• 子菜單：submenu

• 標題: title

• 摘要: summary

(3)功能

• 標誌：logo
• 廣告：banner
• 登錄：login
• 登陸條：loginbar
• 註冊：register
• 搜索：search
• 功能區：shop
• 標題：title
• 加入：joinus
• 狀態：status
• 按鈕：btn
• 滾動：scroll
• 標籤頁：tab
• 文章列表：list
• 提示信息：msg
• 當前的: current
• 小技巧：tips
• 圖標: icon
• 註釋：note
• 指南：guild
• 服務：service
• 熱點：hot
• 新聞：news
• 下載：download
• 投票：vote
• 合做夥伴：partner
• 友情連接：link
• 版權：copyright

CSS樣式表文件命名

• 主要的 master.css
• 模塊 module.css
• 基本共用 base.css
• 佈局、版面 layout.css
• 主題 themes.css
• 專欄 columns.css
• 文字 font.css
• 表單 forms.css
• 補丁 mend.css
• 打印 print.css

既然說到了這裏，那就多句嘴，說一下html5的語義化,繼續往下瞅

五、HTML5-語義化

距HTML5標準規範制定完成並公開發布已經有好些年了，可是多數公司仍是用的不是不少，可能一部分緣由是部分用戶在使用低版本瀏覽器吧。

什麼是語義化？就是用合理、正確的標籤來展現內容，好比h1~h6定義標題。

語義化優勢：

• 易於用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利於SEO，搜索引擎根據標籤來肯定上下文和各個關鍵字的權重。
• 方便其餘設備解析，如盲人閱讀器根據語義渲染網頁
• 有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關係更和諧。

一、header

<header>定義文檔或者文檔的部分區域的頁眉，應做爲介紹內容或者導航連接欄的容器。在一個文檔中，您能夠定義多個<header>元素，但須要注意的是<header>元素不能做爲<address>、<footer> 或 <header> 元素的子元素。

二、nav

<nav>描述一個含有多個超連接的區域，該區域包含跳轉到其餘頁面或頁面內部其餘部分的連接列表。在一個文檔中，可定義多個

元素。

三、main

<main> 定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重複的內容，好比側邊欄，導航欄連接，版權信息，網站logo，搜索框（除非搜索框做爲文檔的主要功能）。須要注意的是在一個文檔中不能出現多個<main>標籤。

四、article

<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可複用的結構，如在發佈中，它多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。當<article>元素嵌套使用時，則該元素表明與外層元素有關的文章。例如，表明博客評論的

元素可嵌套在表明博客文章的

元素中。

五、aside

<aside> 元素表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分且能夠被單獨的拆分出來而不會影響總體。一般表現爲側邊欄或嵌入內容。

六、footer

<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息。使用footer插入聯繫信息時，應在 footer 元素內使用

元素。注意不能包含<footer>或者<header>

七、section

<section>表示文檔中的一個區域（或節），好比，內容中的一個專題組。

若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section>。不要把 <section>元素做爲一個普通的容器來使用，特別是當<section>僅僅是爲了美化樣式或方便腳本使用的時候，應使用<div>。

總結若有不當，或引發您的不滿，我深表愧疚，若有錯誤，還望不吝賜教。

致此完結，謝謝觀賞，關注我，會讓你成爲裝逼界的靈魂人物。