Recruit

CSSフレームワークとスタイルガイド、CSS記法まとめ（2018/1/30時点）

Blog

Shunsuke Okoshi

Lead Engineer / Director

「フロントエンド開発者」の終焉を読んでモヤモヤしているオオコシです。

早速ですが、Bootstrapのv4が正式版になったということで、他のCSSフレームワークやスタイルガイド、CSS記法なんかをまとめてみました。

※Bootstrap v4についてはコリスさんの記事が良いと思います。

フレームワーク

■Semantic UI

執筆時のバージョンは2.2.154（2018/1/29）。
gulp/LESSで、classの命名ルールは単語をクラスとして考えるタイプ。

カードのサンプルコード

<div class="ui card">
  <div class="image"><img src="/images/avatar2/large/kristy.png"></div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta"><span class="date">Joined in 2013</span></div>
    <div class="description">Kristy is an art director living in New York.</div>
  </div>
  <div class="extra content">
    <a><i class="user icon"></i>22 Friends</a>
  </div>
</div>

※Semantic UIのトップに「Concise HTML」という見出しがあるんですが、Concise CSSというのもあるようです。line-heightに相当するlhという単位を独自に実装しているみたいです。こちらはSASS。これはこれでちょっと気になります。

■Material Design Lite

WebStarterKitにも同梱されているMaterial DesignをベースとしたGoogle製CSSフレームワーク。SASS。接頭辞が.mdl-のBEM記法。
現在v1.3.0（2016/12/21）。

カードのサンプルコード

<div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>

ちなみにWebStarterKit、開発は続いているようですがGoogleのサイトではサポート終了となっていました。

■Materialize

MDL同様Material DesignをベースとしたCSSフレームワーク。SASS。こちらは接頭辞はなく、Bootstrapのような短いclassの組み合わせ。
現在v1.0.0-alpha.3（2017/12/30）

カードのサンプルコード

<div class="row">
    <div class="col s12 m6">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title">Card Title</span>
                <p>I am a very simple card. I am good at containing small bits of information.
                I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
            </div>
        </div>
    </div>
</div>

■UIkit

軽量なフレームワーク。SASS/LESSどちらも使えます。
接頭辞は.uk-。
現在 Version 3.0.0-beta.38（2018/1/12）

カードのサンプルコード

<div class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
    <h3 class="uk-card-title">Default</h3>
    <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Vue.jsと組み合わせたVuikitというのもあるようです。

■ZURB Foundation

現在v6.4.3（2017/8/19）。SASSベース。
ダウンロード時にグリッドのタイプが選べます。（XY/float/Flexbox）
PaniniというHandlebars形式のテンプレートエンジンも搭載。

カードのサンプルコード

<div class="card" style="width: 300px;">
  <div class="card-divider">
    This is a header
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <h4>This is a card.</h4>
    <p>It has an easy to override visual style, and is appropriately subdued.</p>
  </div>
</div>

Foundation for EmailsというHTMLメールのテンプレートもあります。

■PureCSS

米Yahooの軽量なCSSフレームワーク。
現在v1.0.0（2017/6/17）。

カードはないのでグリッドのサンプルコード

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

Styleguide

■Primer

Githubのスタイルガイド。
サンプルで使っているのはStorybookですが、DevTool使う前提ならこれで十分かも。

■Google Styleguide

Googleの各種StyleGuideです。

■Airbnb

AirbnbのStyleguide（JS/CSS/Ruby）。

■Trello

TrelloのCSS Styleguide。
基本BEMだけど、Modifierは.mod-で追加。
jsに関係するものは.js-の接頭辞がつくタイプ。

CSS設計/命名規則

■BEM

Block Element ModifierのBEMです。
現在は公式でもMindBEMdingの __（アンダーバー×2） --（ハイフン×2） の記法に統一された模様。
たまーに.block__elem__elem1__elem2__elem3みたいなElementだらけの人がいますが、BEM使う意味ないのでElementは1個でお願いします。

■FLOCSS

Foundation/Layout/Objectの3レイヤーでMindBEMdingsなどを取り入れた考えかた。

■ECSS

極端な言い方をすると共通化とか考えずに分離する！というニュアンスだと思ってます。
実案件だとこのケースが多いかも。

■APBCSS

Atomic Designの考え方に基づいたCSS設計。
設計段階からデザイナーとも考え方を共有していかないと難しい部分はあるとのこと。

日本ではAbemaTVがAtomic Design採用しているようです。

関係ないけどAtomic Designを提唱してるBrad Frostさん、This is Responsiveの作者でもあったんですね。

■RSCSS

今回調べていて新たに知ったもの。
ハイフンでつなげた2単語以上でコンポーネントを作って、BEMでいうところのElementsを1単語で子セレクタとし、Modifier相当のvariantsはハイフンを接頭辞に、Helperという上書き系はアンダーバーを接頭辞につけるというもの。

.search-form {
  > .button { /* ... */ }
  > .field { /* ... */ }
  > .label { /* ... */ }

  // variants
  &.-small { /* ... */ }
  &.-wide { /* ... */ }
}

定形に収まるデザインが少ないのでフレームワーク系はあまり使ってきていないんですが、改めて見てみると、たまには使うのもいいかもなーという印象でした。使ってない方が珍しいとは思うのでこのままいくのもアリな気も…。

CSS記法についてはいろんな思想がありますが、現時点ではBEM（MindBEMding）のModifierだとHTMLコメントと干渉するので、FLOCSSとECSSを混ぜたような感じでやってます。Trelloに近いイメージ。

RSCSSはElementの単語が使いまわせるのは結構いいかもしれないです。
はたまた要素内で完結させることを考えるならPolymerみたくWeb Componentsなのか…

まだまだいろいろ模索中ですが「Webアプリ」を作る人なのか「Webサイト」を作る人なのかっていうのもポイントなのかもしれないですね。

Return back

Recommend

Contact Us