溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關可用css代碼規范是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
css代碼規范
歡迎使用品csss代碼規范， 這個內部規范。旨在增強團隊開發協作、提高代碼質量和打造開發基石的編碼規范，
以下規范是團隊基本約定的內容，必須嚴格遵循。
HTML規范
基于 W3C、蘋果開發者 等官方文檔，并結合團隊業務和開發過程中總結的規范約定，讓頁面HTML代碼更具語義性。
圖片規范
了解各種圖片格式特性，根據特性制定圖片規范，包括但不限于圖片的質量約定、圖片引入方式、圖片合并處理等，旨在從圖片層面優化頁面性能。
CSS規范
統一規范團隊 CSS 代碼書寫風格和使用 CSS 預編譯語言語法風格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業務層面統一規范常用模塊的引用。
命名規范
從 目錄、圖片、HTML/CSS文件、ClassName 的命名等層面約定規范團隊的命名習慣，增強團隊代碼的可讀性。
DOCTYPE 聲明
HTML文件必須加上 DOCTYPE 聲明，并統一使用 HTML5 的文檔聲明： ~~~html ~~~
HTML5標準模版
```html
```
頁面語言lang
推薦使用屬性值 cmn-Hans-CN（簡體, 中國大陸），但是考慮瀏覽器和操作系統的兼容性，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
更多地區語言參考：
zh-SG 中文 (簡體, 新加坡) 對應 cmn-Hans-SG 普通話 (簡體, 新加坡) zh-HK 中文 (繁體, 香港) 對應 cmn-Hant-HK 普通話 (繁體, 香港) zh-MO 中文 (繁體, 澳門) 對應 cmn-Hant-MO 普通話 (繁體, 澳門) zh-TW 中文 (繁體, 臺灣) 對應 cmn-Hant-TW 普通話 (繁體, 臺灣)
charset 字符集合
一般情況下統一使用 “UTF-8” 編碼
<meta charset="UTF-8">
由于歷史原因，有些業務可能會使用 “GBK” 編碼
<meta charset="GBK">
請盡量統一寫成標準的 “UTF-8”，不要寫成 “utf-8” 或 “utf8” 或 “UTF8”。根據 IETF對UTF-8的定義，其編碼標準的寫法是 “UTF-8”；而 UTF8 或 utf8 的寫法只是出現在某些編程系統中，如 .NET framework 的類 System.Text.Encoding 中的一個屬性名就叫 UTF8。
書寫風格
HTML代碼大小寫
HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫
推薦：
<div class="demo"></div>
不推薦：
```
```
類型屬性
不需要為 CSS、JS 指定類型屬性，HTML5 中默認已包含
推薦：
<link rel="stylesheet" href="" > <script src=""></script>
不推薦：
<link rel="stylesheet" type="text/css" href="" > <script type="text/javascript" src="" ></script>
元素屬性
元素屬性值使用雙引號語法
元素屬性值可以寫上的都寫上
推薦：
<input type="text"> <input type="radio" name="name" checked="checked" >
不推薦：
<input type=text> <input type='text'> <input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出現。這種方法可以用來轉義在文本中不能合法出現的字符。
在 HTML 中不能使用小于號 “<”>”特殊字符，瀏覽器會將它們作為標簽解析，若要正確顯示，在 HTML 源代碼中使用字符實體
推薦：
<a href="#">more>></a>
不推薦：
<a href="#">more>></a>
代碼縮進
統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）
<div class="jdc"> <a href="#"></a> </div>
代碼嵌套
元素嵌套規范，每個塊狀元素獨立一行，內聯元素可選
推薦：
<div> <h2></h2> <p></p> </div> <p><span></span><span></span></p>
不推薦：
<div> <h2></h2><p></p> </div> <p> <span></span> <span></span> </p>
段落元素與標題元素只能嵌套內聯元素
推薦：
<h2><span></span></h2> <p><span></span><span></span></p>
不推薦：
<h2><div></div></h2> <p><div></div><div></div></p>
內容圖
內容圖多以商品圖等照片類圖片形式存在，顏色較為豐富，文件體積較大
優先考慮 JPEG 格式，條件允許的話優先考慮 WebP 格式
盡量不使用PNG格式，PNG8 色位太低，PNG24 壓縮率低，文件體積大
PC平臺單張的圖片的大小不應大于 200KB。
背景圖
背景圖多為圖標等顏色比較簡單、文件體積不大、起修飾作用的圖片
PNG 與 GIF 格式，優先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率
圖像顏色比較簡單的，如純色塊線條圖標，優先考慮使用 PNG8 格式，避免不使用 JPEG 格式
圖像顏色豐富而且圖片文件不太大的（40KB 以下）或有半透明效果的優先考慮 PNG24 格式
圖像顏色豐富而且文件比較大的（40KB - 200KB）優先考慮 JPEG 格式
條件允許的，優先考慮 WebP 代替 PNG 和 JPEG 格式
代碼格式化
樣式書寫一般有兩種：一種是緊湊格式 (Compact)
.jdc{ display: block;width: 50px;}一種是展開格式（Expanded）
.jdc { display: block; width: 50px; }團隊約定
統一使用展開格式書寫樣式
代碼大小寫
樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。
``` / 推薦 /
.jdc{ display:block; }/ 不推薦 /
.JDC{ DISPLAY:BLOCK; }```
選擇器
盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的標簽選擇器
```css / 推薦 /
.jdc {} .jdc li {} .jdc li p{}/ 不推薦 /
*{} jdc {} .jdc div{} ```代碼縮進
統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）
.jdc { width: 100%; height: 100%; }分號
每個屬性聲明末尾都要加分號；
.jdc { width: 100%; height: 100%; }代碼易讀性
左括號與類名之間一個空格，冒號與屬性值之間一個空格
推薦：
.jdc { width: 100%; }不推薦：
.jdc{ width:100%; }逗號分隔的取值，逗號之后一個空格
推薦：
.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; }不推薦：
.jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; }為單個css選擇器或新申明開啟新行
推薦：
css .jdc, .jdc_logo, .jdc_hd { color: #ff0; } .nav{ color: #fff; }不推薦：
css .jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; }顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0
推薦：
.jdc { color: rgba(255,255,255,.5); }不推薦：
.jdc { color: rgba( 255, 255, 255, 0.5 ); }屬性值十六進制數值能用簡寫的盡量用簡寫
推薦：
.jdc { color: #fff; }不推薦：
css .jdc { color: #ffffff; }不要為 0 指明單位
推薦：
css .jdc { margin: 0 10px; }不推薦：
css .jdc { margin: 0px 10px; }屬性值引號
css屬性值需要用到引號時，統一使用單引號
```css / 推薦 /
.jdc { font-family: 'Hiragino Sans GB'; }/ 不推薦 /
.jdc { font-family: "Hiragino Sans GB"; }```
屬性書寫順序
建議遵循以下順序：
布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
css .jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
mozilla官方屬性順序推薦
命名規范
由歷史原因及個人習慣引起的 DOM 結構、命名不統一，導致不同成員在維護同一頁面時，效率低下，迭代、維護成本極高。
目錄命名
項目文件夾：pinyougou
樣式文件夾：css
腳本文件夾：js
樣式類圖片文件夾：img
產品類圖片文件夾： upload
字體類文件夾： fonts
ClassName命名
ClassName的命名應該盡量精短、明確，必須以字母開頭命名，且全部字母為小寫，單詞之間統一使用下劃線 “_” 連接
.nav_top
常用命名推薦
注意：ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做ClassName，因為有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名，因此
這種廣告的英文或拼音類名不應該出現
另外，敏感不和諧字眼也不應該出現，如：
<div class="fuck"></div> <div class="jer"></div> <div class="sm"></div> <div class="gcd"></div> <div class="ass"></div> <div class="KMT"></div>
...
ClassName含義
about關于
account賬戶
arrow箭頭圖標
article文章
aside邊欄
audio音頻
avatar頭像
bg,background背景
bar欄（工具類）
branding品牌化
crumb,breadcrumbs面包屑
btn,button按鈕
caption標題，說明
category分類
chart圖表
clearfix清除浮動
close關閉
col,column列
comment評論
community社區
container容器
content內容
copyright版權
current當前態，選中態
default默認
description描述
details細節
disabled不可用
entry文章，博文
error錯誤
even偶數，常用于多行列表或表格中
fail失敗（提示）
feature專題
fewer收起
field用于表單的輸入區域
figure圖
filter篩選
first第一個，常用于列表中
footer頁腳
forum論壇
gallery畫廊
group模塊，清除浮動
header頁頭
help幫助
hide隱藏
hightlight高亮
home主頁
icon圖標
info,information信息
last最后一個，常用于列表中
links鏈接
login登錄
logout退出
logo標志
main主體
menu菜單
meta作者、更新時間等信息欄，一般位于標題之下
module模塊
more更多（展開）
msg,message消息
nav,navigation導航
next下一頁
nub小塊
odd奇數，常用于多行列表或表格中
off鼠標離開
on鼠標移過
output輸出
pagination分頁
pop,popup彈窗
preview預覽
previous上一頁
primary主要
progress進度條
promotion促銷
rcommd,recommendations推薦
reg,register注冊
save保存
search搜索
secondary次要
section區塊
selected已選
share分享
show顯示
sidebar邊欄，側欄
slide幻燈片，圖片切換
sort排序
sub次級的，子級的
submit提交
subscribe訂閱
subtitle副標題
success成功（提示）
summary摘要
tab標簽頁
table表格
txt,text文本
thumbnail縮略圖
time時間
tips提示
title標題
video視頻
wrap容器，包，一般用于最外層
wrapper容器，包，一般用于最外層
感謝各位的閱讀！關于“可用css代碼規范是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
