一點點寫 CSS 的心得

什麼事都應該遵守 KISS 原則才是啊…
我常常會碰到要改別人 HTML+CSS 的 template，所以有一些心得，也許跟很多人想法不太一樣。

  • 多利用 class 的方式來套用屬性

    我們常常會用 float: left/right/none; 來設定一個物件排放的位置，當然我們可以在任何 id 或 tag 的定義下加入 float: right; 來告訴瀏覽器要向右對齊擺放這個物件，但這樣我覺得在 trace HTML 檔案時，還要交互參照 CSS 檔才知道某個物件是怎樣的對齊方式，我倒覺得不妨利用一個 tag 能套用多個 class 的特性，在 CSS 檔案中定義一個 .alignright 的 class 來當作向右對齊的屬性：
    [code lang=”css”]
    .alignright {
    float: right;
    }
    [/code]
    這樣在套用到某個 tag 上時就很方便了，像這樣（假設還有一個 class 是定義 text-align: center;）：
    [code lang=”xml”]

    …

    [/code]
    我私自地以為，這樣在研究 HTML 檔案時就輕鬆多了，當然如果要反其道而行不讓人家輕易 trace 的話，就不必理我了 😛

  • 盡量用 id 定義，而不要定義 tag

    我覺得若非是需要更改全域行為，比方說在定義 body 的 font 之類的，盡量不要用隨便改變 tag 的預設行為，還是應該善用 id 或 class 的方式來改變 tag 的行為，理由跟上一個 case 一樣 😛

  • 同一個 id, class, tag 的定義盡量寫在一起

    我實在是有點受不了某些 templates 會把明明同樣 id/class/tag 的定義分散在 CSS 檔案的各處，這樣在修改上真的是有點辛苦。不過曾經聽過一個學弟分享這樣寫的理由，是為了把同樣屬性的修改放在同一區域。不過我個人還蠻堅持一個 id/class/tag 的定義在同一個 CSS file 裡只會出現一次…

以上只是我個人的小小心得，更何況筆者人微言輕，更談不上是「建議」了，不知道別人在設計 CSS 的原則又是些什麼呢？

7 comments

  1. 我不太認同第一個作法，雖然國內外有不少人建議這麼做。
    既然一開始用 CSS 就表明了，內容歸 HTML 管，外觀歸 CSS 管，那為什麼又要在 HTML 裡頭用到外觀呢?
    同樣的，若是你在 class 裡頭註明它要 alignright 之類，那以後你的版面想要大改版了，你是打算要寫出像是 .alignright { text-align: left;} 這種頗有趣的矛盾碼勒，還是打算要大改 HTML ?

  2. 只能說是個人習慣的不同呀…*攤手*
    不過我覺得你說外觀歸 CSS 管，通常這個會說是用 ... 來決定文字顏色而不是用 ... 來決定。跟我要訴求的有點點不一樣 😛

  3. 我很習慣把全站的超連結給弄成一樣的樣式
    這時如果用第二種方法可就麻煩了 XD
    因為要把每個超連結都加上一樣的 class

  5. 通常我的習慣是整個網站使用一個通用的CSS是直接針對html tag設定的CSS樣式…
    然後才有依不同的頁面或模組設定相關的class&id的CSS樣式…
    感覺這樣在製作的初期不會看到感覺差太多的版面…

  6. 1
    class本來是讓某些tag可以有共用某組外觀吧?
    把外觀當成class在修改時絕對有問題…而且不太知道multiple class的compatbility也是一個風險…
    2
    id(或class)和tag可以一起用，定義 tag不一定會改變全域行為
    “#id tag {…}”
    這樣定義好最上層的id或class，透過CSS的inheritance下層就可以免掉一堆class、id的，code看起來會簡單多了(每個tag都要加class其實不是好習慣，會變成classitis的)

Comments are closed.