ものすごい微妙なスタイルを変更するときに何かと使えるCSSスタイル

ものすごい微妙なスタイルを変更するときに何かと使えるCSSスタイル

ちょっとしたスタイルの変更に最適な、痒いところに手がとどくCSSスタイルです。前に現場で使っていたものをちょっとカスタマイズしてます。

どんなときに使うスタイルなの?

制作しているとよくあるんですよね。

たとえば、ほぼほぼ同じようなmediaモジュールなんだけど、文字の大きさが違う場合があったり、マージン幅が違ったりとか。
ほかにも、テキストのこの部分だけスタイル(文字揃えとかサイズ、色など)を変更したいとか。

そのようなときに、いちいちクラス作って対応するとなるとクラスがどんどん多くなるだけですし、セレクタの詳細どもどんどん肥大化してしまいます。

もちろんときと場合によりますけど、汎用的に使えるクラスがあると対応がしやすくなります。

たとえばこんなの

.u-ta-c{
	text-align: center !important;
}

ってかんじで作っていくと臨機応変に対応ができます。とはいえ、こればっかり使ってしまうとHTMLの中身がクラスばっかりで可読性も汎用性もなくなってしまいます。

ある程度ルールを決めて使用するのがベストかなと。

僕の場合ですと、

・モジュール内でかつ複数のページで使われない場合に使用する
・文字スタイルでalign: center;などの一個で完結するスタイルの場合

に限定して使うようにしています。

utilityスタイル

ちょっとしたスタイルの変更などで使えるクラスをまとめました。 FLOCSSを参考にさせていただき接頭辞は『u-』を付与することにしました。

基本はプロパティを省略してクラス名にしてます。

プロパティ例

クラス名 プロパティ
va vertical-align
br border
cf clearfix
d display
fl float
fz font-size
lc line-clamp
m margin
p padding
pos position
ta text-align
fw font-weight
tt text-truncate
w width
@charset 'utf-8';
/* vertical-align - utility
--------------------------------------------------------- */
.u-va-t{
	vertical-align: top !important;
}

.u-va-m{
	vertical-align: middle !important;
}

.u-va-b{
	vertical-align: bottom !important;
}

/* border - utility
--------------------------------------------------------- */
/* border-radius */
.u-br-4{
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;

	    -ms-border-radius: 4px;
}

.u-br-8{
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	        border-radius: 8px;

	    -ms-border-radius: 8px;
}

.u-br-12{
	-webkit-border-radius: 12px;
	   -moz-border-radius: 12px;
	        border-radius: 12px;

	    -ms-border-radius: 12px;
}

.u-br-16{
	-webkit-border-radius: 16px;
	   -moz-border-radius: 16px;
	        border-radius: 16px;

	    -ms-border-radius: 16px;
}

/* border-none */
.u-br-0{
	border: none;
}

.u-br-t-0{
	border-top: none;
}

.u-br-r-0{
	border-right: none;
}

.u-br-b-0{
	border-bottom: none;
}

.u-br-l-0{
	border-left: none;
}

/* clearfix - utility
--------------------------------------------------------- */
.u-cf{
	*zoom: 1;
}

.u-cf:after{
	display: table;
	clear: both;
	content: '';
}

/* display - utility
--------------------------------------------------------- */
.u-d-tb{
	display: table !important;
}

.u-d-tbc{
	display: table-cell !important;
}

.u-d-b{
	display: block !important;
}

.u-d-ib{
	display: inline-block !important;
}

.u-d-n{
	display: none !important;
}

/* float - utility
--------------------------------------------------------- */
.u-fl-l{
	float: left !important;
}

.u-fl-r{
	float: right !important;
}

/* font-size - utility
--------------------------------------------------------- */
.u-fz-10{
	font-size: 10px !important;
}

.u-fz-12{
	font-size: 12px !important;
}

.u-fz-14{
	font-size: 14px !important;
}

.u-fz-16{
	font-size: 16px !important;
}

.u-fz-18{
	font-size: 18px !important;
}

.u-fz-20{
	font-size: 20px !important;
}

.u-fz-22{
	font-size: 22px !important;
}

.u-fz-24{
	font-size: 24px !important;
}

.u-fz-26{
	font-size: 26px !important;
}

/* line-clamp - utility
--------------------------------------------------------- */
.u-lc{
	display:         box;
	display: -webkit-box;
	overflow: hidden;

	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* margin - utility
--------------------------------------------------------- */
/* auto margin */
.u-m-c{
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Top margin */
.u-mt-0{
	margin-top: 0 !important;
}

.u-mt-8{
	margin-top: 8px !important;
}

.u-mt-16{
	margin-top: 16px !important;
}

.u-mt-24{
	margin-top: 24px !important;
}

.u-mt-32{
	margin-top: 32px !important;
}

.u-mt-40{
	margin-top: 40px !important;
}

.u-mt-48{
	margin-top: 48px !important;
}

.u-mt-56{
	margin-top: 56px !important;
}

.u-mt-64{
	margin-top: 64px !important;
}

/* Right margin */
.u-mr-0{
	margin-right: 0 !important;
}

.u-mr-8{
	margin-right: 8px !important;
}

.u-mr-16{
	margin-right: 16px !important;
}

.u-mr-24{
	margin-right: 24px !important;
}

.u-mr-32{
	margin-right: 32px !important;
}

.u-mr-40{
	margin-right: 40px !important;
}

.u-mr-48{
	margin-right: 48px !important;
}

.u-mr-56{
	margin-right: 56px !important;
}

.u-mr-64{
	margin-right: 64px !important;
}

/* Bottom margin */
.u-mb-0{
	margin-bottom: 0 !important;
}

.u-mb-8{
	margin-bottom: 8px !important;
}

.u-mb-16{
	margin-bottom: 16px !important;
}

.u-mb-24{
	margin-bottom: 24px !important;
}

.u-mb-32{
	margin-bottom: 32px !important;
}

.u-mb-40{
	margin-bottom: 40px !important;
}

.u-mb-48{
	margin-bottom: 48px !important;
}

.u-mb-56{
	margin-bottom: 56px !important;
}

.u-mb-64{
	margin-bottom: 64px !important;
}

/* Left margin */
.u-ml-0{
	margin-left: 0 !important;
}

.u-ml-8{
	margin-left: 8px !important;
}

.u-ml-16{
	margin-left: 16px !important;
}

.u-ml-24{
	margin-left: 24px !important;
}

.u-ml-32{
	margin-left: 32px !important;
}

.u-ml-40{
	margin-left: 40px !important;
}

.u-ml-48{
	margin-left: 48px !important;
}

.u-ml-56{
	margin-left: 56px !important;
}

.u-ml-64{
	margin-left: 64px !important;
}

/* misc - utility
--------------------------------------------------------- */
.u-ws-nowrap{
	white-space: nowrap;
}

.u-mx-img{
	max-width: 100%;
}

.u-tx-inside{
	margin-left: 1em;
	text-indent: -1em;
}

/* padding - utility
--------------------------------------------------------- */
/* Top padding */
.u-pt-0{
	margin-top: 0 !important;
}

.u-pt-8{
	margin-top: 8px !important;
}

.u-pt-16{
	margin-top: 16px !important;
}

.u-pt-24{
	margin-top: 24px !important;
}

.u-pt-32{
	margin-top: 32px !important;
}

.u-pt-40{
	margin-top: 40px !important;
}

.u-pt-48{
	margin-top: 48px !important;
}

.u-pt-56{
	margin-top: 56px !important;
}

.u-pt-64{
	margin-top: 64px !important;
}

/* Right padding */
.u-pr-0{
	padding-right: 0 !important;
}

.u-pr-8{
	padding-right: 8px !important;
}

.u-pr-16{
	padding-right: 16px !important;
}

.u-pr-24{
	padding-right: 24px !important;
}

.u-pr-32{
	padding-right: 32px !important;
}

.u-pr-40{
	padding-right: 40px !important;
}

.u-pr-48{
	padding-right: 48px !important;
}

.u-pr-56{
	padding-right: 56px !important;
}

.u-pr-64{
	padding-right: 64px !important;
}

/* Bottom padding */
.u-pb-0{
	padding-bottom: 0 !important;
}

.u-pb-8{
	padding-bottom: 8px !important;
}

.u-pb-16{
	padding-bottom: 16px !important;
}

.u-pb-24{
	padding-bottom: 24px !important;
}

.u-pb-32{
	padding-bottom: 32px !important;
}

.u-pb-40{
	padding-bottom: 40px !important;
}

.u-pb-48{
	padding-bottom: 48px !important;
}

.u-pb-56{
	padding-bottom: 56px !important;
}

.u-pb-64{
	padding-bottom: 64px !important;
}

/* Left padding */
.u-pl-0{
	padding-left: 0 !important;
}

.u-pl-8{
	padding-left: 8px !important;
}

.u-pl-16{
	padding-left: 16px !important;
}

.u-pl-24{
	padding-left: 24px !important;
}

.u-pl-32{
	padding-left: 32px !important;
}

.u-pl-40{
	padding-left: 40px !important;
}

.u-pl-48{
	padding-left: 48px !important;
}

.u-pl-56{
	padding-left: 56px !important;
}

.u-pl-64{
	padding-left: 64px !important;
}

/* position - utility
--------------------------------------------------------- */
.u-pos-a{
	position: absolute !important;
}

.u-pos-r{
	position: relative !important;
}

/* text-align - utility
--------------------------------------------------------- */
.u-ta-l{
	text-align: left !important;
}

.u-ta-c{
	text-align: center !important;
}

.u-ta-r{
	text-align: right !important;
}

/* text-decoration - utility
--------------------------------------------------------- */
.u-fw-n{
	font-weight: normal !important;
}

.u-fw-b{
	font-weight: bold !important;
}

.u-td-u{
	text-decoration: underline !important;
}

/* text-truncate - utility
--------------------------------------------------------- */
.u-tt{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	/* for IE 8/9 */
}

/* width - utility
--------------------------------------------------------- */
.u-w-auto{
	width: auto !important;
}

.u-maw-full{
	max-width: 100% !important;
}

.u-maw-half{
	max-width: 50% !important;
}

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ