資訊專欄INFORMATION COLUMN
摘要：以上，從分層組織，模塊化，使用時注意低權重原則，以及巧用雪碧圖闡述了提高代碼質量的四個方面。編寫高質量代碼前端開發修煉之道曹劉陽
分層組織CSS
我們應用CSS的能力應該分成兩部分：一部分是CSS的API，重點是如何用CSS控制頁面內元素的樣式；另一部分是CSS框架，重點是如何對CSS進行組織。
推薦一種組織CSS的方法：
base.css + common.css + page.css
base層：reset功能+通用類
common層：組件級別的CSS類
page層：頁面級別CSS樣式
模塊化可以讓代碼高度重用，顯著提高開發效率。
我們拿到設計稿的時候，首先可以從視覺上進行劃分，樣式和功能相對獨立且穩定的一部分就可以視為模塊。
這里介紹兩個拆分模塊技巧：
模塊與模塊之間盡量不要包含相同的部分，如果有相同的部分，應將他們提取出來，拆分成一個獨立的模塊。
模塊應在保證盡可能少的原則下，做到盡量簡單，以提高重用性。
CSS命名空間這里推薦一種在class前加入前綴的方式構建類似于命名空間的概念. 舉個例子：
還需注意一點：css class的命名推薦使用英語，不要使用漢語拼音。
掛多個class還是新建class? -- 多用組合，少用繼承舉個例子，有兩個列表，列表條目1字體14px紅色,列表條目2字體16px綠色：
方案一:
然后分別為number-list1與number-list2設置樣式
方案二 :
然后，將樣式分解為顆粒度小的class內，利用類組合達到效果。這就是多用組合少用繼承的思想。
如何處理上下margin模塊化寫類的樣式時，常常需要寫margin樣式。這個時候不建議給某個div同時設置margin-top, margin-bottom值。因為可能會帶來上下margin重合的問題。
如果不確定模塊的上下margin特別穩定，最好不要將它寫進模塊的類里，而是使用類的組合，多帶帶為上下margin掛上用于確定邊距的之類。
模塊做好不要混用margin-top和margin-bottom，統一使用margin-top或margin-bottom。
低權重原則復習一下CSS權重問題：
CSS的選擇符是有權重的：id選擇器的權重是100、class選擇器的權重是10、標簽選擇器的權重是1；
當不同選擇符的樣式設置有沖突時，會采用權重高的選擇符設置的樣式。
如果CSS選擇符權重相同，那么樣式會遵循就近原則，哪個選擇符最后定義，就采用哪個。（就近原則指的是定義樣式的先后，不是掛class名的先后）
我們在設置樣式時，適當使用子選擇器，可以增加CSS的權重。例如：span .font{} 的樣式會覆蓋.font{}的樣式。但CSS選擇符的權重越高，樣式越不容易覆蓋。為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符需保證權重盡可能低。
CSS sprite 什么是CSS sprite?將網站的多張背景圖合并到一張大圖上，這便是CSS sprite.
CSS sprite 優點？CSS sprite出發點已經不僅是“解決滑過狀態時背景圖片出現空白”的問題了，通過將多張圖片合并成一張大圖，會大大減少網頁的HTTP請求數，減小服務器壓力。這對于流量比較大的網站很有價值。
哪些場合不適合使用CSS sprite?CSS sprite只能合并用于背景的圖片，對于 設置的圖片，是不能合并到css sprite大圖中的。如果合并這些圖片會影響頁面的可讀性。
對于橫向和縱向都平鋪的圖片也不能使用CSS sprite.
這里擴展一個問題: 我們在寫頁面時，對于圖片，是使用img標簽好呢？還是使用background-img屬性好呢？
以下對二者進行一個對比總結：
本質區別：img標簽是html標簽，background-img是CSS的一個樣式；
加載方面：img標簽是html結構的一部分，img 會在加載結構時進行加載，而background-img會在結構和內容加載完成后才開始加載；
SEO方面：搜索引擎會關注img標簽的alt屬性；這時如果使用了background-img則頁面可讀性比較差；另外，有些網站需要在禁用css情況下運行，此時比較重要的圖片例如logo，就需要使用img標簽而不是background-img.
在多數場景下，二者都能完成工作。比如hover切換圖片，可以改變img的src屬性，也可以改變background-img的url; 比如改變圖片的位置，可以改變img元素的位置，也可以改變background-img的postion;
CSS sprite有哪些缺點？CSS sprite將多張圖片合并為一張圖片，通過控制background-position進行定位，這對于圖片的位置精確程度要求非常高。定位完成后，大圖中的每個小圖的坐標值不可輕易改動，這在一定程度上降低了可維護性。
因此，如何排列圖片能夠盡量緊湊，同時保證不會影響擴展性，是CSS sprite技術最困難也是最具挑戰性的地方。
以上，從分層組織CSS，模塊化CSS，使用時注意低權重原則，以及巧用CSS雪碧圖闡述了提高CSS代碼質量的四個方面。更多方法還需在實踐中積累。
References[1].編寫高質量代碼-Web前端開發修煉之道 -- 曹劉陽.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111460.html
摘要：六字符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。十一減少標簽的數量編寫代碼時，盡量避免多余的父元素。未完待續編寫靈活穩定高質量的代碼的規范閱讀更多 一、唯一定律 無論有多少人共同參與同一項目，一定要確保每一行代碼都像是唯一個人編寫的。 二、HTML 2.1 語法 （1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法...
摘要：用兩個空格代替制表符這是唯一能保證在所有環境下獲得一致展現的方法。編輯器配置將你的編輯器按照下面的配置進行設置，以免常見的代碼不一致和差異用兩個空格代替制表符保存文件時刪除尾部的空白符設置文件編碼為在文件結尾添加一個空白行。 黃金定律 永遠遵循同一套編碼規范 - 可以是這里列出的，也可以是你自己總結的。如果發現規范中有任何錯誤，敬請指正。 HTML 語法 用兩個空格代替制表符 (ta...
摘要：過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。只有在必要的時候才將限制在最近的父元素內也就是后代選擇器例如，不使用帶前綴的時前綴類似于命名空間。制定一致的注釋規范。 一、語法 1.1 注意 （1）用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。 （2）為選擇器分組時，將單獨的選擇器單獨放在一行。 （3...
摘要：第一部分介紹了如何使用和開發接口。由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。當您第一次得知有預處理器和后處理器時，你很有可能在任何地方已經使用它們。我之前建議的文章，，也涵蓋了預處理器相關的知識。 我記得我剛開始學習前端開發的時候。我看到了很多文章及資料，被學習的資料壓得喘不過氣來，甚至不知道從哪里開始。 本指南列出前端學習路線，并提供了平時收藏的一些...
摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
閱讀 1075·2021-11-22 14:56
閱讀 1520·2019-08-30 15:55
閱讀 3358·2019-08-30 15:45
閱讀 1655·2019-08-30 13:03
閱讀 2868·2019-08-29 18:47
閱讀 3334·2019-08-29 11:09
閱讀 2640·2019-08-26 18:36
閱讀 2615·2019-08-26 13:55
