火狐的 CSS Usage 擴展是專門干這個的。用法是開啟 AutoScan 選項,手動翻看盡量多的頁面,手動觸發(fā)顯示盡量多的元素,以讓盡量多的規(guī)則起作用,然后就可以導出干凈的 CSS 了。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、網(wǎng)站設計和雅安機房托管的網(wǎng)絡公司,有著豐富的建站經驗和案例。
寫好的css最好還是盡量少刪啦,因為可能現(xiàn)在沒起作用,在某一塊沒起作用,但是說不定以后能起作用,在別的地方能有用。在現(xiàn)在越來越強調代碼重用的環(huán)境下,我們只能在編碼初期就把代碼整體架構給打好。比如說選擇一個好的樣式重置,科學的浮動清除方式等等都是至關重要的。所以我覺得與其想辦法刪除一些多余的css,倒不如把心思花在前期工作和css代碼的錘煉上,畢竟事先解決比事后解決還是好一些的嘛。
[img]問題問的比較含糊吧,其實不太能理解是想要整理樣式,還是想要在原有基礎上覆蓋樣式。
======整理樣式=====
在我們寫樣式的時候,頁面的CSS在經歷幾個版本的修改之后,可能有些樣式已經用不到了,或許將某些樣式更名了而原來的忘了刪除,總之頁面中可能存 在著一些無用的樣式。這些無用的浪費了一些服務器空間和帶寬消耗,也會增大我們的維護成本。下面介紹幾個分析無用樣式的工具:
【Dust-Me selectors】
Dust-Me是一個很有用也很好用的Firefox插件,它可以分析到你的頁面中調用的所有CSS文件并分析那些在頁面中沒有被用到。
支持本地和遠程樣式文件,包括使用link標簽、?xml-stylesheet?處理指令、@import語句等方式引入的樣式文件;(但是不支持頁面中的style塊和內聯(lián)樣式)
支持IE條件注釋中引入的樣式文件;
可以檢查一個頁面,也可以檢查整個網(wǎng)站;
支持CSS1選擇器、大部分CSS2和CSS3選擇器;
理解通用的CSS hack,比如 “* html #fuck-ie”將會被認為是”html #fuck-ie”;
支持Firefox 3.5和Firefox 3.0,事實上得益于FF 3.5的js引擎的改進,F(xiàn)F 3.5中的性能比FF 3.0要高50%。
你可以下載該項目的源代碼,了解更多請訪問 Dust-Me selector官方頁面。
【Page Speed】
Page Speed是Google提供的一個前端性能分析工具,有些類似于YSlow,但是提供了一些比較個性且很有用的工具,比如Remove unused CSS:
Page Speed和YSlow一樣依賴Firebug。
【CSS Redundancy Checker】
CSS Redundancy Checker 是一個免費的在線應用,可以檢查所有的使用某個CSS文件的頁面中無用的樣式??梢酝瑫r檢查某一個樣式在多個頁面中的使用情況。該工具的不足是雖然一次能 檢查多個HTML頁面,但每次只能檢查一個CSS文件,而且還要手動輸入:
【IntelliJ IDEA】
IntelliJ IDEA 這是一個頗強大的IDE,類似于DreamWeaver,不過在國內用的不多。該軟件包括一個即時代碼分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。
【Expression Web】
Expression Web作為微軟的新一代網(wǎng)站開發(fā)工具,還是有很多人使用的,其CSS Report功能可以檢查未用到需要被清除的CSS(我的確沒有使用EW開發(fā)過網(wǎng)站,希望使用該軟件的童鞋可以幫忙確認一下這一點)。
另外,通常我們將整個網(wǎng)站的樣式寫入一個或多個樣式文件中,然后在頁面中全部調用或者分模塊調用,那么某個CSS文件中的樣式可能在某個頁面中的確 沒有用到但是在其它的頁面中被用到了,所以使用這些工具檢測CSS文件中多余的樣式的時候,需要保持一定的謹慎,清除樣式可能會影響到其它的頁面,所以 page speed提供的檢查結果只適用于單個頁面,不適合整個網(wǎng)站,而使用Dust-Me或CSS Redundancy Checker的時候可以對整個網(wǎng)站或者網(wǎng)站的多個頁面同時檢查,這樣可能能避免萬無一失。
======覆蓋樣式=====
有時候在寫CSS的過程中,某些限制總是不起作用,這就涉及了CSS樣式覆蓋的問題,如下:
/*?css樣式?*/
#navigator?{height:100%;width:200px;position:?absolute;left:?0;border:?solid?2?#EEE;}
.current_block?{border:?solid?2?#AE0;}
CSS優(yōu)先級如下排列:
1. 樣式表的元素選擇器選擇越精確,則其中的樣式優(yōu)先級越高:id選擇器指定的樣式 類選擇器指定的樣式 元素類型選擇器指定的樣式所以上例中,#navigator的樣式優(yōu)先級大于.current_block的優(yōu)先級,及時.current_block是最新添加的,也不起作用。
2. 對于相同類型選擇器制定的樣式,在樣式表文件中,越靠后的優(yōu)先級越高注意,這里是樣式表文件中越靠后的優(yōu)先級越高,而不是在元素class出現(xiàn)的順序。比如.class2 在樣式表中出現(xiàn)在.class1之后:
/*?Css代碼?*/?
.class1?{color:?black;}??
.class2?{color:?red;}
而某個元素指定class時采用 class="class2 class1"這種方式指定,此時雖然class1在元素中指定時排在class2的后面,但因為在樣式表文件中class1處于class2前面,此時仍然是class2的優(yōu)先級更高,color的屬性為red,而非black。
3. 如果要讓某個樣式的優(yōu)先級變高,可以使用!important來指定:
/*?Css代碼??*/
.class1?{color:?black?!important;??}??
.class2?{color:?red;}
此時class將使用black,而非red。
對于一開始遇到的問題,有兩種解決方案:
1. 將border從#navigator中拿出來,放到一個class .block中,而.block放.current_block之前:
/*?Css代碼?*/??
#navigator?{height:?100%;width:?200;position:?absolute;?left:?0;??}??
.block?{border:?solid?2?#EEE;?}
.current_block?{border:?solid?2?#AE0;}
需要莫仁為#navigator元素指定class="block"
2. 使用!important:
/*?Css代碼??*/
#navigator?{height:?100%;width:?200;position:?absolute;left:?0;?border:?solid?2?#EEE;}??
.current_block?{border:?solid?2?#AE0?!important;}
此時無需作任何其他改動即可生效??梢姷诙N方案更簡單一些。
取消CSS樣式可以在 層或者表格代碼中 找到類似class="" 或者 id="" 之類,將其刪除即可。
或者在網(wǎng)頁代碼中找到 類似這樣的代碼
link href="css/css.css" rel="stylesheet" type="text/css" /
或者
style type="text/css"
.......
/style
將其刪除即可。
寫好的css最好還是盡量少刪啦,因為可能現(xiàn)在沒起作用,在某一塊沒起作用,但是說不定以后能起作用,在別的地方能有用。在現(xiàn)在越來越強調代碼重用的環(huán)境下,我們只能在編碼初期就把代碼整體架構給打好。比如說選擇一個好的樣式重置,科學的浮動清除方式等等都是至關重要的。所以我覺得與其想辦法刪除一些多余的css,倒不如把心思花在前期工作和css代碼的錘煉上,畢竟事先解決比事后解決還是好一些的嘛。
在css中能夠實現(xiàn)換行的代碼有如下幾個:
1、display:block; //將標簽改成塊元素,塊元素是單獨占一行的。
2、clear:both; //清除浮動實現(xiàn)換行。
3、white-space:break; //這個一般適用在英文文章中的折行。
可以根據(jù)上面的幾個能實現(xiàn)換行的樣式,只需要將對應標簽的對應屬性刪除就可以了。
寫網(wǎng)頁的時候CSS樣式一般是先把沒用的清楚掉的,比如自帶的邊框 margin ?padding等等,
你需要把所有的標簽基本都得清除一遍,不然后期寫網(wǎng)頁的時候有的小細節(jié)問題很難排查出來