[討論] css 模組化

看板Web_Design作者 (逍遙盃)時間14年前 (2011/12/06 00:16), 編輯推噓4(4013)
留言17則, 6人參與, 最新討論串1/2 (看更多)
我一直以為 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

12/06 00:31, , 1F
我之前有大概看960系統的網站 就是因為覺得這樣的命名
12/06 00:31, 1F

12/06 00:31, , 2F
不很好用...所以也很想知道有什麼具體的優點?
12/06 00:31, 2F

12/06 00:32, , 3F
還是說是要上手之後才可以顯出快速建立之類的優點呢?
12/06 00:32, 3F

12/06 00:34, , 4F
.m10{margin:10px}ect這種設定一人一個的寫法,用太多
12/06 00:34, 4F

12/06 00:34, , 5F
感覺就像原po聞中所說,當行內,失去CSS整體管理的優點
12/06 00:34, 5F

12/06 00:35, , 6F
版面不會有大更動這樣命名也沒差
12/06 00:35, 6F

12/06 00:35, , 7F
如果引用的地方非常分散瑣碎,一旦修改牽一髮動全身
12/06 00:35, 7F

12/06 00:35, , 8F
也很奇怪
12/06 00:35, 8F

12/06 00:36, , 9F
主要可以節省網頁的大小
12/06 00:36, 9F

12/06 00:36, , 10F
可以節省網頁大小@ @....?指HTML檔的大小?
12/06 00:36, 10F

12/06 00:45, , 11F
一個元件一個css檔案,在用一支php把所有檔案合併,順便產生
12/06 00:45, 11F

12/06 00:45, , 12F
一個靜態的css檔,本機測試的時候讀php,正式環境讀那靜態檔
12/06 00:45, 12F

12/06 00:47, , 13F
php可以讀某資料夾下的所有檔,或一個一個選,元件拔掉的時
12/06 00:47, 13F

12/06 00:48, , 14F
就踢掉該css檔,合併時還可以順便壓縮。現在我都這樣做
12/06 00:48, 14F

12/06 00:58, , 15F
個人是覺得蠻方便的 格子都算好好
12/06 00:58, 15F

12/06 02:12, , 16F
你需要 compass !
12/06 02:12, 16F

12/07 17:18, , 17F
compass的圖示很特別...好像有東西會噴出來(誤)
12/07 17:18, 17F
文章代碼(AID): #1EtEvCLo (Web_Design)
討論串 (同標題文章)
文章代碼(AID): #1EtEvCLo (Web_Design)