精簡高效的CSS命名準則 方法

2022-02-25 06:38:42 字數 4277 閱讀 8585

/* ---------------------single css----------------------- */

/* display */

.dn.di

.db.dib /* if the element is block level(eg. div, li), using 'inline_any' instead */

/* height */

.h14

.h16

.h18

.h20

.h22

.h24

/* width */

/* fixed width value */

.w20

.w50

.w70

.w100

.w120

.w140

.w160

.w180

.w200

.w220

.w250

.w280

.w300

.w320

.w360

.w400

.w460

.w500

.w600

.w640

.w700

/* percent width value */

.pct10

.pct15

.pct20

.pct25

.pct30

.pct33

.pct40

.pct50

.pct60

.pct66

.pct70

.pct75

.pct80

.pct90

.pct100

/* line-height */

.lh14

.lh16

.lh18

.lh20

.lh22

.lh24

/* margin */

.m0.ml1

.ml2

.ml5

.ml10

.ml15

.ml20

.ml30

.mr1

.mr2

.mr5

.mr10

.mr15

.mr20

.mr30

.mt1

.mt2

.mt5

.mt10

.mt15

.mt20

.mt30

.mb1

.mb2

.mb5

.mb10

.mb15

.mb20

.mb30

/* margin negative */

.ml-1

.mr-1

.mt-1

.mb-1

.ml-3

.mr-3

.mt-3

.mb-3

.ml-20

.mr-20

.mt-20

.mb-20

/* padding */

.p0.p1

.pl1

.pt1

.pr1

.pb1

.p2.pl2

.pt2

.pr2

.pb2

.pl5

.p5.pt5

.pr5

.pb5

.p10

.pl10

.pt10

.pr10

.pb10

.p15

.pl15

.pt15

.pr15

.pb15

.p20

.pl20

.pt20

.pr20

.pb20

.p30

.pl30

.pt30

.pr30

.pb30

/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> all colors are safe color*/

.bdc

.blc

.brc

.btc

.bbc

.bdd

.bld

.brd

.btd

.bbd

.bde

.ble

.bre

.bte

.bbe

/* background-color name rule: bg - (key word/hex color) |-> all colors are safe color */

.bgwh

.bgfb

.bgf5

.bgf0

.bgeb

.bge0

/* safe color */

.g0.g3

.g6.g9

.gc.wh

/* font-size */

.f0.f10

.f12

.f13

.f14

.f16

.f18

.f20

.f24

/* font-family */

.fa.ft

.fv.fs

.fl.fw

/* font-style */

.n.b

.i/* text-align */

.tc.tr

.tl.tj

/* text-decoration */

.tdl

.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover

/* letter-spacing */

.lt-1

.lt0

.lt1

/* white-space */

.nowrap

/* word-wrap */

.bk/* vertical-align */

.vm.vtb

.vb.vt

.vn/* float */

.l.r

/* clear */

.cl/* position */

.rel

.abs

/*z-index*/

.zx1

.zx2

/* cursor */

.poi

.def

/* overflow */

.ovh

.ova

/* visibility */

.vh.vv

/* zoom */

.z/* ------------------- multiply css ------------------ */

.auto

.fix

.fix:after

.cell

.cell_bk

.ell

/* css3榪囨浮鍔ㄧ敾鏁堟灉 */

.trans

/* 澶у皬涓嶅畾鍏冪礌鍨傜洿灞呬腑 */

.dib_vm

/* 鍔犺澆涓儗鏅浘鐗� - 濡傛灉鎮ㄤ嬌鐢ㄨcss灝忓簱錛屽姟蹇呬慨鏀規鍥劇墖鍦板潃 */

.loading

/* 鏃犳鏂囨湰妗嗘枃鏈煙 */

.bd_none

/* 緇濆瀹氫綅闅愯棌 */

.abs_out

.abs_clip

/* 鐫夐挳紱佺敤 */

.disabled

.disabled:hover

/*inline-block涓巉loat絳夊鍒楄〃*/

.inline_box

.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any

.float_two, .float_three, .float_four, .float_five, .float_six

.inline_two, .float_two

.inline_three, .float_three

.inline_four, .float_four

.inline_five, .float_five

.inline_six, .float_six

.inline_fix

**至

精簡高效CSS系列之二 浮動float

假如乙個頁面上有3個div塊,如下排列 圖1 不使用浮動 圖2 向右浮動 圖2說明了框1脫離了文件流向右移動,直到它的右邊緣碰到包含框的右邊緣為止。圖3 向左浮動 圖3說明了框1向左浮動,脫離文件流向左移動,直到它的左邊緣碰到框2的左邊緣為止,由於框1脫離了文件流,不佔據空間,框2處於文字流中,所以...

高效編寫Dockerfile的幾條準則

然而寫 dockerfile 也像寫 一樣,乙份精心設計 clean code 的 dockerfile 能在提高可讀性的同時也大大提公升docker的使用效率 因此下面就結合實踐來講幾條 dockerfile 的實踐心得!在我的文章 利用k8s技術棧打造個人私有雲 之 基礎映象製作與實驗 中,我們...

CSS命名 BEM方法

bem 是塊 block 元素 element 修飾符 modifier 的簡寫,利用不同的區塊,功能以及樣式來給元素命名。官網原文表述。bem方法通過使用混合或建立額外的塊元素來達到相同的結果。您不需要建立額外的抽象包裝器。相對於其他塊定位乙個塊 設定乙個塊元素相對於其他塊元素的位置,最好的方法通...