Re: [問題] 關於版型、css的規劃問題

看板Web_Design作者 (超級白)時間15年前 (2010/11/05 07:46), 編輯推噓2(209)
留言11則, 4人參與, 最新討論串4/4 (看更多)
※ 引述《tomin (藍藍紫黃橘 粉灰白綠咖)》之銘言: : 1.首先前者的命名不太好 至少要命名成color112233 或red, bgBlue等 :  可惜的是,就算class="color112233 bg112233 padding3em margin4px" :  瀏覽器不能自動轉成css,還是要事先定義一組css,不然我會認真考慮這種寫法。 前者方式就是為了快速,所以命名最好短才符合需要 以下是我用的 /* ========== */ /* = hide = */ /* ========== */ .hide { position: absolute; left: -9999px; } .hide-text { text-indent: -9999px; outline: none; } .left { *display:inline; float: left; } .right { *display:inline; float: right; } /* ========= */ /* = clear = */ /* ========= */ .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ *zoom:1; } .clear, .clb { clear: both; } .cll { clear: left; } .clr { clear: right; } /* ============ */ /* = display = */ /* ============ */ .db { display: block; } .di { display: inline; } .db { display: none; } .dib { display: inline-block; } /* ============ */ /* = overflow = */ /* ============ */ .oa { overflow: auto; } .os { overflow: scroll; } .oh { overflow: hidden; } .ov { overflow: visible; } /* ============ */ /* = posotion = */ /* ============ */ .poa { position: absolute; } .por { position: relative; } .pof { position: fixed; } .pos { position: static; } /* ======== */ /* = text = */ /* ======== */ .tac { text-align: center; } .tar { text-align: right; } .tal { text-align: left; } .taj { text-align: justify; } .tdn { text-decoration: none; } .tdu { text-decoration: underline; } .tdo { text-decoration: overline; } .tdlt { text-decoration: line-through; } /* ================== */ /* = vertical align = */ /* ================== */ .vat { vertical-align: top; } .vam { vertical-align: middle; } .vab { vertical-align: bottom; } /* =========== */ /* = numbers = */ /* =========== */ .m0 { margin: 0; } .m10 { margin: 10px; } .m20 { margin: 20px; } .m30 { margin: 30px; } .ml0 { margin-left: 0; } .ml10 { margin-left: 10px; } .ml20 { margin-left: 20px; } .mr0 { margin-right: 0; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .w100 { width: 100%; } .bn { border: none; } -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 124.12.195.188

11/05 12:17, , 1F
短確實會快,對個人開發而言,但有違coding style,
11/05 12:17, 1F

11/05 12:19, , 2F
但若考慮團隊開發、交接移植、溝通訊息 就不一定好用快速了
11/05 12:19, 2F

11/05 12:20, , 3F
我只有用一些 而且跟你的略有不同
11/05 12:20, 3F

11/05 12:21, , 4F
例如 .hide{display:none} left{text-align:left}
11/05 12:21, 4F

11/05 13:47, , 5F
像這一類的,我都套用在個體元件的效果較多
11/05 13:47, 5F

11/05 13:47, , 6F
像是 text input,button那一類的
11/05 13:47, 6F

11/05 18:12, , 7F
這套css溝通交接應該不成問題 .tac 一看就知道是什麼縮寫
11/05 18:12, 7F

11/05 18:13, , 8F
不過真的只是快 完全沒有模組化 跟寫inline css沒兩樣
11/05 18:13, 8F

11/05 18:14, , 9F
同意原作者說法 這跟inline有什麼不一樣...
11/05 18:14, 9F

11/05 19:52, , 10F
之前看過一遍 現在猛然看到.tac 想不到是什麼
11/05 19:52, 10F

11/05 19:56, , 11F
只是比較短的inline+1 可能比inline好覆寫過去
11/05 19:56, 11F
文章代碼(AID): #1CqqNUxE (Web_Design)
文章代碼(AID): #1CqqNUxE (Web_Design)