糟糕的css用法 1

2022-04-20 11:10:59 字數 1587 閱讀 2901

現在**追求越來越漂亮好看,越來越炫,所以css是必不可少的.可是我發現許多人使用css的方式是不對的,至少是不推薦的.

比如下面的css用法不對

(1)乙個頁面對應乙個css檔案

這種做法是我深惡痛絕的,為什麼呢?可重用性太差了!

比如哪天我突然要改變乙個按鈕的樣式,那就壞了,只要包含按鈕的頁面的樣式我都得改,比如有20個頁面包含了按鈕,那麼我就得修改20個css檔案,這不要人命嗎?

根本原因:相同的樣式重複出現在多個檔案中.

(2)編寫css樣式時直接修改html標籤的樣式

例如:

沒有通過id或class,這種方式非常不好,因為它的影響是完全開放的,任何乙個頁面引入該css檔案就會受到影響.我專案中就遇到了.當時我們使用了webcalendar.js 作為日期控制項,本來介面應該是:

正確的方式應該是:

想要應用該css怎麼辦?加上class就行了.

(3)相同的**出現在多個地方

這段css**竟然出現了至少四次.如果客戶說要修改行(line-height)的高度,那麼我就要同時修改至少四個地方.這不是自己人坑自己人嗎?

(4)濫用id

例如:

我們要知道id的權重是最高的.在日常開發中,我們更多的情況是會遇到如下情況:

#header a
假設這是我們的乙個專案,現在我們決定要把乙個在 header 的 另乙個link設定成無邊框,隨手一寫,我們新增了:

.special-link
然後再在 html 中新增了乙個 special-link 的class 類,這下解決我們的問題了嗎? 答案是:沒有! 由於 id 的權重如此之高,我們需要更高權重的宣告才能實現我們的需求。

下面這樣寫才是正確的:

#header .special-link 

附件是我總結的html筆記:html02.zip

糟糕的css用法 1

現在 追求越來越漂亮好看,越來越炫,所以css是必不可少的.可是我發現許多人使用css的方式是不對的,至少是不推薦的.比如下面的css用法不對 1 乙個頁面對應乙個css檔案 這種做法是我深惡痛絕的,為什麼呢?可重用性太差了 比如哪天我突然要改變乙個按鈕的樣式,那就壞了,只要包含按鈕的頁面的樣式我都...

糟糕的css用法 1

現在 追求越來越漂亮好看,越來越炫,所以css是必不可少的.可是我發現許多人使用css的方式是不對的,至少是不推薦的.比如下面的css用法不對 1 乙個頁面對應乙個css檔案 這種做法是我深惡痛絕的,為什麼呢?可重用性太差了 比如哪天我突然要改變乙個按鈕的樣式,那就壞了,只要包含按鈕的頁面的樣式我都...

糟糕的設計

不要去弄髒構造器方法!2009 02 24 這是來自自己最近的專案salesys的乙個經驗之一。坦白說,在這個專案,還有以前的幾個專案中糟糕的設計有很多,這個只是其中之一。在salesys的乙個很大的特點就是大部分的模組在開始頁面都有乙個資訊列表,用於顯示這個模組的主要資訊。就像這樣 在我們的 設計...