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

[superpai (超級白)]

※ 引述《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
→ tomin:短確實會快，對個人開發而言，但有違coding style，
→ tomin:但若考慮團隊開發、交接移植、溝通訊息　就不一定好用快速了
→ tomin:我只有用一些　而且跟你的略有不同
→ tomin:例如 .hide{display:none}  left{text-align:left}
推 JYHuang:像這一類的，我都套用在個體元件的效果較多
→ JYHuang:像是 text input,button那一類的
→ superpai:這套css溝通交接應該不成問題 .tac 一看就知道是什麼縮寫
→ superpai:不過真的只是快 完全沒有模組化 跟寫inline css沒兩樣
推 adamp3:同意原作者說法 這跟inline有什麼不一樣...
→ tomin:之前看過一遍　現在猛然看到.tac  想不到是什麼
→ tomin:只是比較短的inline+1  可能比inline好覆寫過去