copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/01/30

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

Written by Shunsuke Okoshi

  • CSS

INDEX

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

    早速ですが、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サイト」を作る人なのかっていうのもポイントなのかもしれないですね。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View