html和css開發規範

時間 2020-11-30

標籤 css html html5 git github web bootstrap 瀏覽器緩存網絡欄目 HTML 简体版

原文原文鏈接

前言

最近看了一些同事留下的代碼，有種天馬行空，爲所欲爲的感受。大多數舊的代碼冗餘複雜，想進行優化卻不敢刪除他們的代碼，開發新功能只能在這基礎上進行增長，致使代碼進一步臃腫，感觸良多。寫一篇規範分享一下，因爲JavaScript規範太多後續在寫一篇博客補充。css

html格式規範

語義化標籤

咱們應該根據元素自己的用途去使用他們，而不是爲了簡便使用一堆<div>、<span>等標籤。主要緣由以下：html

1. 代碼結構清晰，別人閱讀和修改方便。
2. seo優化：搜索引擎判斷和收錄頁面內容的主要指標之一就是標籤，例如看到<h1>標籤搜索引擎就知道頁面表達的主題是<h1>標籤內部的信息，若是整個頁面都是<div>和<span>標籤搜索引擎就沒法抓住重點

不推薦案例：html5

<p>標題</p>
<div>
    <p>列表元素1</p>
    <p>列表元素2</p>
    <p>列表元素3</p>
</div>

推薦案例：git

// 標題使用<h1>標籤，列表使用<ul>或者<ol>標籤
<h2>標題</h2>
<ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ul>

統一使用html5文檔類型

統一使用html5文檔類型，格式以下所示。主要做用是告訴瀏覽器用最新<html>規範來解析<html>語法，避免出現怪異現象。全部標籤不要大寫，即使是 doctype 標籤。github

<!doctype html>

html指定基本屬性

爲了讓瀏覽器保持更好的兼容性，要求添加以下基本屬性。
基本屬性：web

一、爲文檔指定lang屬性,有助於語音合成工具肯定其所應該採用的發音,有助於翻譯工具肯定其翻譯時所應遵照的規則等等。
二、charset屬性告訴流浪器用什麼編碼格式顯示網頁，不指定該屬性在Safari等部分瀏覽器會出現中文亂碼現象
三、X-UA-Compatible指定IE=edge主要是告訴IE瀏覽器默認用什麼引擎打開網頁，這個還能夠指定IE=7等其它版本。

使用案例：bootstrap

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  </head>  
</html>

爲多媒體元素加上回退方案

咱們須要爲多媒體元素加上附加信息。主要緣由包括：瀏覽器

因爲網絡的緣由，可能圖片等多媒體沒有下載下來
若是考慮屏幕閱讀器的話，多媒體須要使用附加的信息才能被閱讀器識別

不推薦方案：緩存

<img src="logo.jpg" />

推薦方案：網絡

<img src="logo.jpg" alt="規定圖像的替代文本" />

標籤屬性的處理方案

一、屬性順序
HTML屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
推薦案例：

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

class用於標識高度可複用組件，所以應該排在首位。id用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），所以排在第二位。

二、約定布爾屬性值
部分html布爾屬性諸如disabled、checked、readonly、required等等值能夠省略，能夠爲布爾類型，能夠等於屬性名稱。，這裏統一約定使用省略屬性值的格式。
推薦案例：

<input type="text" disabled />

三、用雙引號包裹屬性值
屬性值能夠用單引號包裹，也能夠用雙引號，約定統一使用雙引號包裹
推薦案例：

<p class="error">aaaaaa</p>

標籤嵌套閉合

全部標籤必須正確嵌套和閉合，可使用W3C驗證器檢測代碼。
不推薦的案例：

<div>
    <p>
        標籤嵌套錯誤
</div>
    </p>
// --------------------------------
<div>
    <p>
        標籤沒有閉合
</div>

推薦的案例：

<div>
    <p>
        標籤使用正確
    </p>
</div>

按照功能模塊添加註釋

合理的添加註釋閱讀和編碼會更容易。添加註釋的地方建議按照功能或者模塊來添加，添加註釋的格式建議以下：

一、註釋成對出現，註釋的格式和html元素相同用，即尾部的註釋添加/結束。

<!-- 公告列表模塊 -->
<div class="m-post"
...
<!-- /公告列表模塊 -->

二、註釋成對出現，註釋中標註開始和結束。

<!-- 公告列表模塊 start -->
<div class="m-post"
...
<!-- /公告列表模塊 end -->

內容和樣式分離

html只關注內容，不關注頁面的樣式。咱們選用html標籤考慮的是這部份內容用什麼標籤表達更合適，而不是有哪一個標籤的樣式可讓咱們少些css代碼。常見的錯誤以下：

錯誤的使用style屬性添加樣式
錯誤的使用表象元素b標籤、i標籤等添加樣式
table錯誤的使用cellpadding、border等屬性設置樣式
錯誤的使用<br/>換行

css規範

文件引用

一、不使用@import
css樣式文件有兩種引入方式，一種是link元素，另外一種是@import。建議只在打包工具中使用@import引入mixin等公共樣式文件，html中使用<link>替代@import。

二、去掉引用資源中的引號
引用資源可使用引號，也能夠不使用引號，統一約定不使用引號。
不推薦案例：

div {
  background-image: url("./poster.png");
}

推薦案例：

div {
  background-image: url(./poster.png);
}

三、在head元素中引用css文件
避免在頁面style標籤內引用樣式或者直接在元素上內聯樣式，應該將樣式抽離出來放在單獨的css文件裏。緣由是由於內容和樣式分離，易於維護和管理，而且css文件能夠被緩存，重用等

*符號處理

css代碼避免使用*，緣由是由於它標識瀏覽器所支持的所有html屬性。拿css代碼重置做爲說明。

不推薦案例：

*{margin：0；padding：0;}

推薦案例：

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin：0；padding：0;}

說明：推薦案例代碼稍微多，可是性能比上面的方式好，在渲染的時候，只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul這裏面的元素，這些元素帶有margin和padding，須要重置。而其它span等元素則無需進行內外邊距處理。

避免無心義的選擇器

不推薦案例：

.header #logo img{
    width:200px;
    ...
}

推薦案例：

#logo img{
    width:200px;
    ...
}

說明：咱們的代碼中應注意避免使用一些無實際意義的css代碼，例如上述案例中#logo優先級已經很高了，前面加上.header選擇器不少餘。並且建議元素的嵌套最好不要超過3層，過分的嵌套會使得代碼臃腫，並且也會下降瀏覽器的解析效率。

公共代碼抽離

不推薦案例：

.btn-default { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;  
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;  
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

推薦案例：

.btn { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.btn-default {  
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {   
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

說明：公共的樣式儘可能抽離出來，能夠是模塊內共享，也能夠是全局共享。上述案例是bootstrap框架源碼按鈕樣式的一部分。.btn-default樣式和.btn-primary樣式區別僅僅在與不一樣狀態下的顏色區別，其它代碼相同。在舉個全局共享的案例：

//單行文本超出顯示省略號
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

css命名規範

有句俗語叫作見名知意，css命名應根據大多數人的習慣，以及功能模塊來命名。
一、命名格式
不推薦案例：

// css名字用駝峯式命名
.textEllipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

推薦案例：

// css名字用-分割
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

二、常見的命名建議

頭：header
尾：footer
導航：nav
導航條：navbar
子導航：subnav
內容外圍容器：wrapper/container
側欄：sidebar
登陸條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
菜單：menu
子菜單：submenu
搜索：search
版權：copyright
內容：content
標籤：tags
文章列表：list
提示信息：tips
標題：title
指南：guide
服務：service
註冊：regsiter
狀態：status
摘要: summary

屬性書寫順序

建議書寫css按照必定的順序，不必定按照下面推薦的來進行，而是根據我的本身的習慣，不能雜亂無章。

位置屬性(position, top, right, z-index, display, float)
盒子模型屬性(width, height, padding, margin, border)
文字相關(font, line-height, letter-spacing, color, text-align)
背景相關(background)
其它屬性(opacity)
最後是動畫屬性(animation, transition等)

0與單位

若是屬性值爲0，則不須要爲0加單位。
不推薦的案例：

.header {
    margin: 0px;
    padding: 0px;
}

推薦的案例：

.header {
    margin: 0;
    padding: 0;
}

瀏覽器前綴處理

爲了提升兼容性，須要添加瀏覽器前綴，而且把非前綴版本放在最後。另外一個解決方案是在開發過程當中使用Autoprefixer等第三方庫自動添加前綴。
推薦案例:

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

書寫格式

全部css規則須要換行，多組選擇器之間須要換行，建議你們使用格式化工具或者插件。
不推薦案例：

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

推薦案例：

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

其它注意事項

儘可能少使用id命名，避免出現不可控問題
每條規則結束後都必須加上分號
當使用《css揭祕》等書籍或博客提供的hack技巧時候，必定要添加註釋，解釋清楚
當咱們自定義的組件與框架組件重名時候，咱們應該加上本身工做組或項目的特定前綴進行區分。例如案例：

//bootstrap框架樣式命名爲table
<table class="table">
  ...
</table>

//自定義框架樣式能夠命名爲dms-table,其中dms是項目組簡寫
<table class="dms-table">
  ...
</table>

總結

制定規範可讓咱們的減小無畏的思考，能夠寫出高質量的代碼，能夠減小後期維護的成本，但願你們引發重視。
更多能夠參考：bootstrap開發規範

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。