成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

編碼規(guī)范 —— 編寫靈活、穩(wěn)定、高質(zhì)量的 HTML 和 CSS 代碼的規(guī)范

Karuru / 2026人閱讀

摘要：用兩個空格代替制表符這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。編輯器配置將你的編輯器按照下面的配置進行設(shè)置，以免常見的代碼不一致和差異用兩個空格代替制表符保存文件時刪除尾部的空白符設(shè)置文件編碼為在文件結(jié)尾添加一個空白行。

黃金定律

永遠遵循同一套編碼規(guī)范 - 可以是這里列出的，也可以是你自己總結(jié)的。如果發(fā)現(xiàn)規(guī)范中有任何錯誤，敬請指正。

HTML 語法

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

嵌套元素應(yīng)當(dāng)縮進一次（即兩個空格）。

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

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

不要省略可選的結(jié)束標(biāo)簽 (closing tag)，如 或 。

HTML5 doctype

為每個HTML5頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)。

語言屬性

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

例如：

IE兼容模式

IE 支持通過特定的 meta 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強烈的特殊要求，否則最好是設(shè)置為 edge mode，從而通知IE采用其所支持的最新模式。

字符編碼

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

引入 CSS 和 JavaScript 文件

引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認(rèn)值。

實用為王

盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實用性為代價，任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。

屬性順序

HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
布爾（boolean）型屬性

簡單來說就是不用賦值。

減少標(biāo)簽的數(shù)量

編寫 HTML 代碼時，盡量避免多余的父元素，很多時候，這需要迭代和重構(gòu)來實現(xiàn)。

JavaScript 生成的標(biāo)簽

通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

CSS

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

為選擇器分組時，將多帶帶的選擇器多帶帶放在一行。

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

聲明塊的右花括號應(yīng)當(dāng)多帶帶成行。

為了獲得更準(zhǔn)確的錯誤報告，每條聲明都應(yīng)該獨占一行。

所有的聲明語句都應(yīng)當(dāng)以分號結(jié)尾，最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。

對于以逗號分隔的屬性，每個逗號后面都應(yīng)該插入一個空格（如 box-shadow）。

不要在 rgb(), rgba(), hsl(), hsla(), 或 rect() 值的內(nèi)部的逗號后面插入空格。

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

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

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

為選擇其中的屬性添加雙引號，如 input[type="text"]。

避免為0指定單位。

聲明順序 
position
box model
typographic (一些輪廓樣式)
visual (內(nèi)部樣式)

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

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

帶前綴的屬性

當(dāng)使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向?qū)R，這樣便于多行編輯。

單行規(guī)則聲明

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

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

簡寫形式的屬性聲明

在需要顯示地設(shè)置所有值得情況下，應(yīng)當(dāng)盡量限制使用簡寫形式的屬性聲明， 常見的濫用簡寫屬性聲明的情況如下：

padding; margin; font; background; border; border-radius;

大部分情況下，我們不需要為簡寫的屬性聲明指定所有值。過度使用簡寫形式的屬性聲明會導(dǎo)致代碼混亂，并且會對屬性值帶來不必要的覆蓋而引起意外的副作用。MDN 上一篇非常好的關(guān)于 shortand properties 的文章，對于不太熟悉簡寫屬性聲明及其行為的用戶很有用。

less 和 sass 中的嵌套

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

注釋

代碼是由人編寫并維護的。請確保你的代碼能夠自描述、注釋良好并且易于他人理解。好的代碼注釋能夠傳達上下文關(guān)系和代碼目的。不要簡單地重申組件或 class 名稱；對于較長的注釋，務(wù)必書寫完整的句子；對于一般性注釋，可以書寫簡介的短語。

class 命名

class 名稱中只能出現(xiàn)小寫字符和破折號（不是下劃線也不是駝峰命名法）。破折號應(yīng)當(dāng)用于相關(guān) class 命名（如 .btn 和 .btn-danger ），避免過度任意的簡寫。.btn 代表 button ，但是 .s 不能表達任何意思。

class 名稱應(yīng)當(dāng)盡可能短，并且意義明確。

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

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

使用 .js class 來標(biāo)識行為（與樣式相對），并且不要將這些class包含到css文件中。

選擇器

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

對于經(jīng)常出現(xiàn)的組件，避免使用屬性選擇器，瀏覽器的性能會受到這些因素的影響。

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

只有在必要的時候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）

代碼組織

已組件為單位組織代碼

指定一致的注釋規(guī)范

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

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

編輯器配置

將你的編輯器按照下面的配置進行設(shè)置，以免常見的代碼不一致和差異：

用兩個空格代替制表符

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

設(shè)置文件編碼為 UTF-8

在文件結(jié)尾添加一個空白行。

原文鏈接
工作也有些時日了，自己也整理了一份還不完善的規(guī)范文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49530.html

相關(guān)文章

  • 編寫靈活、穩(wěn)定、高質(zhì)量的HTML代碼的規(guī)范

    摘要：六字符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。十一減少標(biāo)簽的數(shù)量編寫代碼時，盡量避免多余的父元素。未完待續(xù)編寫靈活穩(wěn)定高質(zhì)量的代碼的規(guī)范閱讀更多 一、唯一定律 無論有多少人共同參與同一項目，一定要確保每一行代碼都像是唯一個人編寫的。 二、HTML 2.1 語法 （1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法...

    anquan 評論0 收藏0

  • 編寫靈活、穩(wěn)定、高質(zhì)量的CSS代碼的規(guī)范

    摘要：過度使用簡寫形式的屬性聲明會導(dǎo)致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。只有在必要的時候才將限制在最近的父元素內(nèi)也就是后代選擇器例如，不使用帶前綴的時前綴類似于命名空間。制定一致的注釋規(guī)范。 一、語法 1.1 注意 （1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。 （2）為選擇器分組時，將單獨的選擇器單獨放在一行。 （3...

    psychola 評論0 收藏0

  • 編碼規(guī)范-html.md

    摘要：寫在前面對于不同的編程語言來說，具體的編碼規(guī)范各不相同，但是其宗旨都是一致的，就是保證代碼在高質(zhì)量完成需求的同時具備良好的可讀性可維護性。減少標(biāo)簽的數(shù)量編寫代碼時，盡量避免多余的父元素。 寫在前面 對于不同的編程語言來說，具體的編碼規(guī)范各不相同，但是其宗旨都是一致的，就是保證代碼在高質(zhì)量完成需求的同時具備良好的可讀性、可維護性。 本文大部分內(nèi)容來自網(wǎng)上，僅供個人參考學(xué)習(xí)！ 網(wǎng)絡(luò)上的知...

    tomlingtm 評論0 收藏0

  • 前端練級攻略(第一部分)

    摘要：第一部分介紹了如何使用和開發(fā)接口。由于系統(tǒng)變得越來越復(fù)雜，人們提出了稱為預(yù)處理器和后處理器的工具來管理復(fù)雜性。當(dāng)您第一次得知有預(yù)處理器和后處理器時，你很有可能在任何地方已經(jīng)使用它們。我之前建議的文章，，也涵蓋了預(yù)處理器相關(guān)的知識。 我記得我剛開始學(xué)習(xí)前端開發(fā)的時候。我看到了很多文章及資料，被學(xué)習(xí)的資料壓得喘不過氣來，甚至不知道從哪里開始。 本指南列出前端學(xué)習(xí)路線，并提供了平時收藏的一些...

    qpal 評論0 收藏0

  • ESLint 在中大型團隊的應(yīng)用實踐

    摘要：自動化接入和升級方案通過命令行工具提供一鍵接入升級能力，同時集成到團隊腳手架中，大大降低了工程接入和維護的成本。原始代碼經(jīng)過解析器的解析，在管道中逐一經(jīng)過所有規(guī)則的檢查，最終檢測出所有不符合規(guī)范的代碼，并輸出為報告。 引言 代碼規(guī)范是軟件開發(fā)領(lǐng)域經(jīng)久不衰的話題，幾乎所有工程師在開發(fā)過程中都會遇到，并或多或少會思考過這一問題。隨著前端應(yīng)用的大型化和復(fù)雜化，越來越多的前端工程師和團隊開始重...

    alogy 評論0 收藏0

發(fā)表評論

0條評論

Karuru

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<