web前端編碼規範/編碼習慣❤️

web前端編碼規範/編碼習慣

一、CSS檔案命名規範
二、頁面結構命名
三、導航命名
四、功能命名
五、CSS書寫規範-性能優化方案
六、HTML書寫規範
七、CSS文法
八、CSS聲明順序
九、媒體查詢位置
十、字首屬性
十一、屬性簡寫
十二、LESS 和 SASS 中的運算符
十三、Class 命名

一、CSS檔案命名規範

全局樣式	布局、版面	字型樣式	按鈕樣式	主要的	專欄	主題	子產品	基本共用
global.css	layout.css	font.css	button.css	master.css	columns.css	themes.css	module.css	base.css

二、頁面結構命名

内容/容器	頁頭	頁面主體	子產品頭	頁尾	欄目	子產品	左右中	子產品主題内容容器	頁面外圍控制整體布局寬度
content/container	header	main	hd	footer	column	mod	left right center	md	wrapper

三、導航命名

導航	主導航	子導航	頂導航	邊導航	左導航	右導航	菜單	子菜單	摘要
nav	main nav	sub nav	top nav	sidebar	left side bar	right side bar	menu	submenu	summary

四、功能命名

标志	廣告	登陸	登入條	注冊	搜尋	功能區	欄目标題	加入	狀态
logo	banner	login	login-bar	register	search	shop	title	join-us	status
按鈕	滾動	标簽頁	文章清單	提示資訊	目前的	小技巧	圖示	注釋	指南
btn	scroll	tab	list	msg	current	tips	icon	note	guild
服務	熱點	新聞	下載下傳	投票	合作夥伴	友情連結	版權	活動元素	未活動元素
service	hot	news	download	vote	partner	friend-link	copyright	active	normal

（個人有個人的書寫規範，不做強制要求）

五、CSS書寫規範-性能優化方案

1、禁止

class

與

id

重名

2、書寫順序：布局定位屬性–>自身屬性–>文本屬性–>其他屬性

.box{
    /* 布局定位類 */
    float:left;
    /* 自身屬性 */
    width:100px;
    height:100px;
    /* 文本類 */
    text-align:left;
    /* 其他屬性 */
    background:red;
}

六、HTML書寫規範

在屬性上，使用雙引号，不要使用單引号。

HTML 屬性應該按照特定的順序出現以保證易讀性。

class

id, name

data-*

src, for, type, href, value

title, alt

role, aria-*

Classes

是為高可複用元件設計的，是以他們處在第一位。

Ids

更加具體而且應該盡量少使用（例如, 頁内書簽），是以他們處在第二位。

Boolean

屬性指不需要聲明取值的屬性。

XHTML

需要每個屬性聲明取值，但是

HTML5

并不需要。簡而言之，不要為

Boolean

屬性添加取值。

在

JavaScript

檔案中生成标簽讓内容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。

七、CSS文法

使用組合選擇器時，保持每個獨立的選擇器占用一行。
為了代碼的易讀性，在每個聲明的左括号前增加一個空格。
聲明塊的右括号應該另起一行。
每條聲明應該隻占用一行來保證錯誤報告更加準确。
所有聲明應該以分号結尾。雖然最後一條聲明後的分号是可選的，但是如果沒有他，你的代碼會更容易出錯。
逗号分隔的取值，都應該在逗号之後增加一個空格。
不要在顔色值 rgb() , rgba() , hsl() , hsla() , 和 rect() 中增加空格
不要在屬性取值或者顔色參數前面添加不必要的 0 (比如，使用 .5 替代 0.5 和 -.5px 替代 0.5px )。
所有的十六進制值都應該使用小寫字母，例如 #fff 。因為小寫字母有更多樣的外形，在浏覽文檔時，他們能夠更輕松的被區分開來。
盡可能使用短的十六進制數值，例如使用 #fff 替代 #ffffff 。
為選擇器中得屬性取值添加引号，例如 input[type="text"] 。他們隻在某些情況下可有可無，是以都使用引号可以增加一緻性。
不要為 0 指明機關，比如使用 margin: 0; 而不是 margin: 0px; 。

八、CSS聲明順序

相關的屬性聲明應該以下面的順序分組處理：

Positioning
Box model 盒模型
Typographic 排版
Visual 外觀

Positioning

處在第一位，因為他可以使一個元素脫離正常文本流，并且覆寫盒模型相關的樣式。盒模型緊跟其後，因為他決定了一個元件的大小和位置。其他屬性隻在元件内部起作用或者不會對前面兩種情況的結果産生影響，是以他們排在後面。

例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

九、媒體查詢位置

盡量将媒體查詢的位置靠近他們相關的規則。不要将他們一起放到一個獨立的樣式檔案中，或者丢在文檔的最底部。這樣做隻會讓大家以後更容易忘記他們。

十、字首屬性

當使用廠商字首屬性時，通過縮進使取值垂直對齊以便多行編輯。

例如：

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

十一、屬性簡寫

堅持限制屬性取值簡寫的使用，屬性簡寫需要你必須顯式設定所有取值。常見的屬性簡寫濫用包括:

padding
margin
font
background
border
border-radius

十二、LESS 和 SASS 中的運算符

// Bad example
.element {
  margin: 10px 0 @variable*2 10px;
}

// Good example
.element {
  margin: 10px 0 (@variable * 2) 10px;
}

十三、Class 命名

保持 Class 命名為全小寫，可以使用短劃線（不要使用下劃線和 camelCase 命名）。短劃線應該作為相關類的自然間斷。(例如， .btn 和 .btn-danger )。
避免過度使用簡寫。 .btn 可以很好地描述 button ，但是 .s 不能代表任何元素。
Class 的命名應該盡量短，也要盡量明确。
使用有意義的名稱；使用結構化或者作用目标相關，而不是抽象的名稱。
命名時使用最近的父節點或者父 class 作為字首。
使用 .js-* classes 來表示行為(相對于樣式)，但是不要在 CSS 中定義這些 classes 。

web前端編碼規範/編碼習慣❤️