av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

改善CSS的10種優(yōu)秀做法

 CSS可能看起來是一門相當(dāng)簡單的語言，在這門語言上很難出錯。你只需添加你的規(guī)則來設(shè)計你的網(wǎng)站就完成了，對于只需要幾個CSS文件的小型站點，可能是這樣的。但在大型應(yīng)用程序中，樣式可能會迅速失控。你如何讓他們處于可控狀態(tài)?

成都創(chuàng)新互聯(lián)公司長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為高陵企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、網(wǎng)站制作，高陵網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

事實是，就像其他任何語言一樣，CSS可能會影響或破壞你的設(shè)計。這是CSS的10條技巧——優(yōu)秀實踐，可以幫助你從樣式中獲得很大的收益。

1.你真的需要一個框架嗎?

首先，確定你是否真的需要使用CSS框架?，F(xiàn)在，有許多輕量級且健壯的替代框架。通常，你不會使用框架中的每個選擇器，因此你的軟件包將包含無效代碼。

如果你只在按鈕上使用樣式，那就把它們外包到自己的CSS文件中去，其他的就不用管了。另外，你可以使用DevTools中的代碼覆蓋率來識別未使用的CSS規(guī)則。

要打開它，請在“工具”面板中搜索Coverage，您可以通過單擊 Ctrl + Shift + P 打開“工具”面板。

打開后，單擊重新加載圖標(biāo)開始錄制。紅色顯示的所有內(nèi)容均未使用。

你可以看到，在上面的例子中，它說98%的CSS沒有被應(yīng)用。注意，實際上并不是這樣的——有些CSS樣式是在用戶與網(wǎng)站交互后才應(yīng)用的。移動設(shè)備的樣式也被標(biāo)記為未使用的字節(jié)。因此，在刪除所有內(nèi)容之前，請確認(rèn)是否確實沒有在任何地方使用過。

2.首選使用CSS方法論

考慮為你的項目使用CSS方法論。CSS方法論是用來在你的CSS文件中創(chuàng)建一致性，它們有助于縮放和維護(hù)你的項目。以下是我可以推薦的一些流行的CSS方法論。

/ BEM /

BEM(塊，元素，修飾符)是比較流行的CSS方法論之一。它是命名約定的集合，可用于輕松制作可重復(fù)使用的組件。命名約定遵循以下模式：

 
 
 
 
      
  
  
  
  1. .block { ... } 
    2.   
  
  
  
  2. .block__element { ... } 
    3.   
  
  
  
  3. .block--modifier { ... } 
    4.
  • block——塊，代表一個組件。它們是獨立的實體，對自己有意義。
  • block__element——這些是 .block 的一部分。它們沒有獨立的含義，必須綁定到一個塊上。
  • block--modifier——這些用作塊或元素上的標(biāo)志。我們可以使用它們來更改元素的外觀，行為或狀態(tài)。例如，要使用隱藏標(biāo)志，我們可以說 .block--hidden。

/ ITCSS /

Inverted Triangle CSS 的縮寫，意思是“倒三角CSS”，通過將不同的圖層引入不同的特性來幫助您更好地組織文件。越深入，越具體。

/ OOCSS /

Object-oriented CSS，或者OOCSS，有兩個主要原則。

1.分離結(jié)構(gòu)和表皮

這意味著你要與結(jié)構(gòu)代碼分開定義視覺效果。什么意思?

 
 
 
 
      
  
  
  
  1. /* 而不是 */ 
    2.   
  
  
  
  2. .box { 
    3.   
  
  
  
  3.     width: 250px; 
    4.   
  
  
  
  4.     height: 250px; 
    5.   
  
  
  
  5.     padding: 10px; 
    6.   
  
  
  
  6.     border: 1px solid #CCC; 
    7.   
  
  
  
  7.     box-shadow: 1px 2px 5px #CCC; 
    8.   
  
  
  
  8.     border-radius: 5px; 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. /* 這樣 */ 
    12.   
  
  
  
  12. .box { 
    13.   
  
  
  
  13.     width: 250px; 
    14.   
  
  
  
  14.     height: 250px; 
    15.   
  
  
  
  15.     padding: 10px; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. .elevated { 
    19.   
  
  
  
  19.     border: 1px solid #CCC; 
    20.   
  
  
  
  20.     box-shadow: 1px 2px 5px #CCC; 
    21.   
  
  
  
  21.     border-radius: 5px; 
    22.   
  
  
  
  22. } 
    23.

2.分隔容器和內(nèi)容

這意味著你不希望任何元素依賴于它的位置。相同的元素?zé)o論在頁面上的什么位置，都應(yīng)看起來相同。

 
 
 
 
      
  
  
  
  1. /* 而不是 */ 
    2.   
  
  
  
  2. .main span.breadcumb { ... } 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. /* 這樣 */ 
    5.   
  
  
  
  5. .breadcrumb { ... } 
    6.

3.設(shè)置預(yù)處理器

設(shè)置預(yù)處理器可以使你受益匪淺。預(yù)處理器是一種工具，可讓你使用CSS中不存在的高級功能，這些可能是循環(huán)變量甚至函數(shù)之類的東西。

有很多預(yù)處理器，可能最著名的三個是Sass，Less和Stylus。我建議使用Sass，因為它的社區(qū)非常繁榮，并且可以在網(wǎng)絡(luò)上找到大量的文檔。

那么，預(yù)處理器如何為你提供幫助?

/ 更好地組織你的樣式 /

他們具有將你的文件分解為較小的可重用文件的能力，這些文件可以相互導(dǎo)入，或者以后單獨導(dǎo)入到你的應(yīng)用程序中。

 
 
 
 
      
  
  
  
  1. // 將不同的模塊導(dǎo)入到一個SCSS文件中 
    2.   
  
  
  
  2. @import 'settings'; 
    3.   
  
  
  
  3. @import 'tools'; 
    4.   
  
  
  
  4. @import 'generic'; 
    5.   
  
  
  
  5. @import 'elements'; 
    6.   
  
  
  
  6. @import 'objects'; 
    7.   
  
  
  
  7. @import 'components'; 
    8.   
  
  
  
  8. @import 'trumps'; 
    9.

/ 嵌套你的選擇器 /

增強(qiáng)可讀性的另一種好方法是嵌套選擇器，這是CSS缺少的一個簡單而強(qiáng)大的功能。

 
 
 
 
      
  
  
  
  1. .wrapper { 
    2.   
  
  
  
  2.   .sidebar { 
    3.   
  
  
  
  3.     &.collapsed { 
    4.   
  
  
  
  4.       display: none; 
    5.   
  
  
  
  5.     } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     .list { 
    8.   
  
  
  
  8.       .list-item { 
    9.   
  
  
  
  9.         ... 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.         &.list-item--active { 
    12.   
  
  
  
  12.           ... 
    13.   
  
  
  
  13.         } 
    14.   
  
  
  
  14.       } 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16.   } 
    17.   
  
  
  
  17. } 
    18.

層次化的結(jié)構(gòu)使得不同元素之間的聯(lián)系更加直觀。

/ 自動為你的規(guī)則添加前綴 /

CSS中有一些非標(biāo)準(zhǔn)或?qū)嶒炐怨δ艿那熬Y，不同的瀏覽器為其使用不同的前綴，例如：

  • webkit-：適用于基于WebKit的瀏覽器，例如Chrome，Safari或Opera的較新版本。
  • moz-：Firefox
  • o-：更舊的Opera版本
  • ms-：IE 和 Edge

為了支持所有主流瀏覽器，我們必須多次定義某些屬性。

 
 
 
 
      
  
  
  
  1. .gradient { 
    2.   
  
  
  
  2.   background: rgb(30,87,153); 
    3.   
  
  
  
  3.   background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    4.   
  
  
  
  4.   background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    5.   
  
  
  
  5.   background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    6.   
  
  
  
  6.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); 
    7.   
  
  
  
  7. } 
    8.

預(yù)處理程序可以幫助我們使用混合函數(shù)來解決這個問題，混合函數(shù)可以代替硬編碼的值使用。

 
 
 
 
      
  
  
  
  1. @mixin gradient() { 
    2.   
  
  
  
  2.   background: rgb(30,87,153); 
    3.   
  
  
  
  3.   background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    4.   
  
  
  
  4.   background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    5.   
  
  
  
  5.   background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); 
    6.   
  
  
  
  6.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0); 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. .gradient { 
    10.   
  
  
  
  10.   @include gradient(); 
    11.   
  
  
  
  11. } 
    12.

不必一遍又一遍地寫出相同的內(nèi)容，而只需在需要時包含 mixin。

/ 使用后處理器 /

更好的選擇是后處理器。一旦CSS由預(yù)處理器生成，則后處理器可以運(yùn)行其他優(yōu)化步驟。比較受歡迎的后處理器之一是PostCSS。

可以使用PostCSS自動為CSS規(guī)則添加前綴，因此不必?fù)?dān)心會遺漏主要的瀏覽器。

另一個很棒的后處理器是autoprefixer。使用autoprefixer，當(dāng)你想要支持最新的四個版本時，無需在CSS文件中寫入任何供應(yīng)商前綴就可以完成所有工作!

 
 
 
 
      
  
  
  
  1. const autoprefixer = require('autoprefixer')({ 
    2.   
  
  
  
  2.   browsers: [ 
    3.   
  
  
  
  3.     'last 4 versions', 
    4.   
  
  
  
  4.     'not ie < 9' 
    5.   
  
  
  
  5.   ] 
    6.   
  
  
  
  6. }); 
    7.

/ 使用配置進(jìn)行一致的設(shè)計 /

除了 mixins 之外，你還可以選擇使用變量。與燒結(jié)機(jī)配合使用，你可以執(zhí)行設(shè)計規(guī)則。與linter配合使用，你可以執(zhí)行設(shè)計規(guī)則。

 
 
 
 
      
  
  
  
  1. // Font definitions 
    2.   
  
  
  
  2. $font-12: 12px; 
    3.   
  
  
  
  3. $font-21: 21px; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. // Color definitions 
    6.   
  
  
  
  6. $color-white: #FAFAFA; 
    7.   
  
  
  
  7. $color-black: #212121; 
    8.

4.使用標(biāo)記代替CSS

現(xiàn)在，讓我們繼續(xù)討論實際的CSS。這經(jīng)常被忽略，通常，你可以通過簡單地使用正確的HTML元素來減小CSS包的大小。假設(shè)你的標(biāo)題包含以下規(guī)則：

 
 
 
 
      
  
  
  
  1. span.heading { 
    2.   
  
  
  
  2.   display: block; 
    3.   
  
  
  
  3.   font-size: 1.2em; 
    4.   
  
  
  
  4.   margin-top: 1em; 
    5.   
  
  
  
  5.   margin-bottom: 1em;  
    6.   
  
  
  
  6. } 
    7.

你正在使用一個 span 元素作為標(biāo)題，你可以覆蓋默認(rèn)的顯示、間距或字體樣式?？梢酝ㄟ^使用 h1，h2 或 h3 來避免這種情況。默認(rèn)情況下，它們具有你要與其他元素一起實現(xiàn)的樣式，你可以立即擺脫四個不必要的規(guī)則，而且也更符合語義。

5.使用短屬性

為了進(jìn)一步減少規(guī)則數(shù)量，請始終嘗試使用簡寫屬性。對于上面的示例，我們可以說：

 
 
 
 
      
  
  
  
  1. .heading { 
    2.   
  
  
  
  2.   margin: 1em 0; 
    3.   
  
  
  
  3. } 
    4.

對于其他屬性，例如 padding，border 或 background 也是如此。

6.減少冗余

這與上一點緊密相關(guān)。有時很難發(fā)現(xiàn)冗余，尤其是當(dāng)重復(fù)規(guī)則在兩個選擇器中沒有遵循相同的順序時。但如果你的class只在一兩個規(guī)則上有差異，最好把這些規(guī)則外包出去，作為一個額外的class使用。而不是這樣的。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. ?
 
    •  

    嘗試使用類似的方法：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. ?
     
    •  

    7.避免使用復(fù)雜的選擇器

    使用復(fù)雜的選擇器有兩個主要問題。首先，提高的權(quán)重不僅會使以后更難重寫現(xiàn)有規(guī)則，而且會增加瀏覽器匹配選擇器的時間。

    / 匹配選擇器 /

    當(dāng)瀏覽器試圖解釋選擇器并確定匹配的元素時，它們從右到左。就性能而言，這比其他方法要快。讓我們以下面的選擇器為例。

     
 
 
 
        
  
  
  
    1. .deeply .nested .selector span { 
      2.   
  
  
  
    2.   ... 
      3.   
  
  
  
    3. } 
      4.

    你的瀏覽器將首先從 span 開始。它將會匹配所有的 span標(biāo)簽，然后轉(zhuǎn)到下一個。它將過濾掉 .selector內(nèi)的 span，以此類推。

    / 理解選擇器 /

    機(jī)器不僅解析困難，而且人類也難以理解。以以下為例：

     
 
 
 
        
  
  
  
    1. [type="checkbox"]:checked + [class$="-confirmation"]::after { 
      2.   
  
  
  
    2.   ... 
      3.   
  
  
  
    3. } 
      4.

    你認(rèn)為上面的規(guī)則什么時候可以應(yīng)用?這個可以通過制作一個自定義類，用JavaScript進(jìn)行切換來簡化。

    8.不要刪除輪廓(Outline)

    這是開發(fā)人員在編寫CSS時最常犯的錯誤之一。雖然你可能認(rèn)為刪除輪廓創(chuàng)建的高亮顯示并沒有什么不妥，但事實上，你正在使網(wǎng)站無法訪問。通常的做法是在你的CSS中添加這個規(guī)則作為重設(shè)。

     
 
 
 
        
  
  
  
    1. :focus { 
      2.   
  
  
  
    2.   outline: none; 
      3.   
  
  
  
    3. } 
      4.

    不過，這樣一來，只有鍵盤導(dǎo)航的用戶就不知道他們在你的網(wǎng)站上關(guān)注什么了。

    如果默認(rèn)樣式對您的品牌不利，請創(chuàng)建自定義輪廓，只要確保在聚焦元素方面有某種指示即可。

    9.移動優(yōu)先

    當(dāng)您必須處理媒體查詢時，請始終使用移動優(yōu)先。以移動設(shè)備為先的方法意味著您首先要開始為小屏幕設(shè)備編寫CSS并從那里開始構(gòu)建。這也稱為漸進(jìn)增強(qiáng)。

    這將確保你大部分時間里添加額外的規(guī)則來滿足大屏幕設(shè)備的需求，而不是重寫現(xiàn)有的CSS規(guī)則。這可以減少你最終的規(guī)則數(shù)量。

    如何判斷你是否使用了移動優(yōu)先?如果你的媒體查詢使用的是 min-width，那么你就走對了。

     
 
 
 
        
  
  
  
    1. /* 移動優(yōu)先的媒體查詢，高于600像素的所有內(nèi)容都會獲得以下樣式 */ 
      2.   
  
  
  
    2. @media (min-width: 600px) { 
      3.   
  
  
  
    3.   /* your CSS rules */ 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. /* 非移動優(yōu)先的媒體查詢，600px以下的都會得到以下樣式。 */ 
      7.   
  
  
  
    7. @media (max-width: 600px) { 
      8.   
  
  
  
    8.   /* your CSS rules */ 
      9.   
  
  
  
    9. } 
      10.

    10.壓縮

    最后，壓縮捆綁包以減小其尺寸。壓縮刪除注釋和空白，你的捆綁軟件需要較少的帶寬來獲取數(shù)據(jù)。

    如果你還沒有，在服務(wù)器端也啟用壓縮功能。

    進(jìn)一步減少CSS和標(biāo)記大小的另一種好方法是混淆類名。

    為此，可以根據(jù)項目設(shè)置選擇幾個選項：


    網(wǎng)站題目：改善CSS的10種優(yōu)秀做法
    本文路徑：http://uogjgqi.cn/article/dhipids.html
    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊