什麼事都應該遵守 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 的原則又是些什麼呢?
我不太認同第一個作法,雖然國內外有不少人建議這麼做。
既然一開始用 CSS 就表明了,內容歸 HTML 管,外觀歸 CSS 管,那為什麼又要在 HTML 裡頭用到外觀呢?
同樣的,若是你在 class 裡頭註明它要 alignright 之類,那以後你的版面想要大改版了,你是打算要寫出像是 .alignright { text-align: left;} 這種頗有趣的矛盾碼勒,還是打算要大改 HTML ?
只能說是個人習慣的不同呀…*攤手*
不過我覺得你說外觀歸 CSS 管,通常這個會說是用
...
來決定文字顏色而不是用...
來決定。跟我要訴求的有點點不一樣 😛我很習慣把全站的超連結給弄成一樣的樣式
這時如果用第二種方法可就麻煩了 XD
因為要把每個超連結都加上一樣的 class
風痕影: 我有說了「若非是需要更改全域行為」呀 :p
通常我的習慣是整個網站使用一個通用的CSS是直接針對html tag設定的CSS樣式…
然後才有依不同的頁面或模組設定相關的class&id的CSS樣式…
感覺這樣在製作的初期不會看到感覺差太多的版面…
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 兄說得也很有道理(筆記…)