CSSの課題でもっとも正答率が低かったのは？

256timesの新サービスは絶賛開発中なのですがもうちょっと時間がかかりそうです。年内に試運転できたらいいなぁ、と考えています。

では今週もスクール開講時に気づいたことを紹介してみます。

256timesの0期募集でHTML/CSSに関するクイズを出したのですが、そのときにもっとも正答率が低かったのが「CSSセレクターの詳細度」に関する問題でした...。

「え、詳細度って何？」という方はぜひ一度MDNを読んでおくと良いです。

・詳細度 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

またドットインストールのレッスンでも説明しているのでこちらもあわせてどうぞ。

・#35 詳細度を計算してみよう | 詳解CSS 基礎文法編 
https://dotinstall.com/lessons/basic_css_styles/45435

一言でいうと「どのセレクタがー優先されるか」を決める計算式なのですが、やや難解なイメージがありますよね。ただ知らないとなにか不具合が起きたときに直せないので、これを機会に是非復習してみてください。

↑ ざっくりいうとこんな感じです。

なお、ある程度開発の規模が大きくなってくると「詳細度を気にするのも面倒...なのでBEMなどのCSS設計を使うべし」となりますが、そのあたりは256timesでは触れませんでしたね...。ドットインストールの方で近々取り上げてみたいところです。

というわけで今週は詳細度について紹介してみました。まだあやふやだなぁ、という人は復習してみるといいかもですね。