1. 首頁
  2. 問答
  3. 如何簡化CSS代碼

如何簡化CSS代碼

2010-08-31 100 views
2

我與現有的一段CSS代碼，看起來像這樣（從代碼大得多體摘錄）工作：如何簡化CSS代碼

.apl_widget_fourLevel { 
margin:0 auto 1em; 
overflow:hidden; 
/* zoom:1 */ /* IE Sheet */ 
} 

/* a panel container */ 
.apl_widget_fourLevel .apl_widget_level { 
    float:left; 
    position:relative; 
    overflow:hidden; 
    text-align:center; 
    width:102px; 
    height:150px; 
    margin:0 1px 0 0; 
} 

/* extra height for widgets with the supplementary data beneath the panels */ 
/* reset width for selected mini panels */ 
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level { 
    height:auto; 
} 

/* extra height for widgets with the supplementary data beneath the panels */ 
/* reset width for selected mini panels */ 
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level { 
    height:auto; 
    width:90px; 
} 

/* reset width for selected mini panels */ 
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected { 
    width:102px; 
} 

    /* the gray label in the panel 
     enforce for mini display */ 
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label, 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label { 
     position:absolute; 
     top:20px; 
     left:0; 
     width:100%; 
     margin:0; 
     color:#555; 
     font-weight:normal; 
     text-transform:uppercase; 
     font-size:100%; 
     line-height:1.0em; 
     z-index:1; 
    } 

    /* offset for mini labels */ 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label { 
     margin-top:20px; 
     font-size:85%; 
    } 

    /* label cascade reset for IE6, sigh */ 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label { 
     margin-top:0; 
     font-size:100%; 
    } 

    /* the value displayed in the panel */ 
    .apl_widget_fourLevel .apl_widget_level .apl_widget_value, 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value { 
     position:absolute; 
     top:45px; 
     left:0; 
     width:100%; 
     margin:0; 
     color:#fff; 
     font-weight:bold; 
     font-size:28px; 
     line-height:1.0em; 
     z-index:1; 
    } 

    /* offset for mini value */ 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value { 
     margin-top:15px; 
     font-size:24px; 
    } 

    .apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value { 
     margin-top:3px; 
     font-size:20px; 
     font-weight:normal; 
     opacity:0; 
     -moz-opacity:0; 
     -webkit-opacity:0; 
     filter: alpha(opacity=0); 
    } 

    /* value cascade reset for IE6, sigh */ 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value { 
     margin-top:0; 
     font-size:28px; 
    } 

    /* range values smaller */ 
    .apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value { 
     margin-top:7px; 
     font-size:15px; 
    } 

    .apl_widget_fourLevel .apl_widget_value a { 
     color:#fff; 
    } 

    /* supplemental value beneath the panel */ 
    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore { 
     position:absolute; 
     bottom:0px; 
     left:0; 
     width:100%; 
     color:#0072ad; 
     font-weight:bold; 
     font-size:28px; 
     z-index:1; 
    } 

    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a { 
     color:#0072ad; 
    } 

    /* low values will be lighter color */ 
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore, 
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a { 
     color:#30a2dd; 
    } 

    /* the image container element */ 
    .apl_widget_fourLevel .apl_widget_level .apl_widget_panel { 
     overflow:hidden; 
     width:100%; 
     height:135px; 
     position:relative; 
    } 

     /* the panel image itself */ 
     .apl_widget_fourLevel .apl_widget_level .apl_widget_panel img { 
      position:absolute; 
      top:0; 
      left:-5px; 
      margin-top:-150px; 
     } 

     /* Individual Level image offsets */ 
     .apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img { 
      left:-5px; 
     } 

     .apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img { 
      left:-105px; 
     } 

     .apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img { 
      left:-205px; 
     } 

     .apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img { 
      left:-305px; 
     } 

     /* mini panel offsets */ 
     .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img { 
      margin-top:-300px; 
      margin-left:-6px; 
     } 

     /* reset image offset via margin for highlighted/selected style */ 
     .apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img { 
      margin:0; 
     }

我的這一重大問題的複雜性：每規則有3-5個選擇器，因此很難確定哪個規則適用。這裏有25條規則用於設置帶文本的四個按鈕的樣式。它不可能那麼辛苦！

一些背景：這個CSS使用CSS精靈從單個位圖中選擇一個顯示四個位圖圖像的小部件，其中之一被選中。未選擇的圖像來自大位圖的一行，而選中狀態的圖像來自另一行。所選圖像被放入比未選擇圖像框更寬更高的框中。

那麼有沒有一個程序，將這個簡化爲認知管理的東西？有沒有一種工具能夠識別哪些值是不必要的，因爲它們被更具體的選擇器所取代？是否有處理CSS的最佳實踐，以便您不會獲得不必要的選擇性路徑？

更新：2010-08-31 12:25

所以我看着less爲概念化的CSS代碼的方式。而且因爲我的代碼不多，我擡頭看了一下css2less。這裏是什麼css2less有問題的代碼產生的摘錄：

.apl_widget_fourLevel { 
    margin:0 auto 1em; 
    overflow:hidden; 

    .apl_widget_level.apl_widget_level1 { 
     .apl_widget_panel { 
      img { 
       left:-5px; 
      } 
     } 
    } 
    .apl_widget_level.apl_widget_level2 { 
     .apl_widget_panel { 
      img { 
       left:-105px; 
      } 
     } 
    } 
    .apl_widget_level.apl_widget_level3 { 
     .apl_widget_panel { 
      img { 
       left:-205px; 
      } 
     } 
    } 
    .apl_widget_level.apl_widget_level4 { 
     .apl_widget_panel { 
      img { 
       left:-305px; 
      } 
     } 
    } 
    .... 
}

所以這裏的東西：apl_widget_levelX實際上是獨一無二的。我認爲一個好的工具可以產生這樣的效果：

img#apl_widget_level1 { left:-5px; } 
img#apl_widget_level2 { left:-105px; } 
img#apl_widget_level3 { left:-205px; } 
img#apl_widget_level4 { left:-305px; } 

.apl_widget_fourLevel { 
    margin:0 auto 1em; 
    overflow:hidden; 
    .... 
}

所選/未選定元素的相似註釋。

我喜歡答案的地方，但我正在尋找工具讓我的生活更輕鬆。該文件中的完整CSS代碼是2500行，整個套件是11000行。

更新：2010-09-01 09:50

這就是我把它變成手：

ul.apl_widget_content { 
    width: 492px; 
    height: 140px; 
    position: relative; 
} 
ul.apl_widget_content li { 
    background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat; 
    list-style: none; 
    display: inline; 
    position: absolute; 
    text-align:center; 
    text-transform:uppercase; 
} 

#apl_widget_level1 { 
    left:5px; top: 0px; 
    background-position: -13px -300px; 
    width: 86px; height: 133px; 
} 
#apl_widget_level2 { 
    left:105px; top: 0px; 
    background-position: -113px -300px; 
    width: 86px; height: 133px; 
} 
#apl_widget_level3 { 
    left:205px; top: 0px; 
    background-position: -213px -300px; 
    width: 86px; height: 133px; 
} 
#apl_widget_level4 { 
    left:305px; top: 0px; 
    background-position: -313px -300px; 
    width: 86px; height: 133px; 
} 
#apl_widget_level1s { 
    left:5px; top: 0px; 
    background-position: -5px 0px; 
    width:102px; height: 133px; 
} 
#apl_widget_level2s { 
    left:105px; top: 0px; 
    background-position: -105px 0px; 
    width:102px; height: 133px; 
} 
#apl_widget_level3s { 
    left:205px; top: 0px; 
    background-position: -205px 0px; 
    width:102px; height: 133px; 
} 
#apl_widget_level4s { 
    left:305px; top: 0px; 
    background-position: -305px 0px; 
    width:102px; height: 133px; 
} 
div.apl_widget_label { 
    padding-top: 35px; 
    font-size: 85%; 
    font-weight:normal; 
    top: 20px; 
    line-height:1em; 
} 
.selected .apl_widget_label { 
    padding-top: 15px; 
} 
div.apl_widget_value { 
    font-size:24px; 
    margin-top:10px; 
} 
.selected div.apl_widget_value { 
    margin-top:15px; 
} 
.apl_widget_value a { 
    text-decoration:none; 
    color:#FFF; 
}

此前175線。現在有75行。大部分代碼（40行）都是CSS spriting。

更新2010-09-01 11:30

HTML現在看起來像：

<ul class="apl_widget_content"> 
    <li id="apl_widget_level1"> 
     <div class="apl_widget_label">Level </div> 
     <div class="apl_widget_value"><a href="#">1</a></div> 
    </li> 
    <li id="apl_widget_level2"> 
     <div class="apl_widget_label">Level</div> 
     <div class="apl_widget_value"><a href="#">2</a></div> 
    </li> 
    <li id="apl_widget_level3s" class="selected"> 
     <div class="apl_widget_label">Level</div> 
     <div class="apl_widget_value"><a href="#">3</a></div> 
    </li> 
    <li id="apl_widget_level4"> 
     <div class="apl_widget_label">Level</div> 
     <div class="apl_widget_value"><a href="#">4</a></div> 
    </li> 
</ul>

HTML前面看起來像：

<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini"> 
    <div class="apl_widget_content"> 
     <div class="apl_widget_level apl_widget_level1 "> 
      <div class="apl_widget_label">Level</div> 
      <div class="apl_widget_value"><a href="#">1</a></div> 
      <div class="apl_widget_panel"> 
       <img alt="" src="widget_fourlevel_1.png"> 
      </div> 
     </div> 
     <div class="apl_widget_level apl_widget_level2 "> 
      <div class="apl_widget_label">Level</div> 
      <div class="apl_widget_value"><a href="#">2</a></div> 
      <div class="apl_widget_panel"> 
       <img alt="" src="widget_fourlevel_1.png"> 
      </div> 
     </div> 
     <div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected"> 
      <div class="apl_widget_label">Level</div> 
      <div class="apl_widget_value"><a href="#">3</a></div> 
      <div class="apl_widget_panel"> 
       <img alt="" src="widget_fourlevel_1.png"> 
      </div> 
     </div> 
     <div class="apl_widget_level apl_widget_level4 "> 
      <div class="apl_widget_label">Level</div> 
      <div class="apl_widget_value"><a href="#">4</a></div> 
      <div class="apl_widget_panel"> 
       <img alt="" src="widget_fourlevel_1.png"> 
      </div> 
     </div> 
    </div>      
</div>

來源

2010-08-31 hughdbrown

+0

你能展示一些HTML嗎？基於知道HTML的外觀來優化CSS會更容易，再加上也許更改HTML可能會導致更優化的CSS。 – RoToRa 2010-09-01 14:10:31

+0

你需要支持IE6嗎？使用IE6不支持的東西可能會有更多的優化。 – RoToRa 2010-09-01 14:12:15

+0

@RoToRa：添加了HTML。是的，需要IE6支持。在Firefox中測試，嗯。 – hughdbrown 2010-09-01 15:35:57

回答

1

基於所張貼的HTML我建議以下變化：

的內部類apl_widget_label和apl_widget_value是不必要的，並且可以簡單地與獨特的元件替代（也就是li內是唯一的）。這可能會使選擇器稍長一些，但結構更好，可讀性更強。此外，鏈接周圍的div是不必要的，因爲鏈接可以直接進行樣式設置。

<ul class="apl_widget_content"> 
    <li id="apl_widget_level1"> 
     <div>Level </div><a href="#">1</a> 
    </li> 
    ...

與

.apl_widget_content li div { 
    padding-top: 35px; 
    font-size: 85%; 
    font-weight:normal; 
    top: 20px; 
    line-height:1em; 
} 
.apl_widget_content li.selected div { 
    padding-top: 15px; 
} 
.apl_widget_content li a { 
    font-size:24px; 
    margin-top:10px; 
    text-decoration:none; 
    color:#FFF; 
    display: block; 
} 
.apl_widget_content li.selected a { 
    margin-top:15px; 
}

您還可以移動的級別規則的top，width和height性質的ul.apl_widget_content li(.selected)規則：

ul.apl_widget_content li { 
    ... 
    top: 0px; 
    width: 86px; 
    height: 133px; 
} 

ul.apl_widget_content li.selected { 
    width:102px; 
} 

#apl_widget_level1 { 
    background-position: -13px -300px; 
}

這將是巨大的，如果你能得到擺脫了「選定的級別」ID（以s結尾的ID），但我想不出還有什麼合理的方法支持IE6。

我只是看到你已經將li設置爲display: inline，同時保持塊元素插入它們。你需要小心，因爲儘管是技術上正確的CSS，但其確切的渲染並沒有真正定義。您可以考慮使用display: inline-block或float: left。

來源

2010-09-02 14:11:22 RoToRa

+0

我喜歡這個。儘管如此，我仍然覺得沒有好的工具來重構或合理化CSS。 更改爲顯示：inline-block和float：left未更改FF中的外觀。我想象那是你的預期。 – hughdbrown 2010-09-03 18:55:38

+0

我爲兼容的瀏覽器創建了良好的CSS，但在IE6中出現了「雙邊距浮動錯誤」和「浮動元素摺疊父元素」錯誤。用「display：inline;」結束脩復你指出，這不是準確的CSS。 – hughdbrown 2010-09-09 17:13:54

+0

我仍然希望有這方面的工具。 – hughdbrown 2010-09-09 17:14:13

1

如果它只是四個按鈕，我會在現代瀏覽器中將頁面拉上來，並使用開發工具包（Firefox中的Firebug，Opera中的Dragonfly，WebKit開發呃工具在Safari/Chrome中）檢查有問題的按鈕，看看每個有效的樣式是什麼。

來源

2010-08-31 15:53:51 ngroot

0

你可能想要超過this article我讀的時間不長，它對組織你的css的專業版和控制檯有着非常好的概述。我還會看看文章的底部，它有一些鏈接，提供更多信息。

從外觀上看，你的小部件樣式似乎與classitis有點過分，但至少有它的記錄，我無法計算我看過無證css類的次數。

來源

2010-08-31 15:54:23 mwgriffith

0

我認爲你需要改變你的clases的名字，我發現你幾乎所有的東西都使用了「.apl_widget_label」，並根據選擇器來設置元素的樣式。

例如：

/* the gray label in the panel 
    enforce for mini display */ 
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label, 
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {

爲什麼不創建一個名爲 「迷你顯示器」，然後你的元素會像其他類：

<div class=".apl_widget_label mini-display">..</div>

和你的CSS是：

.mini-display{..}

如果你不喜歡它......我見過一些人創建這樣的類

<div class="left margin-auto big red ...">..</div>

其中每個類都改變元素上特定的內容（即left => float：left;）。他們有一個他們經常使用的類庫。

來源

2010-08-31 16:13:27 pleasedontbelong

3

以下僅爲評論;很難給出像這樣的問題的明確答案，尤其是，當HTML結構不可用時。

這真的讓我是長的類名的第一件事。當你在這個名字中有太多重複時，我認爲你做錯了什麼。名稱，如

.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img

真的應該縮短爲（像）：

.apl_widget .fourlevel .panel img

尤其是當你選擇基本上都是90％的重複，像

.apl_widget_level.apl_widget_level1

這裏還有沒有點這個！在CSS中，級聯可以確保繼承，因此只需添加一個前綴即可。當然，如果你已經得到了索引類名稱的點，它的時間來交換他們出去id S，像

#level1

它可能看起來很小，但它確實讓CSS，如果你更容易維護已經有了精簡的選擇器，而且重複性更低 - 至少你不會花太多時間通過選擇器進行掃描。

如果小部件的HTML結構在整個代碼中都是相同的，那麼您實際上可以換出一些元素的類。它當然會減少樣式的可重用性，但鑑於小部件通常不會像頁面其餘部分那樣共享相同的結構和設計，應該可以使用更簡單的小部件樣式來減少類。像（說）

.profile img

肯定會比只選擇更好的給那個img類 - 它都立即明顯你在做什麼，並且很容易在同一時間內維持。

別的東西，你可能想要做的是唯一代碼用於特殊情況，像這樣很簡單情況

a { 
    color: white; 
    background: #666; 
    text-decoration: none; 
} 

a.special { 
    color: #B8E9FF; 
} 

a.brilliant { 
    color: #FFAFAF; 
}

此外，刪除重複的類，停留每種情況中的相同。再一次，使用級聯充分發揮其潛力。

3-5選擇符最大值並不少見。 3-5爲每其中之一是，雖然。隨着更多案例的添加，CSS選擇器應該從簡單到複雜。因此，請嘗試找到小部件的基礎，定義默認值，然後編寫代碼。

代碼片段本身也不是不好，除了包含太多和過長的類名。儘管通常會自下而上地進行重新編寫優化，如果項目的要求自上次開發者以來發生了變化（我們不再需要支持IE6，歡呼！）但是，如果沒有看到結構，就很難制定明確的解決方案。

來源

2010-08-31 16:16:45

+0

訴好點這裏 – 2010-09-02 14:16:43

相關問題

 相關問題