天天看點

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 屬性應該按照特定的順序出現以保證易讀性。

1. ​​

​class​

​​ 2. ​

​id, name​

​ 3. ​

​data-*​

​ 4. ​

​src, for, type, href, value​

​ 5. ​

​title, alt​

​ 6. ​

​role, aria-*​

​​

​Classes​

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

​Ids ​

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

​Boolean​

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

​XHTML​

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

​HTML5 ​

​并不需要。簡而言之,不要為 ​

​Boolean ​

​屬性添加取值。

在​

​JavaScript​

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

七、CSS文法

  1. 使用組合選擇器時,保持每個獨立的選擇器占用一行。
  2. 為了代碼的易讀性,在每個聲明的左括号前增加一個空格。
  3. 聲明塊的右括号應該另起一行。
  4. 每條聲明應該隻占用一行來保證錯誤報告更加準确。
  5. 所有聲明應該以分号結尾。雖然最後一條聲明後的分号是可選的,但是如果沒有他,你的代碼會更容易出錯。
  6. 逗号分隔的取值,都應該在逗号之後增加一個空格。
  7. 不要在顔色值 ​

    ​rgb()​

    ​​, ​

    ​rgba()​

    ​​, ​

    ​hsl()​

    ​​, ​

    ​hsla()​

    ​​, 和 ​

    ​rect() ​

    ​中增加空格
  8. 不要在屬性取值或者顔色參數前面添加不必要的 ​

    ​0 ​

    ​​(比如,使用​

    ​.5​

    ​​替代 ​

    ​0.5​

    ​​ 和 ​

    ​-.5px ​

    ​​替代 ​

    ​0.5px​

    ​)。
  9. 所有的十六進制值都應該使用小寫字母,例如​

    ​ #fff​

    ​。因為小寫字母有更多樣的外形,在浏覽文檔時,他們能夠更輕松的被區分開來。
  10. 盡可能使用短的十六進制數值,例如使用 ​

    ​#fff ​

    ​​替代 ​

    ​#ffffff​

    ​。
  11. 為選擇器中得屬性取值添加引号,例如​

    ​ input[type="text"]​

    ​。 他們隻在某些情況下可有可無,是以都使用引号可以增加一緻性。
  12. 不要為​

    ​0​

    ​​指明機關,比如使用​

    ​ margin: 0;​

    ​​ 而不是​

    ​ margin: 0px;​

    ​。

八、CSS聲明順序

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

  1. ​Positioning​

  2. ​Box model ​

    ​盒模型
  3. ​Typographic ​

    ​排版
  4. ​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);
}      

十一、屬性簡寫

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

  1. ​padding​

  2. ​margin​

  3. ​font​

  4. ​background​

  5. ​border​

  6. ​ border-radius​

十二、LESS 和 SASS 中的運算符

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

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

十三、Class 命名

  1. 保持 Class 命名為全小寫,可以使用短劃線(不要使用下劃線和 ​

    ​camelCase​

    ​​ 命名)。短劃線應該作為相關類的自然間斷。(例如,​

    ​.btn ​

    ​​和​

    ​ .btn-danger​

    ​)。
  2. 避免過度使用簡寫。​

    ​.btn ​

    ​​可以很好地描述 ​

    ​button​

    ​​,但是 ​

    ​.s ​

    ​不能代表任何元素。
  3. Class 的命名應該盡量短,也要盡量明确。
  4. 使用有意義的名稱;使用結構化或者作用目标相關,而不是抽象的名稱。
  5. 命名時使用最近的父節點或者父 ​

    ​class ​

    ​作為字首。
  6. 使用​

    ​.js-* classes​

    ​​來表示行為(相對于樣式),但是不要在​

    ​CSS​

    ​​中定義這些 ​

    ​classes​

    ​。