Css常用的排序方式權重分配
Css常用的排序方式權重分配
排序方式：
1、按型別如，顯示和浮動、定位、尺寸、字型等
2、按字母按字母順序排列，優點是規則簡單
3、按定義長度按照樣式定義的字元長度排列
各有優劣，實際應用中，推薦使用第一種。但是如果單靠前端工程師在編寫過程中這麼做的話也是很難的，可以在寫的過程中按照效率最高的方式寫，提交程式碼時使用工具為css排序。既提高效率，又方便後續程式碼閱讀和維護。有一款免費工具是CSScomb。
合理利用css的權重，提高程式碼重用性
何為權重，即css眾多型別選擇符的優先順序，優先順序高的樣式會覆蓋優先順序低的樣式。權重的更具體規則，大家可以查閱資料，這裡不贅述。
教你如何依照選擇符的權重定義合適的選擇符：
（1）儘量不使用ID選擇器
一個頁面中不允許定義兩個同樣的ID，而且ID選擇器權重很高，如果要覆蓋使用了ID選擇器的元素樣式，就必須在其元素上新增新的選擇符，或使用！important，這樣的結果會使無法重用的樣式程式碼變得更多。最佳實踐是儘可能使用較低權重的選擇符作為基礎樣式。
（2）減少子選擇器的層級
也是降低子選擇符整體權重的過程，同時，層級越少，對html結構的依賴就越低。引起Css層級過多的另外一個原因是sass、less等工具的濫用，這也是我本人在使用之初就有意識到的問題，因為你可以使用巢狀和引用等方式來定義樣式了，這樣以來給自己省了很多功夫，但檔案最終還是要編譯出來，我們不用反覆的敲那麼多程式碼了，但生成的程式碼依然還是會很多，所以，方便了自己的同時依然要特別注意減少選擇器層級。
（3）使用組合的css類選擇器
使用這種方式，開發者可以不用考慮css樣式覆蓋的問題，避開了計算選擇符權重的過程，同時提高了程式碼的重用性，組合的概念是把一個複雜的父類中的可變部分和穩定部分分割開來，穩定部分作為主體類，可變部分分成幾個簡單的類，類與類之間沒有繼承，同樣可以起到減少對html結構的依賴，提高程式碼重用性的作用。
成都暮光時代科技有限公司說說如何相容IE瀏覽器？
IE8及以下版本的IE瀏覽器一直是前端開發人員心中的痛。為了相容它們做額外新增的程式碼成為hack程式碼，往往人們都不想去寫那些程式碼。以下是相容IE瀏覽器的一些實踐方法。
（1）熟悉IE瀏覽器中常見的樣式相容問題
一類是瀏覽器本身的bug，一類是和標準不相容或還不支援標準。
（2）分離樣式相容程式碼
按照瀏覽器的不同版本組織程式碼檔案，然後使用判斷語句，按需載入
em、px還是%？
談及這個話題的原因是，如今頁面功能變得越來越多，用來訪問頁面的裝置越來越多，頁面的佈局就是一個頗具挑戰的事情，而頁面當中的元素的尺寸和字型、圖片的大小等也跟佈局息息相關。鑑於此，前端開發開始重視如何提高頁面佈局，核心思想是將頁面元素的尺寸和字型大小設定為相對值。字型相對單位包括：em、ex、ch、rem。更多內容無需贅述，有更多的資料來講解。下面給出幾個最佳實踐：
（1）儘量設定相對尺寸
所謂設定相對尺寸，並不是說頁面整體的佈局是自適應的，整體的尺寸可以是固定尺寸也可以是自適應的尺寸，這取決於頁面的設計。
（2）只有在可預知元素尺寸的情況下才使用絕對尺寸
比如設計上要求使用絕對寬度，比如整體寬度，側邊欄寬度，頁頭頁尾的高度固定等，在展示圖片、視訊的時候，合適的固定尺寸會讓這些多媒體元素展示獲得最佳的效果。
（3）使用em設定字型大小
使用px設定字型大小的可擴充套件性不好，使用百分比設定字型大小也不符合習慣，最佳方式是使用em設定字型大小，但隨著字型設定的層級增多，這種方式反而增加了維護的成本，對於此，css3引入了rem單位，是相對於根元素的字型大小計算的，就避免了這個問題，目前除了IE8及以下，大部分瀏覽器都支援它。