一點點寫 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

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

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

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

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

  • 我不太認同第一個作法,雖然國內外有不少人建議這麼做。

    既然一開始用 CSS 就表明了,內容歸 HTML 管,外觀歸 CSS 管,那為什麼又要在 HTML 裡頭用到外觀呢?

    同樣的,若是你在 class 裡頭註明它要 alignright 之類,那以後你的版面想要大改版了,你是打算要寫出像是 .alignright { text-align: left;} 這種頗有趣的矛盾碼勒,還是打算要大改 HTML ?

  • 只能說是個人習慣的不同呀…*攤手*

    不過我覺得你說外觀歸 CSS 管,通常這個會說是用 ... 來決定文字顏色而不是用 ... 來決定。跟我要訴求的有點點不一樣 😛

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

  • 風痕影: 我有說了「若非是需要更改全域行為」呀 :p

  • 不~

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

  • V!c

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

  • 嗯, V!c 兄說得也很有道理(筆記…)