前臺開發中的CSS使用規范,來學習一下吧

  • 時間:2019-01-14 22:10 作者:coder分享 來源:coder分享 閱讀:182
  • 掃一掃,手機訪問
摘要:前言在前兩篇文章中,我們有講過前臺開發過程中需要注意到的HTML和Javascript規范問題,假如還沒看過的,可以去看一下這兩篇文章。今天這篇文章我們繼續學習一下關于CSS的規范問題。前臺開發中的Javascript規范,來學習一下吧前臺開發過程中的HTML規范,來學習一下吧CSSID和Class

前言

在前兩篇文章中,我們有講過前臺開發過程中需要注意到的HTML和Javascript規范問題,假如還沒看過的,可以去看一下這兩篇文章。今天這篇文章我們繼續學習一下關于CSS的規范問題。

  1. 前臺開發中的Javascript規范,來學習一下吧

  2. 前臺開發過程中的HTML規范,來學習一下吧

前臺開發中的CSS使用規范,來學習一下吧

CSS

ID和Class

ID作為網頁上唯一標識一個元素的屬性,在CSS中不推薦被使用,而應該使用Class來代替。

因而,我們不推薦下面采用id的寫法。

前臺開發中的CSS使用規范,來學習一下吧

不推薦寫法

我們推薦下面采用class的寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

而且,CSS的選擇器具備不同的權重,大致可以表示成這樣。

前臺開發中的CSS使用規范,來學習一下吧

選擇器權重

通過上面的權重圖可以看出,一個ID選擇器的權重是class選擇器權重的10倍,因而假如使用ID選擇器來定義CSS樣式,很容易就會覆蓋后面定義的Class選擇器,而且還不容易發現。

通過下面一段代碼,就能說明問題。

前臺開發中的CSS使用規范,來學習一下吧

代碼

避免使用標簽名

在編寫CSS時,應該盡量使用具備語義化的class選擇器,而不應該直接使用標簽名,這樣可以使得CSS樣式更加容易維護。

我們可以考慮這樣一種情況,假如頁面上的標簽需要更換,而我們使用了標簽名去定義樣式,這樣就會修改CSS文件中的內容;而假如我們只采用了Class去定義樣式,那么頁面上標簽的修改并不會影響到CSS文件中的內容。

因而我們不推薦下面這種寫法。

前臺開發中的CSS使用規范,來學習一下吧

不推薦寫法

我們推薦下面這種寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

縮寫屬性

在CSS中提供了很多例如margin, padding一樣的縮寫屬性,在編寫CSS樣式時,應當盡可能的使用縮寫屬性,不僅可以提高代碼的可讀性,而且還會提高代碼執行效率。

因而,我們不推薦下面這種寫法。

前臺開發中的CSS使用規范,來學習一下吧

不推薦寫法

我們推薦以下使用縮寫屬性的寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

0值

在屬性值為0時,可以省略掉后面的單位。

因而我們不推薦下面這種寫法。

前臺開發中的CSS使用規范,來學習一下吧

不推薦

我們推薦下面的寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

屬性公告

為了保證書寫CSS樣式的一致性,屬性名后緊跟冒號,冒號和屬性值之間有一個空格。而且每個選擇器和屬性公告都應該另起一行。

因而,我們不推薦以下寫法。

前臺開發中的CSS使用規范,來學習一下吧

不推薦寫法

我們推薦以下寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

引號

在需要使用到引號的地方,推薦使用雙引號(""),而不是單引號(''),在需要使用到url時,不應該使用引號。

因而我們不推薦下面的方式。

前臺開發中的CSS使用規范,來學習一下吧

不推薦寫法

我們推薦使用下面寫法。

前臺開發中的CSS使用規范,來學習一下吧

推薦寫法

結束語

今天這篇文章講解的是前臺開發中的應該遵循的CSS規范,內容可能不是很全面,大家可以自行補充。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】在CentOS 7上如何安裝Gogs 0.11.53(2020-02-10 10:14)
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询