整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          寫給初學者的HTML和CSS編碼規(guī)范

          TML配置

          • 文件應以“”首行頂格開始,推薦使用“”。
          • 必須申明文檔的編碼charset,并且使用UTF-8編碼。
          • 移動端必須使用 viewport 適配
          • 頁面title是極為重要的不可缺少的一項。

          以下是一個標準的html結構

          html復制代碼<!DOCTYPE html>
          <html>
            <head>
              <!-- 必須聲明 utf-8 編碼格式 -->
              <meta charset="utf-8">
              <!-- 頁面標題不能為空 -->
              <title>京東商城:商家后臺</title>
              <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
              <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
               
              <!-- 樣式文件 以外鏈形式在此處引入 -->
              <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
            </head>
            <body>
              <!-- 頁面主體 -->
              <div class="warp">
                <header>頂部內容區(qū)域,比如:菜單頭</header>
                <div class="content">主內容區(qū)域</div>
                <footer>頂部頁尾區(qū)域,比如:備案號</footer>
              </div>
               
              <!-- js文件 在此處引入 -->
              <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
            </body>
          </html>
          

          主框架(jQuery,vue,react,angular等) 避免混合使用

          避免多個框架混合使用,在同一個工程里面要保持主框架的一致性,多框架同時使用會造成代碼混亂,后期會變得越來越難維護。

          Css開發(fā)規(guī)范

          1、全局樣式禁止使用!important

          2、避免使用導入式引入css樣式文件;

          css復制代碼<style type="text/css">
            @import url(./demo.css);
          </style>
          

          未使用的js/css禁止引用

          歷史頁面會有一些功能下線,在去除頁面初始化的js語句的同時,也要將依賴的js文件刪除,避免資源加載浪費

          文件必須使用gzip壓縮

          開啟Gzip壓縮功能, 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮,提高訪問速度

          api接口中,無用字段占傳輸比例30%以上時,刪除無用字段

          在開發(fā)過程中,發(fā)現(xiàn)無用字段占傳輸比例30%以上時,請進行返回數(shù)據(jù)的刪減,加快數(shù)據(jù)請求速度

          關于圖片壓縮

          上傳圖片之前一定要做圖片的無損壓縮,節(jié)省網絡流量,推薦網站tinypng

          HTML的標準結構

          html復制代碼<!DOCTYPE html>
          <html>
            <head>
              <!-- 必須聲明 utf-8 編碼格式 -->
              <meta charset="utf-8">
              <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索,不強制使用 -->
              <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
              <meta name="Description" Content=”頁面描述″>
              <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
              <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
              <!-- 推薦手動引入指定路徑 favicon  -->
              <link rel="shortcut icon" href="path/to/favicon.ico">
              <!-- 樣式文件必須以外鏈形式在此處引入 -->
              <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
              <!-- 內聯(lián)樣式 -->
              <style type="text/css">
                .warp {
                  margin: 0;
                  padding: 0;
                }
              </style> -->
              <!-- 頁面標題不能為空 -->
              <title>頁面標題</title>
            </head>
            <body>
            <!-- 頁面主體 -->
              <div class="warp">
              <header>頂部內容區(qū)域,比如:菜單頭</header>
              <div class="content">主內容區(qū)域</div>
              <footer>頂部頁尾區(qū)域,比如:備案號</footer>
              </div>
           
              <!-- JavaScript 文件在此處引入 -->
              <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
            </body>
          </html>
          
          • 不同模塊區(qū)域可使用簡要備注標識模塊內容
          • HTML 標簽語義化使結構清晰,比如:
          • CSS 外鏈引入必須放在 中
          • JS 外鏈引入必須放在中
          • 省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協(xié)議頭部聲明 ( http:// , https:// ),用//代替。
          • favicon 在未指定 favicon 時,大多數(shù)瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問,避免404,必須遵循以下兩種方法之一:1。在 Web Server 根目錄放置 favicon.ico 文件,2。使用 link 指定 favicon

          HTML標簽使用守則

          標簽小寫

          原生 HTML 標簽元素小寫使用,自定義組件使用小駝峰命名(自定義標簽避免和原生標簽同名)

          html復制代碼<!-- 錯誤 ? -->
          <DIV></DIV>
          <SPAN></SPAN>  
           
          <!-- 正確 ? -->
          <div></div>  
          <p></p> 
           
          <!-- 自定義組件 -->
          <shareDialog><shareDialog/>
          

          套用規(guī)則

          禁止在行內元素中嵌套塊級元素??

          html復制代碼<!-- 錯誤的嵌套 ? -->
          <span><div></div></span>  
          <i><p></p></i>     
           
          <!-- 正確的嵌套 ? -->
          <div><span></span></div>  
          <p><i></i></p>   
          

          更多標簽使用規(guī)則介紹請查看尾部附錄

          屬性定義

          定義屬性賦值時,使用雙引號,禁止單雙引號混用

          html復制代碼<!-- 錯誤的定義 ? -->
          <input id="formTitle" type='text' placeholder="請輸入標題">   
           
          <!-- 正確的定義 ? -->
          <input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">   
          

          正確閉合

          除自閉合標簽外,所有標簽都需正確的編寫閉合標簽

          常用自閉合標簽: <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

          ID、Class 命名使用規(guī)范

          ID 和 Class 取通用且有意義的名字;

          使用連字符 - 作為 ID、Class 名稱界定符 ,不要駝峰命名法和下劃線;

          避免選擇器嵌套層級過多,盡量少于 3 級;

          使用命名空間防止命名沖突,利于維護;

          css復制代碼/* 不推薦: 無意義 不易理解 */
          #yee-1901 {}
          #meunBtn {}
          .login_input {}
           
          /* 推薦: 明確詳細 */
          #gallery {}
          #login {}
          .login-input {}
          .meun-btn {}
          
          • 避免選擇器和 Class、ID 疊加使用
          • 聲明順序,相關屬性應為一組,建議遵循: 定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
          • 對于 JS 操作相關選擇器 前面需加上 特殊應用標識前綴
          css復制代碼/* 標準的聲明順序 */
          .declaration-order {
            /* 布局屬性 */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
           
            /* 盒模型屬性 */
            display: block;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            margin: 10px;
            float: right;
            overflow: hidden;
           
            /* 文本屬性 */
            font: normal 13px "Helvetica Neue", sans-serif;
            line-height: 1.5;
            text-align: center;
           
            /* 視覺屬性 */
            background-color: #f5f5f5;
            color: #fff;
            opacity: .8;
           
            /* 其他屬性 */
            cursor: pointer;
          }
          

          圖片相關使用規(guī)范

          <img/>標簽守則

          • src 屬性不能為空,需添加默認值(托底圖片路徑)
          • 為重要圖片添加 alt 屬性,當無法顯示圖像時,瀏覽器將顯示替代文本,便于 SEO 及用戶閱讀
          • 為圖片標簽 增加 width 和 height 屬性,避免圖片加載從無到有,導致頁面抖動
          • 大量圖片流資源,使用懶加載技術按需加載
          html復制代碼<!-- 禁止 src 取值為空 -->
          <img src="" />
           
          <!-- 推薦 -->
          <img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
          

          圖片資源守則

          大小

          尺寸 小于 50 ×?50 的請使用 字體圖標(iconfont)或者 將多個圖標合成一張大圖使用(雪碧圖) 尺寸大于 50 ×?50 的圖片,引入前先使用 在線壓縮 對其進行壓縮 ,圖片大小盡量控制在 300kb 以內

          倍率

          PC端、移動端 推薦使用 2倍圖 (@2x),避免設備分辨率過高,圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景,可使用 3倍圖(@3x)

          html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
          

          2倍圖: 圖片展示區(qū)域大小 : 圖片實際尺寸 = 1 :2

          無論使用幾倍圖,圖片大小都需遵守上條限制

          如遇圖片倍圖問題,可咨詢 @UI童鞋

          性能守則

          • 避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優(yōu)化 DOM 樹查詢的方案是,當一個元素出現(xiàn)多次時,將它保存在一個變量中,來避免多次查詢 DOM 樹。
          js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
          var ul = document.getElementsByTagName('ul')[0],
            lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
             
          /* 推薦用變量保存頻繁使用的 DOM 元素*/
          var ul = document.getElementsByTagName('ul')[0],
            lis = ul.getElementsByTagName('li')
          
          • 異步加載第三方內容 當你無法保證嵌入第三方內容 比如 埋點、調研等資源正常工作的時候,你需要考慮用異步加載這些代碼,避免阻塞整個頁面加載。
          • 減少標簽的數(shù)量 編寫 HTML 代碼時,盡量避免多余的標簽嵌套,避免 DOM樹的冗余
          • 控制靜態(tài)資源數(shù)量

          1個頁面中建議CSS文件不要超過3個(1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式); JS文件不要超過5個(1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件)。

          編碼建議

          縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號

          其他建議

          保持一定的代碼潔癖,尤其在大型項目中

          • 代碼邏輯應當直截了當,清晰易讀,保持與業(yè)務邏輯與代碼一一對應關系,減少邏輯錯誤的可能性,降低二次開發(fā)成本;
          • 刪除過期無用代碼,減少代碼過大,造成不必要的維護成本
          • 代碼盡量復用,擁有組件化思想
          • 代碼命名合理化,即使不寫注釋情況下,也可以讓其他開發(fā)人員一眼明白意思
          • 性能調至最優(yōu),降低耦合度,避免別人做不合理的優(yōu)化時而造成的混亂
          • 整潔的模塊邊界,明確的劃分模塊之間的邏輯邊界,盡量保證職責單一,避免功能交叉混雜
          • 讓代碼沒有改進的余地,在開發(fā)時把各種情況都想到了,如果有人企圖改進它,總是會回到原點

          性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具,主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分,并給出優(yōu)化建議,這些打分標準和優(yōu)化建議可以視為Google的網頁最佳實踐。

          Chrome拓展程序 谷歌商店安裝lighthouse后,在右上角或者菜單里點擊圖中圖標,Options可以配置測試項目,點擊Generate report即可測試。

          命令行

          js復制代碼<!-- 安裝 lighthouse 組件(Node.js V5.0 或以上版本) -->
          npm install -g lighthouse
          <!-- 啟動測試 (測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態(tài)HTML文件) -->
          lighthouse https://www.baidu.com/ --view
          <!-- 幫助-->
          lighthouse --help
          

          檢測結果

          【附錄】常用的標簽規(guī)范

          標簽

          語義

          嵌套常見錯誤

          常用屬性

          <a></a>

          超鏈接/錨

          a不可嵌套a

          href,name,title,rel,target

          <div></div>

          塊級容器



          <p></p>

          段落

          不能嵌套塊級元素


          <span></span>

          內聯(lián)容器(行內元素)

          不可嵌套塊級容器


          <form></form>

          表單


          action,target,method,name

          <input />

          輸入框

          不可嵌套元素

          type,name,value,checked,disabled,maxlength,readonly,accesskey

          <textarea></textarea>

          多行文本輸入控件


          name,accesskey,disabled,readonly,rows,cols

          <img />

          圖像

          不可嵌套元素

          alt,src,width,height

          <label></label>

          標簽(常用input元素定義標注)

          不可嵌套塊級容器

          for

          <table></table>

          表格

          只可嵌套表格子元素

          width,align,background,cellpadding,cellspacing,summary,border

          <tbody></tbody>

          表格主體

          只能嵌套在table內


          <thead></thead>

          表頭

          只能嵌套在table內


          <tr></tr>

          表格行

          嵌套于table或thead、tbody、tfoot


          <td></td>

          表格中的單元格

          只用于tr

          colspan,rowspan

          <th></th>

          表格中的標題單元格

          只用于tr

          colspan,rowspan

          <tfoot></tfoot>

          表格表尾

          只用于table


          <button></button>

          按鈕

          不可嵌套表單、表格等塊級元素

          type,disabled

          <select></select>

          列表框或下拉框

          只能嵌套option或optgroup

          name,disabled,multiple

          <option></option>

          select中的一個選項

          只能嵌套在select內

          value,selected,disabled

          <ol></ol>

          有序列表

          只能嵌套li


          <ul></ul>

          無序列表

          只能嵌套li


          <li></li>

          無序列表項

          只能嵌套在 ul 或 ol 內


          <iframe></iframe>

          內嵌一個網頁


          frameborder,width,height,src,scrolling,name

          <br />

          換行



          <link />

          引用樣式或icon

          不可嵌套任何元素

          type,rel,href

          <meta />

          文檔信息

          只用于head內

          content,http-equiv,name

          <script></script>

          引用腳本

          不可嵌套任何元素

          type,src

          <style></style>

          引用樣式

          不可嵌套任何元素

          type,media

          <title></title>

          文檔標題

          只用于head內


          點贊收藏支持、手留余香、與有榮焉,動動你發(fā)財?shù)男∈謫眩兄x各位大佬能留下您的足跡。


          作者:StriveToY
          鏈接:https://juejin.cn/post/7262378982255394873

          金定律

          永遠遵循同一套編碼規(guī)范 -- 可以是這里列出的,也可以是你自己總結的。如果你發(fā)現(xiàn)本規(guī)范中有任何錯誤,敬請指正。通過 open an issue on GitHub 為本規(guī)范添加內容或貢獻力量。

          不管有多少人共同參與同一項目,一定要確保每一行代碼都像是同一個人編寫的。

          語法

          • 用兩個空格來代替制表符(tab) -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

          • 嵌套元素應當縮進一次(即兩個空格)。

          • 對于屬性的定義,確保全部使用雙引號,絕不要使用單引號。

          • 不要在自閉合(self-closing)元素的尾部添加斜線 -- HTML5 規(guī)范中明確說明這是可選的。

          • 不要省略可選的結束標簽(closing tag)(例如,</li></body>)。

          HTML5 doctype

          為每個 HTML 頁面的第一行添加標準模式(standard mode)的聲明,這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)。

          語言屬性

          根據(jù) HTML5 規(guī)范:

          強烈建議為 html 根元素指定 lang 屬性,從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發(fā)音,有助于翻譯工具確定其翻譯時所應遵守的規(guī)則等等。

          更多關于 lang 屬性的知識可以從 此規(guī)范 中了解。

          這里列出了語言代碼表。

          IE 兼容模式

          IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求,否則最好是設置為 edge mode,從而通知 IE 采用其所支持的最新的模式。

          閱讀這篇 stack overflow 上的文章可以獲得更多有用的信息。

          字符編碼

          通過明確聲明字符編碼,能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是,可以避免在 HTML 中使用字符實體標記(character entity),從而全部與文檔編碼一致(一般采用 UTF-8 編碼)。

          引入 CSS 和 JavaScript 文件

          根據(jù) HTML5 規(guī)范,在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性,因為 text/csstext/javascript 分別是它們的默認值。

          HTML5 spec links

          • Using link

          • Using style

          • Using script

          實用為王

          盡量遵循 HTML 標準和語義,但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

          屬性順序

          HTML 屬性應當按照以下給出的順序依次排列,確保代碼的易讀性。

          • class

          • id, name

          • data-*

          • src, for, type, href, value

          • title, alt

          • role, aria-*

          class 用于標識高度可復用組件,因此應該排在首位。id 用于標識具體組件,應當謹慎使用(例如,頁面內的書簽),因此排在第二位。

          布爾(boolean)型屬性

          布爾型屬性可以在聲明時不賦值。XHTML 規(guī)范要求為其賦值,但是 HTML5 規(guī)范不需要。

          更多信息請參考 WhatWG section on boolean attributes:

          元素的布爾型屬性如果有值,就是 true,如果沒有值,就是 false。

          如果一定要為其賦值的話,請參考 WhatWG 規(guī)范:

          如果屬性存在,其值必須是空字符串或 [...] 屬性的規(guī)范名稱,并且不要在首尾添加空白符。

          簡單來說,就是不用賦值。

          減少標簽的數(shù)量

          編寫 HTML 代碼時,盡量避免多余的父元素。很多時候,這需要迭代和重構來實現(xiàn)。請看下面的案例:

          JavaScript 生成的標簽

          通過 JavaScript 生成的標簽讓內容變得不易查找、編輯,并且降低性能。能避免時盡量避免。

          CSS

          語法

          • 用兩個空格來代替制表符(tab) -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

          • 為選擇器分組時,將單獨的選擇器單獨放在一行。

          • 為了代碼的易讀性,在每個聲明塊的左花括號前添加一個空格。

          • 聲明塊的右花括號應當單獨成行。

          • 每條聲明語句的 : 后應該插入一個空格。

          • 為了獲得更準確的錯誤報告,每條聲明都應該獨占一行。

          • 所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的,但是,如果省略這個分號,你的代碼可能更易出錯。

          • 對于以逗號分隔的屬性值,每個逗號后面都應該插入一個空格(例如,box-shadow)。

          • 不要在 rgb()rgba()hsl()hsla()rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值(既加逗號也加空格)中區(qū)分多個顏色值(只加逗號,不加空格)。

          • 對于屬性值或顏色參數(shù),省略小于 1 的小數(shù)前面的 0 (例如,.5 代替 0.5-.5px 代替 -0.5px)。

          • 十六進制值應該全部小寫,例如,#fff。在掃描文檔時,小寫字符易于分辨,因為他們的形式更易于區(qū)分。

          • 盡量使用簡寫形式的十六進制值,例如,用 #fff 代替 #ffffff

          • 為選擇器中的屬性添加雙引號,例如,input[type="text"]。只有在某些情況下是可選的,但是,為了代碼的一致性,建議都加上雙引號。

          • 避免為 0 值指定單位,例如,用 margin: 0; 代替 margin: 0px;

          聲明順序

          相關的屬性聲明應當歸為一組,并按照下面的順序排列:

          1. Positioning

          2. Box model

          3. Typographic

          4. Visual

          由于定位(positioning)可以從正常的文檔流中移除元素,并且還能覆蓋盒模型(box model)相關的樣式,因此排在首位。盒模型排在第二位,因為它決定了組件的尺寸和位置。

          其他屬性只是影響組件的內部(inside)或者是不影響前兩組屬性,因此排在后面。

          不要使用 @import

          <link> 標簽相比,@import 指令要慢很多,不光增加了額外的請求次數(shù),還會導致不可預料的問題。替代辦法有以下幾種:

          • 使用多個 <link> 元素

          • 通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件

          • 通過 Rails、Jekyll 或其他系統(tǒng)中提供過 CSS 文件合并功能

          媒體查詢(Media query)的位置

          將媒體查詢放在盡可能相關規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了,將來只會被大家遺忘。下面給出一個典型的實例。

          帶前綴的屬性

          當使用特定廠商的帶有前綴的屬性時,通過縮進的方式,讓每個屬性的值在垂直方向對齊,這樣便于多行編輯。

          在 Textmate 中,使用 Text → Edit Each Line in Selection (??A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (??↑) 和 Selection → Add Next Line (??↓)。

          單行規(guī)則聲明

          對于只包含一條聲明的樣式,為了易讀性和便于快速編輯,建議將語句放在同一行。對于帶有多條聲明的樣式,還是應當將聲明分為多行。

          這樣做的關鍵因素是為了錯誤檢測 -- 例如,CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明,你就不會忽略這個錯誤;如果是單行多條聲明的話,你就要仔細分析避免漏掉錯誤了。

          簡寫形式的屬性聲明

          在需要顯示地設置所有值的情況下,應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下:

          • padding

          • margin

          • font

          • background

          • border

          • border-radius

          大部分情況下,我們不需要為簡寫形式的屬性聲明指定所有值。例如,HTML 的 heading 元素只需要設置上、下邊距(margin)的值,因此,在必要的時候,只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導致代碼混亂,并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

          在 MDN(Mozilla Developer Network)上一篇非常好的關于shorthand properties 的文章,對于不太熟悉簡寫屬性聲明及其行為的用戶很有用。

          Less 和 Sass 中的嵌套

          避免不必要的嵌套。這是因為雖然你可以使用嵌套,但是并不意味著應該使用嵌套。只有在必須將樣式限制在父元素內(也就是后代選擇器),并且存在多個需要嵌套的元素時才使用嵌套。

          Less 和 Sass 中的操作符

          為了提高可讀性,在圓括號中的數(shù)學計算表達式的數(shù)值、變量和操作符之間均添加一個空格。

          注釋

          代碼是由人編寫并維護的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達上下文關系和代碼目的。不要簡單地重申組件或 class 名稱。

          對于較長的注釋,務必書寫完整的句子;對于一般性注解,可以書寫簡潔的短語。

          class 命名

          • class 名稱中只能出現(xiàn)小寫字符和破折號(dashe)(不是下劃線,也不是駝峰命名法)。破折號應當用于相關 class 的命名(類似于命名空間)(例如,.btn.btn-danger)。

          • 避免過度任意的簡寫。.btn 代表 button,但是 .s 不能表達任何意思。

          • class 名稱應當盡可能短,并且意義明確。

          • 使用有意義的名稱。使用有組織的或目的明確的名稱,不要使用表現(xiàn)形式(presentational)的名稱。

          • 基于最近的父 class 或基本(base) class 作為新 class 的前綴。

          • 使用 .js-* class 來標識行為(與樣式相對),并且不要將這些 class 包含到 CSS 文件中。

          在為 Sass 和 Less 變量命名時也可以參考上面列出的各項規(guī)范。

          選擇器

          • 對于通用元素使用 class ,這樣利于渲染性能的優(yōu)化。

          • 對于經常出現(xiàn)的組件,避免使用屬性選擇器(例如,[class^="..."])。瀏覽器的性能會受到這些因素的影響。

          • 選擇器要盡可能短,并且盡量限制組成選擇器的元素個數(shù),建議不要超過 3 。

          • 只有在必要的時候才將 class 限制在最近的父元素內(也就是后代選擇器)(例如,不使用帶前綴的 class 時 -- 前綴類似于命名空間)。

          代碼組織

          • 以組件為單位組織代碼段。

          • 制定一致的注釋規(guī)范。

          • 使用一致的空白符將代碼分隔成塊,這樣利于掃描較大的文檔。

          • 如果使用了多個 CSS 文件,將其按照組件而非頁面的形式分拆,因為頁面會被重組,而組件只會被移動。

          編輯器配置

          將你的編輯器按照下面的配置進行設置,以避免常見的代碼不一致和差異:

          • 用兩個空格代替制表符(soft-tab 即用空格代表 tab 符)。

          • 保存文件時,刪除尾部的空白符。

          • 設置文件編碼為 UTF-8。

          • 在文件結尾添加一個空白行。

          題的由來

          第一次關注這個標題編號的問題應該回溯到本科畢業(yè)論文的時候了,當時還單獨涉獵過這個主題,Word 有個很好的特性級聯(lián)標題,一次設置好之后,后續(xù)只要設置標題樣式就能按照設置的標題編號方式自動編號,我們要做的只是將對應的標題設置成對應基本的標題樣式就好了,這個方法讓我愛不釋手,多年來一直沿用。完全解決了中途插入一章,一節(jié)等等導致的章節(jié)編號都需要人肉調整的問題,當然還有圖片的編號命名什么的,都是類似的。
          直到后面開始用markdown 由于各個編輯器的切換,一直沒有一個好用的替代方案,所以幾年前我寫了一個小工具用命令行來做這事rawbin-/markdown-clear,這個工具解決了在github寫博客的問題,同時在解決博客的問題的基礎上解決了在各個平臺發(fā)文的問題,因為編號是用腳本寫上去的,所以用markdown here在各個平臺發(fā)文也就順理成章的轉成html就行了,也解決了這個階段的問題。
          前兩天把拖欠幾個月的全面認知的總結寫了,突然不想用這個腳本來編號了,產生一個想法:能不能不人肉編號,自動編上?然后就有了下面的內容。

          先搞起來解決問題

          以下操作案例都是在macOS中產出,其他平臺可能有些許差別,換湯不換藥。

          在typora中寫markdown自動編號 打開typora【偏好設置】 找到【外觀】=>【主題】=>【打開主題文件夾】 將如下代碼加入到打開目錄的base.user.css 中#writer { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h5 { counter-reset: h6 } #writer h1:before { counter-increment: h1; content: counter(h1) ". " } #writer h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } #writer h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } #writer h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } #writer h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } #writer h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 講道理 打開typora【偏好設置】 找到【通用】=>【高級 】=>【開啟調試模式】=>勾選 然后在非源碼模式下=>【右鍵】=>【檢查元素】,就可以看到為什么是#write了 這個后面還有用在github pages 寫markdown博客自動編號 我用的是jekyllbootstrap.com的模板,比較簡單 打開任意一篇rawbin-.github.io中的文章,然后【右鍵】=>【檢查】 可以拿到兩個內容 容器類為 .content ,嚴格點為#wrap .content 樣式文件在assets/themes/bootstrap3,可以修改其下的css/style.css 將如下內容改到源代碼的assets/themes/bootstrap3/css/style.css中.content { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { counter-reset: h5 } h5 { counter-reset: h6 } .content h1:before { counter-increment: h1; content: counter(h1) ". " } .content h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } .content h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } .content h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } .content h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } .content h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 在其他網頁編輯中自動編碼 比如各個博客平臺,各個自媒體平臺等,像我們常用的寫文檔的語雀都可以的。[最后發(fā)現(xiàn)只有那么幾個平臺可以,有的偽類被過濾替換掉了,有的是直接支持markdown無法富文本編輯,有的…]
          這里面涉及到一款瀏覽器插件markdown here,可以在頁面富文本編輯器中將markdown 自動轉換為網頁,這也是我前面說到的這幾年在各個平臺發(fā)文的套路,寫好編號好標題markdown往編輯器里面一貼,然后一點 ,搞定。簡單嘗試 markdown here 有一個配置頁面,可以配置和調整css,并能預覽效果 簡單看了下是用js把類轉成了style屬性,并且不支持偽類修改源碼 到adam-p/markdown-here 看到,已經兩年沒動代碼了 不管三七二十三先 fork一把到rawbin-/markdown-here,然后把代碼拉下來 先把css文件建起來src/common/auto-number-title,找容器類可以在markdown here的選項頁面找到.markdown-here-wrapper.markdown-here-wrapper { counter-reset: h1 } .markdown-here-wrapper h1 { counter-reset: h2 } .markdown-here-wrapper h2 { counter-reset: h3 } .markdown-here-wrapper h3 { counter-reset: h4 } .markdown-here-wrapper h4 { counter-reset: h5 } .markdown-here-wrapper h5 { counter-reset: h6 } .markdown-here-wrapper h1:before { counter-increment: h1; content: counter(h1) ". " } .markdown-here-wrapper h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } .markdown-here-wrapper h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } .markdown-here-wrapper h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } .markdown-here-wrapper h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } .markdown-here-wrapper h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } 然后修改一下注入配置,允許加載這個樣式文件,并引入這個樣式問題 剩下的有錯改錯就好了最終產出和應用 克隆rawbin-/markdown-here 打開Chrome 設置三個點=>【更多工具】=>【擴展程序】 打開【開發(fā)者模式】 選擇【加載已解壓的擴展程序】=>選擇克隆代碼下的src目錄即可安裝并加載插件 將插件固定在插件欄方便使用 auto-number-title.scss內容如下.markdown-here-wrapper { counter-reset: h1; h1 { counter-reset: h2; &:before { counter-increment: h1; content: counter(h1) ". "; } } h2 { counter-reset: h3; &:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } } h3 { counter-reset: h4; &:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } } h4 { counter-reset: h5; &:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } } h5 { counter-reset: h6; &:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } } h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } } 再來簡單講一下道理 CSS 自動編號 不是一個新特性,或者說是一個老特性了,出現(xiàn)在CSS 2.1中,搜索site:w3.org css automatic numbering 可以找到,當然截止今天后來的版本(CSS 3, CSS 2.2)都有這個特性,從caniuse上可以看到,IE8及以上兼容,很棒吧 簡單說明 counter-reset 重置 counter-increment ++ counter() 取值 配合before和after來做 還有更多的玩法,參見 CSS The Defiiniitiive Guide 4th ,這里有翻譯gdut-yy/CSS-The-Definitive-Guide-4th-zhChrome插件或擴展開發(fā) 這個 我也沒實際搞過,原來看了看書 可參考的資料 官方文檔 sxei/chrome-plugin-demo 或者搜索Chrome插件 全攻略 《Chrome擴展及應用開發(fā)》,這個就是我原來看的那本老書還是有些問題沒解決 上面的操作方式必須要h1到h6依次排開,不然會很好看 如果標題本身就編號了的,就有點糟糕了 這倆問題在我github的博客里面都能看到,解決辦法可以是運行下``順便探索下CSS其他可變的內容 CSS變量或者說自定義屬性 這個IE不兼容,其他瀏覽器高版本兼容:root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) } attr() 這個caniuse也有些說不清楚,主體兼容也是從IE8開始的,需要自己總結 強大的地方是可以讀取屬性值,賦給另外的屬性,也就是可以來個屬性聯(lián)動看起來純CSS的解決方案就到此告一段落了 如果能有腳本參與,就自由了 attr() 配合偽類來做展示,是一個JS和CSS通信的一個比較好的方式


          主站蜘蛛池模板: 亚洲熟妇无码一区二区三区导航| 国产在线一区二区在线视频| 国产福利微拍精品一区二区| 99久久精品国产一区二区成人| 亚洲第一区香蕉_国产a| 国产在线精品一区二区三区不卡| 国产精品一区二区久久精品无码| а天堂中文最新一区二区三区| 中文字幕日本一区| 国精产品一区一区三区 | 亲子乱av一区二区三区| 亚洲人成人一区二区三区| 亚洲一区中文字幕| 国产精品久久久久一区二区| 国产激情无码一区二区三区| 国产精品毛片一区二区三区| av无码免费一区二区三区| 国产91精品一区| 亚洲日韩精品一区二区三区无码| 精品一区二区三区在线观看视频 | 久久久久人妻一区二区三区| 天美传媒一区二区三区| 日韩精品一区二区午夜成人版 | 亚洲AV成人一区二区三区在线看| 日本一区二区三区日本免费| 国产午夜精品一区二区三区嫩草| 国产91大片精品一区在线观看 | 中文字幕精品无码一区二区三区| 精品无码一区二区三区电影| 一区二区三区在线观看视频| 无码毛片视频一区二区本码 | 精品成人一区二区三区四区| 精品一区二区三区东京热| 波多野结衣一区在线观看| 无码av免费一区二区三区| 三级韩国一区久久二区综合| 国产一区二区久久久| 亚洲综合无码AV一区二区 | 美女福利视频一区二区| 亚洲一区电影在线观看| 91福利国产在线观看一区二区|