[討論] css 模組化

[grence (逍遙盃)]

我一直以為 web standard的核心是 html, css, script分離。

html不干涉樣式，只描述功能；
所以 class應盡量以功能命名，nav, menu ...
或是在內容之中扮演的角色，content, contentTitle... ←我覺得這已經有點偏了

取 red, yellow, top, left跟外觀有關的 class name一開始也許重用的很順利，
但是要做到外部 css更改，全站風格都統一更改的話，
可能 red變成 pink、top變 right？這樣不是很詭異…？

可是越來越常看到一些…不同的作法，像是 css裡寫：
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.p10{padding:10px}

在 html裡把 class當行內樣式使用：<div class="m10 p10">content</div>

程式套起來實在很囉嗦……完全沒有模組化的感覺，
不能設 sideBarHead, sideBarContent, sideBarFooter，
要分別設 font-size, width...之類「模組化」過的 css class...

如果不提程式套版麻煩，
有什麼觀點、或是說法可以讓視覺設計「確切」的感覺到這樣做很糟糕？
或是有人也是用這種模組化的 css寫法？請問會想這樣做的優點是什麼？

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 123.193.134.180
→ oj113068:我之前有大概看960系統的網站 就是因為覺得這樣的命名
→ oj113068:不很好用...所以也很想知道有什麼具體的優點？
→ oj113068:還是說是要上手之後才可以顯出快速建立之類的優點呢？
→ oj113068:.m10{margin:10px}ect這種設定一人一個的寫法，用太多
→ oj113068:感覺就像原po聞中所說，當行內，失去CSS整體管理的優點
推 pm2001:版面不會有大更動這樣命名也沒差
→ oj113068:如果引用的地方非常分散瑣碎，一旦修改牽一髮動全身
→ oj113068:也很奇怪
→ pm2001:主要可以節省網頁的大小
→ oj113068:可以節省網頁大小@ @....?指HTML檔的大小？
推 no1kk:一個元件一個css檔案，在用一支php把所有檔案合併，順便產生
→ no1kk:一個靜態的css檔，本機測試的時候讀php，正式環境讀那靜態檔
→ no1kk:php可以讀某資料夾下的所有檔，或一個一個選，元件拔掉的時
→ no1kk:就踢掉該css檔，合併時還可以順便壓縮。現在我都這樣做
推 mdfh:個人是覺得蠻方便的 格子都算好好
→ chrisQQ:你需要 compass ！
推 liaosankai:compass的圖示很特別...好像有東西會噴出來(誤)