Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目 | css

BEM派かOOCSS派か、チェックリストを作ってみた

CSS命名規則とは

CSS命名規則とは、CSSでクラス名や、id名をつけるときの規則のことです。この規則を設けることには以下のメリットがあると思われます。

  1. 予期せぬ、クラス名のバッティングを防ぐ
  2. 複数人で開発をする際にそのクラスが果たす役割を理解させやすい

世の中には有名なCSSの命名規則がいくつかあります。今回はその中でも、BEMOOCSSに注目しました。

BEM

BEMとは、Block Element Modifierの略です。
それぞれ以下の意味を持っています。

  • Block 要素を構成するもととなる要素
  • Element ブロックの中の要素
  • Modifier BlockやElementの基本状態から変化した状態

そして、BEM記法では、以下のようにCSSのクラスを命名します。
Block__Element--Modifier

例えば、Boxという要素の中のItemという要素で状態が、dangerの場合は
Box__item--modifierとクラスを指定します。
構成するBlockのクラス名がそれぞれ別々なので必ず名前が衝突しないという命名規則です。また、クラス名から用意にどの位置に属する要素なのか推察できるように作ることが出来るのも魅力の1つです。

OOCSS

Object Oriented CSSの略で、オブジェクト指向をもったCSSの書き方です。
例えば、Boxクラスから角丸のBoxクラスを新たに作る場合は以下のような記述ができますね?

<style>
.box{
    width:100px;
    height:100px;
    margin:10px;
    padding:5px;
}
.box-rounded{
    border-radius:5px;
}
</style>
<div class="box box-rounded"></div>

この場合、box box-roundedは、boxクラスを継承して、新たに角を丸くする機能が追加されたと考えることができます。
このように、HTML側でクラスを追加していくことによってデザインをしていく印象があります。メリットとしては、HTMLからでもどのようなデザインが適応されているのかを判断しやすいというところがあるのではないでしょうか?

チェックリスト

以上をふまえまして、OOCSS派か、BEM派かを判定するチェックリストを作ってみました。
以下のチェックリストに当てはまる場合はマル、当てはまらない場合はバツをつけていってください。
その結果、オススメされた回数が多い方があなたにおすすめのCSS命名規則です

  1. 継承の考え方が好き
  2. レゴが好き
  3. 暗記が得意
  4. クラス名が長いのは気にしない
  5. HTMLである程度形を作りたい
  6. クラス名にもセマンティックを意識したい
  7. scssよりstylus派

1.継承の考え方が好き

この考え方が好きな人は、プログラミング言語のオブジェクト指向の概念を取り入れた、OOCSSがおすすめです。

2.レゴが好き

クラスを組み合わせてレゴブロックのようにコンテンツを作っていけるOOCSSがおすすめです

3.暗記が得意

暗記が苦手な人にはBEMがおすすめです。BEMはその要素の位置、状態によって自然とクラスの名前が決まってくるからです。

4.クラス名が長いのは気にしない

クラス名が長いことが嫌いなあなたにはOOCSSがオススメです。なぜならBEMでは、クラス名がとても長くなる場合が考えられるからです。
例) .sidebar__list__title--active

5.HTMLである程度形を作りたい

これは少し分かりづらいのですが、例えば

<div class="box box-rounded float-right"></div>

このように、クラス名からその要素の形を作っていくのが好きという方に当てはまります。
この人にはOOCSSがおすすめです。
BEMはクラスごとにその都度、スタイルを書いていくためです。
BEMでは状態の変化を作る場合はModifierといってハイフンを二つ繋げる記述方法をします。

6.HTMLにもセマンティックを意識したい

これも少し分かりづらいですが、セマンティックとはすなわち意味のことです。例えば、本文の見出し2と言いたい場合は、.main__h2とクラスを指定するかもしれません。こういう記述方法が好きな方にはBEMがおすすめです。

7.SCSSよりもStylus派

すみません。ここはCSSプリプロセッサをご存知の方のみ読んでください。
Stylus派の方にはBEMがおすすめです。
なぜなら、下のソースのようにかなりBEM記法に特化した記述が可能だからです。

Stylus

.block 
  &__element
    height:100px;

出力結果

.block {
}
.block__element{
  height:100px;
}

結論

さぁ、あなたはBEM派でしたか、OOCSS派でしたか?
社員の人と話したのですが、案件のモックアップのようなページが用意されているのならOOCSSだし、納期によっても使う記法は変わって来るみたいです。
一概に自分が何派と決めつけずに、色んな記法を知っておくといいですね。


CSSだけでスプライトシートを動かしてみよう

今回は上のようにキャラクターをCSSだけで動かしてみました
ChromeとSafariで動作を確認済みです
意外に簡単で、keyframesというものを使います。

CSS

.chara{
	width:32px;
	height:32px;
	background: url(http://usui.moo.jp/graphics/rpg_sozai/chadot/$Actor4.png) no-repeat fixed;
	-webkit-animation: play .5s steps(3) infinite;
}

@-webkit-keyframes play{
	from{background-position: 0px 0px}
	to{background-position:-96px 0px}
}

HTML

<div class="chara"></div>

画像


こちらの画像は臼井の会 RPGツクール素材支部からお借りしています。

解説

keyframesで、開始時の背景の位置、終了時の背景の位置を設定します。
steps(3)でアニメーションを動作させるためのに必要なステップ数を3にします。
-96 を 3で割れば-32なので,毎ステップごとに-32pxずつ、背景位置がずれていきます。そして、infiniteでそれをループします。そうすることでアニメーションがかかっているようにみえるんですね。

こちらのアニメーションも参考になるかもしれません



タブを作ってみた

まずはDEMOをみてください

別のタブを押すと、中のコンテンツが切り替わると思います

  • 1
  • 2

Tab Content 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab Content 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<ul class="cs-tab">
    <li class="cs-tab_item cs-tab_item-primary active" data-toggle="showTab" data-target="#content1">1</li>
    <li class="cs-tab_item cs-tab_item-default" data-toggle="showTab" data-target="#content2">2</li>
</ul>
<div class="cs-tabContainer cs-tabContainer-primary active" id="content1">
    <section class="cs-tabContainer_content">
    	<h1>Tab Content 1</h1>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
</div>
<div class="cs-tabContainer cs-tabContainer-default" id="content2">
    <section class="cs-tabContainer_content">
    	<h1>Tab Content 2</h1>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
</div>

JavaScript

$('[data-toggle="showTab"]').click(function(){
	$(this).addClass("active");
	$(this).siblings('.cs-tab_item').removeClass('active');
	var target = $(this).data("target");
	$(target).siblings('.cs-tabContainer').removeClass('active');
	$(target).addClass("active");
});

処理的には、まず、タブが押された瞬間に押されたタブにactiveというクラスを付与して、タブの色を変えるようにしています。
そして、jQueryのsiblingsメソッドで、兄弟クラス(同じタブ)を見つけ出し、activeクラスを削除して、色をもとに戻しています。
tabContainer(中のコンテンツ)にも同様の処理をしています。
ちなみに、HTMLで、data-*=~と属性を追加しておくと、jQueryで$("セレクタ").data("*")でその属性の値を拾うことができます


IE8で画像をレスポンシブにする方法

IE8ではBootstrapのimg-responsiveが効かなくて、画面を狭めた時に、高さが変化しない。
ちなみに、img-responsiveにソースは下記である

.img-responsive{
    max-width:100%;
    height:auto;
}

StackOverflowで答えをみつけた


ソースにwidth:inheritを加えると、IE8でもimg-responsiveが使えます。
IE7以下は知りませんww
念のためソースを書いておきます

.img-responsive{
    width:inherit;
    max-width:100%;
    height:auto;
}

IEのサポートは大変ですがお互い頑張りましょう。


CSSのflexboxを使い、要素の並び順を変更してみる

こんにちは。突然ですが、flexboxってご存知ですか?その名の通り、幅を変幻自在に調整できるとてもフレキシブルなボックスで、cssのdisplayのプロパティの1つです。
しかし、flexboxは幅だけではなく、並び順も変えれたりするんですよ。
今回はその並び順に着目したデモを作ってみました。
display:flexに指定された、子要素にorderのプロパティを追加していくだけです。
一番目に表示したければ、order:1となります。

デモ

今回はそのflexboxの表示順を変えられる機能を利用してちょっとした、グリッドシステムを作ってみました。
グリッド幅で表示順と、画面に対する幅が変わります。
画面を縮めてみてください

<div class="cs_row">
    <div id="a" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-1 cs_col-xs-order-2">
    	縮めると2番目に来ます
    </div>
    <div id="b" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-2 cs_col-xs-order-1">
    	縮めると1番目に来ます
    </div>
    <div id="c" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-3 cs_col-xs-order-4">
    	縮めると4番目に来ます
    </div>
    <div id="d" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-4 cs_col-xs-order-3">
    	縮めると3番目に来ます
    </div>
</div>
縮めると2番目に来ます
縮めると1番目に来ます
縮めると4番目に来ます
縮めると3番目に来ます

ソースコード

1200px、962px、768pxごとにブレイクポイントを設けています。

長くてすみません。
グリッドシステムの作り方は、bootstrapを参考にしました。

.cs_row{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;

	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	-ms-flex-direction:row;
	-o-flex-direction:row;
	flex-direction:row;

	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;

	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
/*スマートフォンサイズ*/
.cs_col-xs-12 {
  width: 100%;
}
.cs_ol-xs-11 {
  width: 91.66666667%;
}
.cs_col-xs-10 {
  width: 83.33333333%;
}
.cs_col-xs-9 {
  width: 75%;
}
.cs_col-xs-8 {
  width: 66.66666667%;
}
.cs_col-xs-7 {
  width: 58.33333333%;
}
.cs_col-xs-6 {
  width: 50%;
}
.cs_col-xs-5 {
  width: 41.66666667%;
}
.cs_col-xs-4 {
  width: 33.33333333%;
}
.cs_col-xs-3 {
  width: 25%;
}
.cs_col-xs-2 {
  width: 16.66666667%;
}
.cs_col-xs-1 {
  width: 8.33333333%;
}
.cs_col-xs-order-1{
	order:1;
}
.cs_col-xs-order-2{
	order:2;
}
.cs_col-xs-order-3{
	order:3;
}
.cs_col-xs-order-4{
	order:4;
}
.cs_col-xs-order-5{
	order:5;
}
.cs_col-xs-order-6{
	order:6;
}
.cs_col-xs-order-7{
	order:7;
}
.cs_col-xs-order-8{
	order:8;
}
.cs_col-xs-order-9{
	order:9;
}
.cs_col-xs-order-10{
	order:10;
}
.cs_col-xs-order-11{
	order:11;
}
.cs_col-xs-order-12{
	order:12;
}

@media (min-width: 768px) {
	.cs_col-sm-12 {
	  width: 100%;
	}
	.cs_col-sm-11 {
	  width: 91.66666667%;
	}
	.cs_col-sm-10 {
	  width: 83.33333333%;
	}
	.cs_col-sm-9 {
	  width: 75%;
	}
	.cs_col-sm-8 {
	  width: 66.66666667%;
	}
	.cs_col-sm-7 {
	  width: 58.33333333%;
	}
	.cs_col-sm-6 {
	  width: 50%;
	}
	.cs_col-sm-5 {
	  width: 41.66666667%;
	}
	.cs_col-sm-4 {
	  width: 33.33333333%;
	}
	.cs_col-sm-3 {
	  width: 25%;
	}
	.cs_col-sm-2 {
	  width: 16.66666667%;
	}
	.cs_col-sm-1 {
	  width: 8.33333333%;
	}
	.cs_col-sm-order-1{
		order:1;
	}
	.cs_col-sm-order-2{
		order:2;
	}
	.cs_col-sm-order-3{
		order:3;
	}
	.cs_col-sm-order-4{
		order:4;
	}
	.cs_col-sm-order-5{
		order:5;
	}
	.cs_col-sm-order-6{
		order:6;
	}
	.cs_col-sm-order-7{
		order:7;
	}
	.cs_col-sm-order-8{
		order:8;
	}
	.cs_col-sm-order-9{
		order:9;
	}
	.cs_col-sm-order-10{
		order:10;
	}
	.cs_col-sm-order-11{
		order:11;
	}
	.cs_col-sm-order-12{
		order:12;
	}
}

@media (min-width: 992px) {
	.cs_col-md-12 {
	  width: 100%;
	}
	.cs_col-md-11 {
	  width: 91.66666667%;
	}
	.cs_col-md-10 {
	  width: 83.33333333%;
	}
	.cs_col-md-9 {
	  width: 75%;
	}
	.cs_col-md-8 {
	  width: 66.66666667%;
	}
	.cs_col-md-7 {
	  width: 58.33333333%;
	}
	.cs_col-md-6 {
	  width: 50%;
	}
	.cs_col-md-5 {
	  width: 41.66666667%;
	}
	.cs_col-md-4 {
	  width: 33.33333333%;
	}
	.cs_col-md-3 {
	  width: 25%;
	}
	.cs_col-md-2 {
	  width: 16.66666667%;
	}
	.cs_col-md-1 {
	  width: 8.33333333%;
	}
	.cs_col-md-order-1{
		order:1;
	}
	.cs_col-md-order-2{
		order:2;
	}
	.cs_col-md-order-3{
		order:3;
	}
	.cs_col-md-order-4{
		order:4;
	}
	.cs_col-md-order-5{
		order:5;
	}
	.cs_col-md-order-6{
		order:6;
	}
	.cs_col-md-order-7{
		order:7;
	}
	.cs_col-md-order-8{
		order:8;
	}
	.cs_col-md-order-9{
		order:9;
	}
	.cs_col-md-order-10{
		order:10;
	}
	.cs_col-md-order-11{
		order:11;
	}
	.cs_col-md-order-12{
		order:12;
	}
}

@media (min-width: 1200px) {
	.cs_col-lg-12 {
	  width: 100%;
	}
	.cs_col-lg-11 {
	  width: 91.66666667%;
	}
	.cs_col-lg-10 {
	  width: 83.33333333%;
	}
	.cs_col-lg-9 {
	  width: 75%;
	}
	.cs_col-lg-8 {
	  width: 66.66666667%;
	}
	.cs_col-lg-7 {
	  width: 58.33333333%;
	}
	.cs_col-lg-6 {
	  width: 50%;
	}
	.cs_col-lg-5 {
	  width: 41.66666667%;
	}
	.cs_col-lg-4 {
	  width: 33.33333333%;
	}
	.cs_col-lg-3 {
	  width: 25%;
	}
	.cs_col-lg-2 {
	  width: 16.66666667%;
	}
	.cs_col-lg-1 {
	  width: 8.33333333%;
	}
	.cs_col-lg-order-1{
		order:1;
	}
	.cs_col-lg-order-2{
		order:2;
	}
	.cs_col-lg-order-3{
		order:3;
	}
	.cs_col-lg-order-4{
		order:4;
	}
	.cs_col-lg-order-5{
		order:5;
	}
	.cs_col-lg-order-6{
		order:6;
	}
	.cs_col-lg-order-7{
		order:7;
	}
	.cs_col-lg-order-8{
		order:8;
	}
	.cs_col-lg-order-9{
		order:9;
	}
	.cs_col-lg-order-10{
		order:10;
	}
	.cs_col-lg-order-11{
		order:11;
	}
	.cs_col-lg-order-12{
		order:12;
	}
}

参考になるサイト



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド