CSS技巧：清理無用的CSS樣式
一、Dust-Me selectors
Dust-Me是一個很有用也很好用的Firefox外掛，它可以分析到你的頁面中呼叫的所有CSS檔案並分析那些在頁面中沒有被用到。
- 支援本地和遠端樣式檔案，包括使用<link>標籤、<?xml-stylesheet?>處理指令、@import語句等方式引入的樣式檔案；(但是不支援頁面中的<style>塊和內聯樣式)
- 支援IE條件註釋中引入的樣式檔案；
- 可以檢查一個頁面，也可以檢查整個網站；
- 支援CSS1選擇器、大部分CSS2和CSS3選擇器；
- 理解通用的CSS hack，比如 “* html #fuck-ie”將會被認為是”html #fuck-ie”；
- 支援Firefox 3.5和Firefox 3.0，事實上得益於FF 3.5的js引擎的改進，FF 3.5中的效能比FF 3.0要高50%。
Page Speed是Google提供的一個前端效能分析工具，有些類似於YSlow，但是提供了一些比較個性且很有用的工具，比如Remove unused CSS：
Page Speed和YSlow一樣依賴Firebug。
Page Speed和YSlow一樣依賴Firebug，瞭解詳情和安裝請訪問這裡。
三、CSS Redundancy Checker
CSS Redundancy Checker 是一個免費的線上應用，可以檢查所有的使用某個CSS檔案的頁面中無用的樣式。可以同時檢查某一個樣式在多個頁面中的使用情況。該工具的不足是雖然一次能檢查多個HTML頁面，但每次只能檢查一個CSS檔案，而且還要手動輸入：
四、IntelliJ IDEA
IntelliJ IDEA 這是一個頗強大的IDE，類似於DreamWeaver，不過在國內用的不多。該軟體包括一個即時程式碼分析工具(On-the-fly Code Analysis)，可以分析CSS檔案中未用到的class和id。
五、Expression Web
Expression Web作為微軟的新一代網站開發工具，還是有很多人使用的，其CSS Report功能可以檢查未用到需要被清除的CSS（我的確沒有使用EW開發過網站，希望使用該軟體的童鞋可以幫忙確認一下這一點）。
小結：
當然可能還有其它的某些工具這裡沒有提到，如果大家有所瞭解，可以與大家分享。
另外，通常我們將整個網站的樣式寫入一個或多個樣式檔案中，然後在頁面中全部呼叫或者分模組呼叫，在52CSS.com的網站樣式檔案組織方面的文章中，有過介紹。那麼某個CSS檔案中的樣式可能在某個頁面中的確沒有用到但是在其它的頁面中被用到了，所以使用這些工具檢測CSS檔案中多餘的樣式的時候，需要保持一定的謹慎，清除樣式可能會影響到其它的頁面，所以 page speed提供的檢查結果只適用於單個頁面，不適合整個網站，而使用Dust-Me或CSS Redundancy Checker的時候可以對整個網站或者網站的多個頁面同時檢查，這樣可能能避免萬無一失。
相關推薦
CSS技巧：清理無用的CSS樣式
我們在編寫CSS樣式的時候，往往或遭遇CSS樣式的修改或者介面設計的變更，頁面的CSS在經歷幾個版本的修改之後，可能有些樣式已經用不到了，或許將某些樣式更名了而原來的忘了刪除，總之頁面中可能存在著一些無用的樣式。這些無用的浪費了一些伺服器空間和頻寬消耗，也會增大我們的維護
css技巧：實現圓角、陰影、透明效果
CSS技巧：圓角效果 需要切1個透明的圓形圖片(這個圖片要求圓角內側是透明的，外側是不透明的)，用絕對定位來顯示4個圓角，這樣做的好處是隻使用1個圖片，就可以實現任何大小，任何背景顏色的box圓角，程式碼如下： <style type="text/cs
css 命名：BEM, scoped css, css modules 與 css-in-js
css 作用域是全域性的，專案越來越大，人越來越多，命名慢慢成為問題，以下是幾種解決命名問題的方案 一. BEM 以 .block__element--modifier 形式命名，命名有含義，block 可視為模組，有一定作用域含義 例項 .dropdown-menu__item--active 二
css基礎：樣式屬性
-h otto 下劃線 基礎 size out 去掉 滾動 ddl 1.背景與前景：background-color：；背景色，樣式表優先級高。 background-image：url（路徑）；設置背景圖片 background-attachment：fixed；背景固定
css基礎：樣式之定位、樣式之隱藏、二級選單、多個列表轉表格、圖片精靈技術
<html lang="en"><head> <meta charset="UTF-8"> <title>樣式之定位position</title> <style&g
筆記：JS設定CSS樣式的幾種方式
用JS來動態設定CSS樣式，常見的有以下幾種 1. 直接設定style的屬性 某些情況用這個設定 !important值無效 如果屬性有'-'號，就寫成駝峰的形式（如textAlign） 如果想保留 - 號，就中括號的形式 elem
前端之CSS：CSS選擇器 前端之css樣式（選擇器）。。。
前端之css樣式（選擇器）。。。 一、css概述 CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標籤的渲染和佈局
hta工具:從.css檔案中清理不使用的樣式類(id或class類)
-----------程式碼----------<!DOCTYPE html><html><head><title>清除不使用的樣式</title></head><body><iframe id="html" app
使用Chrome Audits功能清理無用的css
Google chrome在“開發者工具”中提供了類似 dust-me 的冗餘css檢測功能。 chrome使用者可以在Audits面板內使用這個功能： 選擇 Web Page Performance 選框並點選Run，會得到類似如下格式的提示 Remove unu
React 專案中的一種樣式管理方式： stylus + react-css-modules
stylus 是一套 css 預處理框架，react專案可以通過 stylus 管理樣式檔案。react-css-modules 則主要用於實現對樣式的模組化引用，stylus 與 react-css-modules 配合使用可以實現一套對react專案的樣式管理方案。
HTML5基礎加強css樣式篇（css屬性：怪異盒模型解析）（四十六）
1.怪異盒模型和border有關： 設定border寬度可以影響其他元素的佈局：但是在IE5及以下里面只是影響其子元素； 2.可以同時設定 box-sizing屬性來使用這一特性，是其改變border寬度也不影響其他元素； 3,.box-sizing:簡單理解就是盒子大小基
CSS實戰技巧：大小不固定，多行文字的垂直居中
1.單行文字 html程式碼 <div> <p>單行文字</p> </div> css程式碼 div { wi
CSS例項：橫線樣式的輸入框
在網上我們常常看見一些登錄檔單的輸入框部分並不是我們常見的矩形框，而是一條細線，很多朋友對此很感興趣。其實要實現這樣的效果並不困難，我們只要用一段簡短的CSS程式碼控制好表單輸入框的樣式即可。 示例如下： 請輸入您的使用者名稱： 下面我們就來看看這段實現效果的c
CSS重構：樣式表效能調優
這兩天窩在家裡又看了本CSS相關的書：《CSS重構：樣式表效能調優》。重構是指在不改變程式碼行為的前提下，重寫程式碼，使其更加簡潔、易於複用。 這本書讀起來比較快，可挑自己感興趣的讀，前面三章是基礎知識的介紹，都瞭解的話可直接跳過。第四章是為樣式分類，我比較感興趣的是第四章（測試）和第五章（程式碼的
Web前端面試指導(十八)：用純CSS創建一個三角形的原理是什麽？
web前端題目點評三角形的圖標在網頁設計是很常見的，屬於基本常識題，只要在練習做到過這個功能都能回答出來，可以把你做過的思路描述出來就可以了，本題的難易程度為簡單本文出自 “智學無憂1” 博客，轉載請與作者聯系！Web前端面試指導(十八)：用純CSS創建一個三角形的原理是什麽？
每天一個JS 小demo之韓雪冬輪播圖。主要知識點：html，css布局，對於數組和對象的理解和運用
身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st
CSS技巧和經驗列表
bsp 隱藏元素 psi nowrap abs 選擇 css logs for 如何清除圖片下方出現幾像素的空白間隙？ img{display:block;} 如何讓文本垂直對齊文本輸入框？ input{vertical-align:middle;} 如何使文本溢出邊界顯示
CSS六：浮動
浮動元素 ear == 新的 默認 hid 元素 處理 ont 一、float屬性取值：left：左浮動right：右浮動none：不浮動 二、浮動的作用塊元素同行排列顯示，一般用於排版、分欄顯示。設置浮動屬性後，脫離文檔流向指定的左或右邊對齊，直到父元素的邊界或浮動的元素
css基礎：格式與布局
避免 漸變 邊框 最小寬度 tran hidden wid 布局 鼠標 1.定位：position：fixed；鎖定位置，相當於屏幕位置鎖定，不隨頁面移動。 position：absolute；絕對位置，相對於頁面定位，隨頁面移動。 position：relative；相對
CSS技巧！像table一樣布局div
單元 單元格 and 布局 有用 什麽 對齊 right endif 許多網頁設計師都喜歡，將兩個或者多個容器等高的並排放置，並在裏面展示每個容器的內容，就象經典表格布局中的單元格控制幾個欄目的位置，也喜歡容器的內容居中或頂部對齊顯示。 但是你又不喜歡用table來