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及以下，大部分瀏覽器都支持它。

關于“Css常用的排序方式權重分配是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。