Help us understand the problem. What is going on with this article?

cssスコープ

More than 1 year has passed since last update.

はじめに

いままでcssなんて適当でいいと思っていた私ですが、そんなこと言ってたらjavascript使う時全部グローバルオブジェクトにぶち込むぞと言われたので改心して勉強することにしました。

スコープがないからこうなる

直接要素を指定する。

sample.html
   <h1>青色のタイトル</h1> 
   <h1>赤色のタイトル</h1>
sample.css
h1{
  color:blue;
}

h1{
  color:red; /*こっちが適用される*/
}

上のh1には青くいて欲しくても赤になってしまいます。

じゃあ名前をつけてみる。

sample2.html
   <h1 class='title'>青色のタイトル</h1> 
   <h1 class='title2'>赤色のタイトル</h1>
sample2.css
.title{
  color:blue;
}
.title2{
  color:red;
}

これで解決!
してるように見えてもしてません。
もしも違うアイテムのタイトルが他に10個あった場合、名前をさらに10個考える問題に直面します。
.title3 なんてつけた日にはお前どこのタイトルだよ!!!!とつっこまないといけないかもしれません。

設計

上記の問題を偉い人が名前の付け方や設計で解決しようとしました。
例えば

ページごとに親セレクタを決める

top.html
  <div class='pageTop'>
    <!-- トップページの内容 -->
  </div>
about.html
  <div class='pageAbout'>
    <!-- アバウトページの内容 -->
  </div>
sample3.scss
  .pageTop{
    @import('_top.scss')
  }
  .pageAbout{
    @import('_about.scss')
  }
  • トップページの一番親の要素に .pageTop をつける
  • アバウトページの一番親の要素に .pageAbout をつける

のように決まりを設けることで擬似的にスコープをつくってしまう。

BEM

Block Element Modifier の3つに分ける
Blockという一つの独立した部品の中にElementを配置していく。
可変部分はModifierとして名前をつける
class名を一目見ただけで

  • どのBlockに所属しているのか
  • そのBlockやElementは何を表しているのか

を判断できるような名前の付け方

sample4.html
  <nav class='nav'> <!-- Block -->
    <ul>
      <li class='nav__toTop'> <!-- Element -->
         <a href='/top'>top</a>
      </li>
      <li class='nav__toAbout nav--active'> <!-- Element and Modifier -->
        <a href='/about'>about</a>
      </li>
    </ul>
  </nav>
sample4.css
 /* Block */
 .nav{

 }
 /* Element */
 .nav__toTop{

 }
 /* Element */
 .nav__toAbout{

 }
 /* Modifier */
 .nav--active{

 }

Scssの場合Blockを&で置き換えられる

sample4.scss
.nav{
  &__toTop{

  }
  &__toAbout{

  }
  &--active{

  }
}

class名を一目見ただけで何のスタイルか判断できる名前ということは、同じ見た目のところは使いまわせるはずだし、似たような見た目でも役割が違えばそれなりの名前になるはずなので、名前衝突も回避できる(多分)

根本的な解決ではない

プロジェクトの特性を考えて上記のような設計を駆使すれば、きっといいページができます。
ですがそれはあくまで理想なので、

  • 設計手法をそもそもそんなにしらない新人がしんどい
  • あるところでは使われている共通化コードが、あるところでは使われていない

などの問題がでてきます。

それらを解決するために、設計を共有するstyle guideの作成など、何らかの形で管理コストを前払いする必要がでてきます。
そんなの私はめんどくさい。

もう何も怖くない

でもやっぱり偉い人はすごいです。解決してくれます。
javascriptをつかってcssにスコープがつくれるようになりました。
スコープがないから困るんだから作っちゃえばいいよねというやつです。

web component

webコンポーネント単位でcssを管理できるようになったために、もう名前の問題は考えなくてよくなりました。
できるだけ他人に伝わりやすい名前を考えるだけで良いのです。

未来に向けて

web コンポーネントがhtml5のように普及するにはまだ時間がかかるらしいので今は他のもので代用する流れになっています。

Vue.js
Polymer

これらのフレームワークを使うとcssで悩むことが減り、コンポーネント思考(?)も学べるはずです。
もしかするとWebコンポーネントが普及してもこっちの方が便利かもしれないですね。

あとがき

にわかなので間違ってるところもあるかと思いますが、あれば優しく教えてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away