Manage your CSS
with prefixes.

          <div class="ly_header">...</div>  <!-- layout -->
          <div class="ly_main">
              <div class="bl_sectBlock">  <!-- block module -->
                  <h2 class="bl_sectBlock_ttl">PRECSS</h2>
                  <p class="bl_sectBlock_txt hp_mb20">CSS with prefixes.</p>  <!-- helper -->
              </div>
          </div>
          <div class="ly_side">
              <a href="#" class="el_btn">Try PRECSS</a>  <!-- element module -->
              <a href="#" class="el_btn el_btn__blue">Back</a>  <!-- modifier -->
          </div>
          <div class="ly_footer">...</div>
        

OOCSSやSMACSS、BEMの素晴らしさ巧みに取り入れ
更に進化させた強力なモジュール設計。それがPRECSSです。


全てに接頭辞を付加
PRECSSの管理下にあるクラスは、全て種類に応じた接頭辞が付加されます。これにより接頭辞を一目見ただけで役割、スコープ、依存の全てを把握することができます。
もうモジュールの大きさに悩まないでください。

最適化された命名規則
クラス名は全てスネークケースとキャメルケースの混成で構成され、それらの使い分けには明確なルールがあります。
省略語についても指針を示しているため、今までのように悩んだあげく、とても長い名前を付ける必要はもうありません。

親しみやすい設計
PRECSSは全く新しい設計思想ではありません。OOCSSやSMACSS、BEMなど今までの賞賛すべき素晴らしい思想が基になっています。
あなたがモダンな開発者であるほど、PRECSSは親しみやすいものに感じるでしょう。

他種族との共存
明確な独自記法により、あなたが書いたクラスとCMSやCSSフレームワークが出力したクラスを明確に区別することができるでしょう。
全てPRECSSのルールに従わなければならないのではなく、他の者も受け入れる柔軟さがPRECSSにはあります。

≤ コーディングルール
ドキュメントが長いと感じますか?今までのCSSが破綻した原因は、ドキュメントの短さにありました。
コーディングルールのベースになることを目指しているPRECSSは、ときにとても細かい話もします。
誰が書いても、なるべく破綻しないために。

Basics

記法

CSSの記述方法それ自体については、基本的にGoogle HTML/CSS Style GuidePrinciples of writing consistent, idiomatic CSSに則ることを推奨します。

命名規則

PRECSSでは、意図的に記述する全てのクラスに種類に応じた2文字の接頭辞を付加します。
接頭辞及び単語間は全て構造に基づきスネークケースで結合し、1つの構造内に複数の単語がある場合はその部分のみキャメルケースを使用します。
基本的にスタイルのためのID属性は使用せず、全てクラス属性でまかないます。

Not recommended
      
            <div class="bl_img_block">
              <div class="bl_img_block_header">
                ...
              </div>
              <div class="bl_img_block_body">
                ...
              </div>
            </div>
    
Recommended
      
            <div class="bl_imgBlock">
              <div class="bl_imgBlock_header">
                ...
              </div>
              <div class="bl_imgBlock_body">
                ...
              </div>
            </div>
    
汎用的に使用可能な名前
  • _wrapper
  • _inner
  • _header
  • _body
  • _footer

これらは後述する5つのグループいずれにおいても、必要に応じて汎用的に使用することができます。
特に_wrapper_innerにおいては、構造として明確であり、かえって冗長性が増すためその子要素に名前を継承させる必要はありません。

Not recommended
      
            <div class="bl_imgBlock_wrapper">
              <div class="bl_imgBlock_wrapper_inner">
                <div class="bl_imgBlock_wrapper_inner_header">
                  ...
                </div>
              </div>
            </div>
    
Recommended
      
            <div class="bl_imgBlock_wrapper">
              <div class="bl_imgBlock">
                <div class="bl_imgBlock_inner">
                  <div class="bl_imgBlock_header">
                    ...
                  </div>
                </div>
              </div>
            </div>
    

単語を省略する場合

CSSにおけるモジュール設計は非常に素晴らしいアイディアですが、命名が冗長になってしまうのは避けられない問題です。
PRECSSでは特に規則を設けませんが、単語を省略する場合はGoogle HTML/CSS Style Guideに基づくことを推奨します。
また2語以上で1つのまとまりを表す語群は、それぞれの頭文字の大文字のみで表現することも推奨します。ただし、ある程度一般的であったり、連続するパターンがあることが望ましいでしょう。
その他、一般的に使われる語を参考として併せて提示します。

一般的な例
・mainVisual→MV
連続するパターンの例
・northEurope→NE
・northAmerica→NA
・centralSouthAmerica→CSA
よく使われる省略語
セクション系 cat - category col/cl - colomn cont/conts - content(s) lv - level sect - section
単体系 btn - button cf - clearfix img - image lnk - link num - number
txt - text ttl - title      
モディファイア lrg - large l - left rev - reverse r - right sml - small

シリーズを形成する場合

類似しているものは連番を付けて管理することを推奨します。ただし、シリーズを形成する、しないに関わらず1つ目のものには連番を付けません。

Not recommended
      
            <div class="bl_imgBlock1">...</div>
            <div class="bl_imgBlock2">...</div>
            <div class="bl_imgBlock3">...</div>
    
Recommended
      
            <div class="bl_imgBlock">...</div>
            <div class="bl_imgBlock2">...</div>
            <div class="bl_imgBlock3">...</div>
    

Documentation

基本設計

PRECSSは下記の6つのグループから構成されています。
※ソースコードは最低限解説に必要な記述のみを記載しています。

  1. ベース
  2. レイアウト
  3. モジュール
    1. ブロックモジュール
    2. エレメントモジュール
  4. ヘルパー
  5. ユニーク
  6. プログラム
  7. (オリジナル)

1.ベース

接頭辞:なし

ベースはSMACSSと同じように扱います。reset.cssやnormalize.cssによる素地作りの他、サイト全体にまつわるスタイルを要素セレクタに直接指定します。
またPRECSSでは、特定のスコープ内における限定的なベーススタイルの適用も許容します。
例えば「ヘッダー内のリンクは全て白色だが、コンテンツエリア内は青色に統一したい」という場合に、限定的なベーススタイルを使用します。

CSS
      
            .ly_header a {
              color: #fff;
            }
            .ly_body a {
              color: blue;
            }
    

2.レイアウト

接頭辞:ly_

lyはlayoutの略です。ヘッダー、ボディエリア、メインエリア、サイドエリア、フッター等の大きなレイアウトを形成する要素に使用します。

HTML
      
            <header class="ly_header">
              ...
            </header>
            <div class="ly_body">
              <div class="ly_main">
                ...
              </div>
              <div class="ly_side">
                ...
              </div>
            </div>
            <footer class="ly_footer">
              ...
            </footer>
    
CSS
      
            .ly_header {
              background-color: #f4d9d9;
            }
            .ly_body {
              width: 100%
              max-width: 960px;
              margin: 0 auto;
              background-color: #f9ebd1;
            }
            .ly_main {
              float: left;
              width: 68%;
              background-color: #d7f5e0;
            }
            .ly_side {
              float: right;
              width: 30%;
              background-color: #ecefc9;
            }
            .ly_footer {
              background-color: #dbd9e5;
            }
    

3.モジュール

PRECSSでは移植性の高いコードをモジュールとして管理します。

3-1.ブロックモジュール

接頭辞:bl_

blはblockの略です。ブロックモジュール特有の複数の子要素や、後述するエレメントモジュールを内包し、一つの塊として持ち運び可能なモジュール群を形成します。
ブロックモジュールの子要素は基本的に親の名前を継承し、子となるに従いアンダースコアで結合することで構造を明確にします。

HTML
      
              <div class="bl_sectBlock">
                <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>
                <p class="bl_sectBlock_txt">
                  <img class="bl_sectBlock_txt_img" src="">
                  Lorem ipsum...
                </p>
              </div>

              <div class="bl_imgBlock">
                <h3 class="bl_imgBlock_ttl">.bl_imgBlock</h3>
                <p class="bl_imgBlock_img"><img src=""></p>
                <p class="bl_imgBlock_txt">
                  Lorem ipsum...
                </p>
              </div>
    
CSS
      
              .bl_sectBlock {
                padding: 1%;
                margin: 0 0 20px 0;
                border: 1px solid #ccc;
              }
              .bl_sectBlock_ttl {...}
              .bl_sectBlock_txt {...}
              .bl_sectBlock_txt_img {...}

              .bl_imgBlock {
                padding: 1%;
                margin: 0 0 20px 0;
                border: 1px solid #ccc;
                text-align: center;
              }
              .bl_imgBlock_ttl {...}
              .bl_imgBlock_img {
                > img {...}
              }
              .bl_imgBlock_txt {...}
    

PRECSSではSMACSSと同様に、子要素のタグにスタイルを直接指定することを許容します。ただしその際はなるべく子セレクタで指定をすること、divspan等のセマンティックでない要素は独自のクラスを付加することを推奨します。
また、あまり階層が深くなり過ぎるとコードの見通しや詳細度の管理に影響が出る恐れがあるため、ネストは3階層程度までを目処とし、それ以上になりそうな場合は適宜クラスを付加することを推奨します。

HTML
      
                <ul class="bl_circleList">
                  <li>list 1</li>
                  <li>list 2</li>
                </ul>
    
CSS
      
                .bl_circleList {
                  padding-left: 1em;
                  margin: 0 0 20px 0;
                }
                .bl_circleList > li {
                  list-style-type: circle;
                }
    
ブロックモジュールに適用可能なスタイル

注意点として、ブロックモジュールには他の要素に影響を及ぼさないスタイルのみを適用します(margin-top/bottomは例外として直接適用可能)。
他に影響を及ぼすスタイル、即ちfloatwidth等のレイアウトに関わるものは、一層上の親からネストする形でスタイルを適用します。
即ちブロックモジュールの幅の初期値は、なるべく100%であることが望ましく、このことにより高い拡張性と移植性が実現されます。
この挙動については、カラムを持つブロックモジュールを例に考えると理解しやすいでしょう。

1カラムの例

この例ではこれが最小のブロックモジュールであり、レイアウトに関する指定をしないことで単体で使用できるほか、何処へでも移植することが可能です。

HTML
      
                  <div class="bl_imgBlock">
                    <h3 class="bl_imgBlock_ttl">bl_imgBlock</h3>
                    <p class="bl_imgBlock_img"><img src="//goo.gl/7lQK1g"></p>
                    <p class="bl_imgBlock_txt">
                      Lorem ipsum...
                    </p>
                  </div>
    
CSS
      
                  .bl_imgBlock {
                    margin: 0 0 20px 0;
                    border: 1px solid #ccc;
                    text-align: center;
                  }
                  .bl_imgBlock_ttl {
                    font-weight: bold;
                    font-size: 1em;
                  }
                  .bl_imgBlock_img {
                    > img {
                      width: 100%;
                      max-width: 100px;
                    }
                  }
                  .bl_imgBlock_txt {
                    line-height: 1.2;
                  }
    
複数カラムの例

bl_imgUnitという要素でラップすることにより、上記のブロックモジュールを侵すことなく再利用することができます(このときmargin-top/bottomにも変更が必要な場合は、併せて上書きします)。
さらにbl_imgUnit自体が高次のブロックモジュールとなったため、今後はbl_imgUnitを他に移植することも可能となります。
またwidthをカラム数に応じたモディファイアから制御することで、高い拡張性を実現します。

HTML
      
                  <div class="bl_imgUnit bl_imgUnit__col2">
                    <h2 class="el_blName">.bl_imgUnit__col2</h2>
                    <div class="bl_imgBlock">
                      ...
                    </div>
                    <div class="bl_imgBlock">
                      ...
                    </div>
                  </div>

                  <div class="bl_imgUnit bl_imgUnit__col3">
                    <h2 class="el_blName">.bl_imgUnit__col3</h2>
                    <div class="bl_imgBlock">
                      ...
                    </div>
                    <div class="bl_imgBlock">
                      ...
                    </div>
                    <div class="bl_imgBlock">
                      ...
                    </div>
                  </div>
    
CSS
      
                  .bl_imgUnit {
                    margin: 0 0 20px 0;
                    border: 1px solid #ccc;
                    text-align: center;
                    > .bl_imgBlock {
                      display: inline-block;
                      margin: 0 2% 0 0;
                      &:last-child {
                        margin-right: 0;
                      }
                    }
                  }
                  .bl_imgUnit__col2 {
                    > .bl_imgBlock {
                      width: 47%;
                    }
                  }
                  .bl_imgUnit__col3 {
                    > .bl_imgBlock {
                      width: 30%;
                    }
                  }
    

極端な例を示すと、これらをメインエリア・サイドエリアそれぞれに移植するとこのような形になります。

以上のようにブロックモジュールというのは非常に柔軟で、パワフルにコード内を駆け回ることができます。
ただし、その高い移植性を維持するためには高次からのネストとという少し特殊なテクニックが必要で、慣れないうちは苦労するでしょう。
さらに複雑なブロックモジュールの移植については、下部にAdvance Caseとしてまとめたので、そちらをご参照ください。

また下記に、ブロックモジュールを命名する際に役立つ粒度の指針を提供します。
PRECSSにおいてブロックモジュールは非常に重要な役割を担うため、これらの語を省略することは推奨しません。
必ずしもこれらの名前を含まなければならない訳ではありませんが、これらを参考にすることは、あなたがブロックモジュールを自在に操ることを強力に手助けしてくれるでしょう(現実として、Unit以上の大きさを使用することはあまり無いでしょう)。

ブロックモジュールにおける概念・命名の粒度
  • Block - ブロックモジュールの基本単位。そのモジュール特有の複数の子要素や、エレメントモジュールを含む
  • Unit - Blockの集まり
  • Box - Unitの集まり
  • Container - Boxの集まり

3-2.エレメントモジュール

接頭辞:el_

elはelementの略です。ボタンやラベル、見出し等の最小単位のモジュールで、単体で持ち運ぶことが可能です。
命名は極力汎用的なものを推奨します。これはどのようなものがコンテンツとして入ったとしても、名前と内容が乖離しないための措置です。
※ただしサイト内においてスタイルと命名がセマンティックに一致する場合は、その限りではありません(商品やブランドのラベルとテーマカラーが紐付いている場合など)。

類似するスタイルのエレメントモジュールが複数存在する場合は、OOCSSにおけるストラクチャとスキンの考え方を使用します。
個別のスキンは後述するモディファイアで実装します。

Not recommended(HTML)
      
              <!-- 名前が汎用的でない -->
              <div class="bl_sectBlock">
                <h2 class="bl_sectBlock_ttl">.bl_sectBlock
                  <span class="el_label el_label__news">News</span>
                  <span class="el_label el_label__blog">Blog</span>
                </h2>
                ...
              </div>

              <p class="hp_tac">
                <a href="" class="el_btn el_btn__cancel">Cancel</a>
                <a href="" class="el_btn el_btn__submit">Submit</a>
              </p>
    
Recommended(HTML)
      
              <div class="bl_sectBlock">
                <h2 class="bl_sectBlock_ttl">.bl_sectBlock
                  <span class="el_label el_label__red">News</span>
                  <span class="el_label el_label__blue">Blog</span>
                </h2>
                ...
              </div>

              <p class="hp_tac">
                <a href="" class="el_btn el_btn__blue">Cancel</a>
                <a href="" class="el_btn el_btn__orange">Submit</a>
              </p>
    
Recommended(CSS)
      
              .el_label {
                display: inline-block;
                padding: .2em .5em;
                color: #fff;
                &.el_label__red {
                  background-color: #de5b5b;
                }
                &.el_label__blue {
                  background-color: #308EDE;
                }
              }

              .el_btn {
                display: inline-block;
                max-width: 200px;
                padding: .5em 1em;
                margin-bottom: 20px;
                border-radius: 5px;
                color: #fff;
                text-align: center;
                &.el_btn__orange {
                  background-color: #E18700;
                  box-shadow: 0 3px 0 #B85F29;
                }
                &.el_btn__blue {
                  background-color: #308EDE;
                  box-shadow: 0 3px 0 #2572B1;
                }
              }

              .hp_tac {
                text-align: center !important;
              }
    
レイアウトについて

移植性の維持のため、ブロックモジュールと同じくエレメントモジュール自体にレイアウトのためのスタイルを当てることは推奨しません
移植先のモジュールからのネストか、もしくは上記の.hp_tacのように何らかの親要素を使用するのが理想です。(.hp_については次のヘルパーセクションで解説します)
ただし、ブロックモジュールに比べエレメントモジュールはサイト全体でバリエーションに限りがあることが多いため、widthの直接指定、及びモディファイアでサイズのパターンを作成することは十分許容します。
ただし__w250(px)と数値を固定すると、レスポンシブ・ウェブデザインを採用しSPビューになった際に、モディファイアの数値と実際の大きさに矛盾が発生すると破綻への第一歩となることは留意しておいてください。
状況にもよりますが、可能であればinline-blockを使用し大きさが可変するようにしておくと応用が効くでしょう。
もちろん移植先からのネスト時に都度widthを調整することも可能で、名前に数値が入らないので破綻のリスクも軽減します。

Recommended(HTML)
      
                <header class="ly_header cf">
                  <!-- 移植先からのネスト -->
                  <a href="" class="el_btn el_btn__orange">.el_btn__orange<br>(nested)</a>
                </header>

                <div class="ly_main">
                  <!-- モディファイア -->
                  <a href="" class="el_btn el_btn__w100p el_btn__orange">.el_btn__w100p</a>
                </div>
    
Recommended(CSS)
      
                .el_btn {
                  //移植先からのネスト
                  .ly_header > & {
                    float: right;
                    margin: 0 20px 0 0;
                  }
                  //モディファイア
                  &.el_btn__w100p {
                    width: 100%;
                    max-width: 100%;
                  }
                }
    

3-3.モディファイア

既に何度か言及していますが、

  • 見た目が変わる
  • 大きさが変わる(主にエレメントモジュール、ブロックモジュールの子要素が対象)
  • 一定の規則に従ってスタイルが変わる(カラム等)

場合はモディファイアによる上書きをPRECSSでは推奨します。
多くはモジュールグループにおいて使用されますが、状況によってはレイアウトグループ等に使用することももちろん可能です。
注意点としてモディファイアでスタイルを上書きする際は、基本的に複数クラスで上書きし、詳細度を高めます。「スタイルを上書きする」ということは意図的なアクションであり、であればCSSの読み込み順でスタイルに変化が出てしまうのは好ましくありません。

エレメントモジュールの例
Not recommended
      
                  .el_btn__orange {
                    background-color: orange;
                  }
                  .el_btn {
                    background-color: white;
                  }
                  //適用されるカラー:white
                  //何らかの都合でスタイルの読み込み順が変わったとき、モディファイアが機能しなくなってしまう
    
Recommended
      
                  .el_btn {
                    background-color: white;
                  }
                  .el_btn.el_btn__orange {
                    background-color: orange;
                  }
    
ブロックモジュールの例

ブロックモジュールにおいて子要素にモディファイアによる変更を適用する際、

  • 特定の子要素のみにモディファイアを適用し、スタイルを上書きする
  • ブロックモジュール自体にモディファイアを適用し、モディファイアからのネストで子要素のスタイルを上書きする

の2通りの方法があげられます。
前者の場合はセオリー通り複数クラス指定をすることにより、後者の場合はモディファイアからのネストで子要素を指定することにより詳細度を高めます。

HTML
      
                <div class="bl_sectBlock">
                  <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>

                  <p class="bl_sectBlock_txt cf">
                    <!-- 元のモジュール -->
                    <img class="bl_sectBlock_txt_img">
                    Lorem ipsum...
                  </p>

                  <p class="bl_sectBlock_txt cf">
                    <!-- 一部のみの挙動が変わる例 -->
                    <img class="bl_sectBlock_txt_img bl_sectBlock_txt_img__rev">
                    Lorem ipsum...
                  </p>
                </div>

                <!-- 子要素複数に対してスタイルを上書きする例 -->
                <div class="bl_sectBlock bl_sectBlock__sml">
                  <h3 class="bl_sectBlock_ttl">.bl_sectBlock__sml</h3>
                  <p class="bl_sectBlock_txt cf">
                    <img class="bl_sectBlock_txt_img">
                    Lorem ipsum...
                  </p>
                </div>
    
CSS
      
                //元のモジュール
                .bl_sectBlock_txt_img {
                  float: left;
                  margin: 0 10px 10px 0;
                  //一部のみの挙動が変わる例
                  &.bl_sectBlock_txt_img__rev {
                    float: right;
                    margin: 0 0 10px 10px;
                  }
                }

                //子要素複数に対してスタイルを上書きする例
                .bl_sectBlock {
                  &.bl_sectBlock__sml {
                    > .bl_sectBlock_ttl {
                      font-size: .8em;
                    }
                    > .bl_sectBlock_txt {
                      font-size: .5em;
                    }
                    .bl_sectBlock_txt_img {
                      width: 5%;
                    }
                  }
                }
    

繰り返しになりますが、ブロックモジュールそれ自体の大きさの変化に対して、モディファイアを付加することはあまり推奨しません。なぜなら大きさを固定にしてしまった場合、「その大きさが入るのか」というのは移植先の大きさ(言い換えればコンテキスト)に左右され、ブロックモジュールはエレメントモジュールに比べバリエーションが不定になりがちだからです。
ブロックモジュールは大きめに使われることが多いので、レスポンシブ時の破綻のリスクも、エレメントモジュールに比べ当然高いです。
ブロックモジュールが他所のモジュール内にネストされる場合は、モディファイアではなく移植先のモジュールからのネストでスタイルを上書きすることを推奨します。(詳しくはAdvance Caseにて解説しています)

4.ヘルパー

接頭辞:hp_

hpはhelperの略です。基本的に1つのスタイルのみで、意図的な上書きのため!importantを付加します。命名規則に関しては、Emmetのチートシートに準ずることを推奨し、その他の規則として

  • px以外の単位の場合は分かりやすい頭文字で表現
  • 小数点はアンダースコアで表現
  • ネガティブな値はショートハンドを大文字で表現
  • ショートハンドの後に文字列が続く場合はキャメルケースで表現

とします(これらの規則はモディファイアの命名にも概ね有効です)。
ただし1つの要素に対しヘルパーを多用し過ぎると、style属性を使用していることと変わりが無くなってしまうので、ヘルパーが3つ以上になった場合はモジュール化を検討するべきでしょう

基本的に1スタイルのみのため、outputStyle:compactを許容します。 また挙動が限定的でかつ明確な場合のみ、1つ以上のスタイルであってもヘルパーで処理することが可能です。

CSS
      
              .hp_db { display: block !important; }
              .hp_tac { text-align: center !important; }
              .hp_w400 { width: 400px !important; }
              .hp_w50p { width: 50% !important; }
              .hp_lh1_5 { line-height: 1.5 !important; }
              .hp_MT1e { margin-top: -1em !important; }
              .hp_bgcWhite { background-color: #fff !important; }

              //1つ以上のスタイルの例
              .hp_centering {
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
              }
    
clearfixについて

PRECSSではfloatの解除にclearfixを推奨します。これは、floatの解除のためだけに本来の目的とは関係の無いスタイルを記述することを忌避するためです。
特にoverflowは本来の目的で使われる場合もあり、CSSコードだけ見たときに、それがfloatの解除のためなのか、本来の目的のためなのかわからない、といった状況は好ましくありません。
またPRECSSのルールに当てはめればclearfixもヘルパーとして定義することが可能ですが、clearfixはそれ自体が充分に一般的であるため、接頭辞を付ける必要はありません。

5.ユニーク

ある1ページでしか使用されていないことを明示するグループです。
そのページでしか使われていないため、改修や運用の際に影響範囲を気にせずにスタイルを編集してよい目印になっています。
モジュールの大きさも自由です。小さくても大きくてもかまいせん。

例えばPRECSSの扉ページのような特別なページに使用するのもいいですし、通常のページ内でもモジュール設計から外れる場所に使用するのもいいでしょう。
つまりユニークグループは、あらゆるイレギュラーのための万能な回避策です。
何か迷ったら、とりあえずユニークグループを使ってください。いつでも誰でも、すぐに手直ししてよい目印です。
ただし濫用し過ぎると拡張性に欠けるため、あくまでイレギュラーのための措置であることを覚えておいてください。

またCSSには、どのページで使用しているかコメントを残しておくとよりよいでしょう。

接頭辞:un_

HTML
      
              <div class="un_siteRoot_wrapper">
                <section class="un_siteRoot">
                  <p class="un_siteRoot_logo"><img src="images/icon.svg" alt="PRECSS logo"></p>
                  <h1 class="un_siteRoot_ttl">PRECSS</h1>
                  <p class="un_siteRoot_link"><span class="is_deactive">English</span> / <a href="/ja/">日本語</a></p>
                </section>
              </div>
    
Recommended(CSS)
      
              //トップページに使用
              .un_siteRoot_wrapper {
                position: relative;
                top: 33vh;
                text-align: center;
              }
              .un_siteRoot {
                display: inline-block;
              }...
    

6.プログラム

PRECSSではJavaScript等のプログラムで要素にタッチする際、極力専用のクラスを付加しCSS用のクラスとは分離することを推奨します。

接頭辞:js_

JavaScriptにて要素を取得するためのクラスです。

接頭辞:is_

要素の状態を管理するためのクラスです。上書きはモディファイアの場合と同じく複数クラスで行う他、必ず適用されなければならないスタイルであるため、!importantの使用も許容します。
状態の命名はis_activeとシンプルに記述することが可能ですが、他の箇所にも影響を及ぼさないよう必ず複数クラスでスタイルを適用する必要があります。
※対応ブラウザや状況によっては、JavaScript用のクラスではなく、カスタムデータ属性を付加することも推奨します。

HTML
      
              <div class="bl_sectBlock js_accordion">
                <h3 class="bl_sectBlock_ttl js_accordion_head">Title Here</h3>
                <p class="bl_sectBlock_txt js_accordion_body is_active">
                  Lorem ipsum...
                </p>
              </div>
    
Not recommended(CSS)
      
              .js_accordion_body {
                display: none;
              }
              //他の箇所にまで影響を及ぼす可能性がある
              .is_active {
                display: block;
              }
    
Recommended(CSS)
      
              .js_accordion_body {
                display: none;
              }
              .js_accordion_body.is_active {
                display: block;
              }
    

7.オリジナル

その他、サイトの構築思想に応じて柔軟に接頭辞を追加できるのがPRECSSの特徴です。
例えばオリジナルのグリッドレイアウトを構築する場合、gridの略として.gr_4gr_6やcolumnの略として.cl_4cl_6といった接頭辞を追加することができます。
スマートフォンのみ有効なクラスは.sp_**、タブレットのみ有効なクラスは.tb_**とするのもいいでしょう。
一定の法則に従っている限り、PRECSSはどんなものでも臆することなく受け入れます。

Advance Case

モジュールが他のモジュールにネストされる場合

PRECSSでは一つのブロックモジュール内に他のブロックモジュール、またはエレメントモジュールがネストされることがあります。これは、モジュールが「持ち運び可能なもの」である思想の下の挙動です。
その際に直面する、主にレイアウトの問題について、幾つか指針を示します。
現在構築中のモジュールをA、既に他所で構築済みで、Aに移植したいモジュールをBとしましょう。
基本的な原則は、以下の2つのみです。

  • Bのレイアウトは、Aからのネストで制御する
    (子セレクタ指定が好ましいですが、状況により子孫セレクタも許容します)
  • B内の子要素は、Aからのネストで制御してはならない
HTML
      
          <div class="ly_side">
            <!-- Bモジュール -->
            <div class="bl_imgBlock">
              <h3 class="bl_imgBlock_ttl">.bl_imgBlock</h3>
              <p class="bl_imgBlock_img"><img src="//goo.gl/15naui"></p>
              <p class="bl_imgBlock_txt">
                Lorem ipsum...
              </p>
            </div>
          </div>

          <div class="ly_main">
            <!-- Aモジュール -->
            <div class="bl_sectBlock cf">
              <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>
              <!-- Bモジュールの移植 -->
              <div class="bl_imgBlock">
                ...
              </div>
              <p class="bl_sectBlock_txt">
                Lorem ipsum...
              </p>
            </div>
          </div>
    
CSS
      
          //Bモジュール
          .bl_imgBlock{
            margin: 0 0 20px 0;
          }

          //BモジュールをAモジュールに移植
          .bl_sectBlock{
            > .bl_imgBlock{
              width: 25%;
              float: left;
              margin: 0 10px 10px 0;
            }
          }
    

2つ目の「B内の子要素は、Aからのネストで制御してはならない」について、もう詳しく解説します。

BをAに移植した際にBの子要素に何らかの変更が必要な場合、A > B > 子要素という形でスタイルを上書きしてはいけません。
これはモジュールブロックそれ自体が、単独で完結する1つの塊という思想であるからです。塊それ自体のレイアウトは移植先モジュールのコンテキストにより挙動を変えるのは可能ですが、その子要素までもがコンテキストに影響されるのは好ましくありません。
誤解を恐れずに言えば、AモジュールからBモジュールそれ自体は制御可能だが、Bモジュールの内部については隠蔽されるべき、という感覚です。
ブロックモジュール内の変更はあくまで、そのブロックモジュール内で完結すべきということから、ブロックモジュール内はそのブロックモジュール以外からの変更を受けない聖域となっています。

現実としてAモジュールへ組み込みの際にBモジュール内に変更が必要な場合は、Bモジュールにモディファイアを付加することで処理します。
ここでは、BモジュールがAモジュールに移植された際に、コンテンツが全体的に小さくなる例を示します。

HTML
      
          <div class="ly_main">
            <!-- Aモジュール -->
            <div class="bl_sectBlock cf">
              <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>
              <!-- Bモジュールの移植、bl_imgBlock__smlモディファイアの付加 -->
              <div class="bl_imgBlock bl_imgBlock__sml">
                ...
              </div>
              <p class="bl_sectBlock_txt">
                Lorem ipsum...
              </p>
            </div>
          </div>
    
CSS
      
          //Bモジュールにbl_imgBlock__smlモディファイアの付加
          .bl_imgBlock{
            &.bl_imgBlock__sml{
              > .bl_imgBlock_ttl{
                margin: 0 0 5px 0;
                font-size: .8em;
              }
              > .bl_imgBlock_img{
                margin: 0 0 5px 0;
                > img{
                  max-width: 80px;
                }
              }
              .bl_imgBlock_txt{
                margin: 0 0 10px 0;
                font-size: .8em;
              }
            }
          }
    

このように記述することで、ブロックモジュールの聖域を守りメンテナンス範囲の明確なコードを維持するだけでなく、他所へ移植した際もコンテキストに関わらず同じ状態を再現出来る、汎用性の高いモジュールになります。

Aモジュールの子要素に変更が生じる場合

BモジュールがAモジュールに移植された際、場合によってはAモジュールの子要素に変更が生じることもあるでしょう。
その際のアプローチとして、考えられるパターンを3つ例示します。

  • Aの該当子要素モジュールに直接モディファイアを付加しスタイルを変更する
  • Aモジュールにモディファイアを付加し、ネスト指定でスタイルを変更する
  • 元のAモジュールから分離した、Aモジュールの類似であるA2モジュールを作成する

どこまで拡張性を見据えるかにもよりますが、先に結論を言ってしまうと推奨するのは3つ目の「類似であるA2モジュールを作成する」です。
bl_imgBlockbl_sectBlock_txtが左右ほぼ均等に横並び表示されるパターンを例に、それぞれ解説します。

Aの該当子要素モジュールに直接モディファイアを付加しスタイルを変更する

HTML
      
            <div class="bl_sectBlock cf">
              <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>
              <div class="bl_imgBlock">
                ...
              </div>
              <!-- 該当子要素モジュールにモディファイアの付加 -->
              <p class="bl_sectBlock_txt bl_sectBlock_txt__r49p">
                ...
              </p>
            </div>
    
CSS
      
              .bl_sectBlock{
                > .bl_imgBlock{
                  width: 49%;
                  float: left;
                }
              }
              .bl_sectBlock_txt{
                &.bl_sectBlock_txt__r49p{
                  float: right;
                  width: 49%;
                }
              }
    

このパターンは1番手っ取り早いですが、モディファイアを付加した該当モジュールしか調整出来ず、他のモジュールも調整が必要になった場合はいちいちモディファイアを付加しなければならないため、若干拡張性に欠けます。

Aモジュールにモディファイアを付加し、ネスト指定でスタイルを変更する

HTML
      
            <!-- Aモジュールにモディファイアの付加 -->
            <div class="bl_sectBlock bl_sectBlock__hasImgBlock cf">
              <h2 class="bl_sectBlock_ttl">.bl_sectBlock</h2>
              <div class="bl_imgBlock">
                ...
              </div>
              <p class="bl_sectBlock_txt">
                ...
              </p>
            </div>
    
CSS
      
            .bl_sectBlock.bl_sectBlock__hasImgBlock{
              > .bl_imgBlock{
                width: 49%;
                float: left;
              }
              > .bl_sectBlock_txt{
                float: right;
                width: 49%;
              }
            }
    

前述と比較し、こちらのパターンは他の子要素にも調整が必要になった場合でもCSSを調整するだけで済みます。
モディファイア名は、拡張性を考慮すると子要素の状態に名前が左右されないbl_sectBlock__hasImgBlockとすると良いでしょう。
ただし今回はネストしている別ブロックモジュールが一つなのでこれで十分ですが、仮にAモジュールにネストされるモジュールが増える、例えばBに加えCモジュールもAモジュールに組み込まれると、モディファイア名が冗長になることが予想されます。

また**__has**というモディファイア名にした場合、Bモジュールに対するスタイル指定も上記のCSSの例のようにモディファイアからのネストにした方が管理上健全ですが、仮に初めに例に挙げた「Aの子要素に影響を与えない、Bモジュールのネスト」と共存する場合、「どちらもBモジュールを含むのに、片方だけに**__has**モディファイアが付加されている」となり、やはり少なからず論理的に破綻をきたしてしまいます。

元のAモジュールから分離した、Aモジュールの類似であるA2モジュールを作成する

HTML
      
              <div class="bl_sectBlock2 cf">
                <h2 class="bl_sectBlock2_ttl">.bl_sectBlock2</h2>
                <div class="bl_imgBlock">
                  ...
                </div>
                <p class="bl_sectBlock2_txt">
                  ...
                </p>
              </div>
    
CSS
      
              //重複スタイルの一括指定
              .bl_sectBlock,
              .bl_sectBlock2 {...}
              .bl_sectBlock_ttl,
              .bl_sectBlock2_ttl {...}
              .bl_sectBlock_txt_img,
              .bl_sectBlock2_txt_img {...}

              //bl_sectBlock独自の指定
              .bl_sectBlock_txt {...}

              //bl_sectBlock2独自の指定
              .bl_sectBlock2_txt {
                width: 49%;
                float: right;
              }
              .bl_sectBlock2 > .bl_imgBlock {
                float: left;
                width: 49%;
              }
    

連番を付加し、元のモジュールの亜種として別モジュールを作成するパターンです。 変更が無い箇所にも再度同じスタイルを適用するのが少し手間ですが、元のAモジュールから分離できるため管理性・拡張性はかなり高いでしょう。
今回の例ではセレクタをカンマで区切っていますが、CSSプリプロセッサのextendやmixinを使用して管理することももちろん可能です。
タイトル部分など、共通部分をどうしても同一クラスで一元管理したいという場合は、エレメントモジュール化するという手もあります。