CSS
代碼組織
以組件為單位組織代碼段；制定一致的注釋規範；組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動；
良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構建它們的方法。不要讓你的團隊其它成員 來猜測一段不通用或不明顯的代碼的目的。
提示：通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。
Class 和 ID
使用語義化、通用的命名方式；使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；避免選擇器嵌套層級過多，儘量少於 3 級；避免選擇器和 Class、ID 疊加使用；
出於性能考量，在沒有必要的情況下避免元素選擇器疊加 Class、ID 使用。
元素選擇器和 ID、Class 混合使用也違反關注分離原則。如果HTML標籤修改了，就要再去修改 CSS 代碼，不利於後期維護。
聲明順序
相關屬性應為一組，推薦的樣式編寫順序
PositioningBox modelTypographicVisual
由於定位（positioning）可以從正常的文檔流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。
其他屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，因此排在後面。
引號使用
url() 、屬性選擇符、屬性值使用雙引號。
媒體查詢（Media query）的位置
將媒體查詢放在儘可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。
不要使用 @import
與 <link> 相比，@import 要慢很多，不光增加額外的請求數，還會導致不可預料的問題。
替代辦法：
使用多個 元素；通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件；其他 CSS 文件合併工具；
連結的樣式順序：
a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
選擇字體
在 Web 上應用字體，是一門技術，同時也是一門藝術. 由於計算機歷史發展的原因，西文有大量優秀的字體可供選擇，可對於中文來說就是一項挑戰. 主流作業系統提供的本地中文字體極少，另一方面中文字體組成的特殊性，其體積過於龐大，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.
以下列出各種平臺下合適的中西文字體：
桌面端 Mac, Windows, Linux 上適合網頁顯示的優秀中文字體
移動端 iOS, Android 上適合網頁顯示的優秀中文字體
主流作業系統上適合網頁顯示的優秀西文字體
拋開宋/明體長時間作為系統默認字體，所產生的審美疲勞，宋/明體相比黑體是更合適作為內文字體. 大多的宋/明體針對內文設計，橫細直粗，造型方正，筆畫在小字號的情況下，不會糊在一起，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目，更適合作為標題使用.
但大部分人已經習慣在網頁上閱讀黑體，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內文默認提供黑體，可選擇性的切換宋/明體.
垂直的旋律
音階
Robert Bringhurst 在《The Elements of Typographic Style》談到字號大小之間的比例，形似於音樂中的音階. 作曲時以某個特定的音階為基礎，才會形成特定的風格. 字號的排版同樣如此，有規律的字號變化，才會形成特定的排版風格.
將內文以 16px 作為字號
標題 h1, h2, h3, h4, h5, h6 以 16px 作為字號基礎，按同比例的遞減
節拍
此外，Robert Bringhurst 還談到版式中的空間就像音樂中的時間(Space in typography is like time in music)，言下之意，把握間距（行高）就如把握節拍. 節拍是對時間的分割，倘若搶拍便失去節奏. 文字的間距（行高）亦是對空間的分割，不一致間距（行高）比例，便會失去「垂直的旋律」.
將內文以 1.7em 作為行高
標題 h1, h2, h3, h4, h5, h6 以 1.5em 作為行高.
段首縮進 VS 段落間距
段落分隔對於中文排版而言也是特別重要，主要以「段首縮進」和「段落間距」兩種方式表現，它們的唯一目的就是將段落分隔.
「段首縮進」主要用於印刷書籍，節省縱向空間，保持文本連貫，但一般在網頁上的閱讀速度較快，會使文字過於密集產生壓力. 相反「段落間距」主要用於網頁，充分利用網頁無限的縱向空間，保障文本塊的整潔，同時給予長篇閱讀休息的間隙. 所以一般網頁排版，會考慮選擇「段落間距」，可以設置以下屬性實現「段落間距」.
對齊
漢字的方塊性質構成了漢字獨有的藝術美感，使其具有工整的特點，從而顯現出中文排版的重要原則：所有元素都是正方體. 但從二十世紀開始使用標點後，以及中西文混排的情況越來越多，為了保證「禁則處理」和「齊頭尾」實現，可能需要在不同條件下進行適當的斷詞處理.
「禁則」是來自日語的排版術語，主要指的就是禁止一些標點等字符出現在行首或行尾的規則，大致相當於漢語常說的「避頭尾」.
可以設置以下屬性實現「齊頭尾」，其中inter-ideographic意思是「通過調整單詞和字符之間的留白來實現兩端對齊」.
但這樣的「齊頭尾」並不是完美的，主要由於技術遺留原因，在 Windows 和 Linux 上的 webkit 瀏覽器並沒有實現 inter-ideographic 導致中西文混排的時候，容易出現過度拉伸字間距的情況。
為此有一種不優雅的解決方案，在極易出現字間距拉伸的小尺寸屏幕（手機）上使用「斷詞處理」，避免字間距拉伸，可是這樣也帶來「無視避頭尾規則」和「西文單詞斷詞」的壞毛病. 這是用一種不優雅解決另一種不優雅，按需抉擇吧.
可以設置以下屬性進行「斷詞處理」