
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では触れませんでしたね...。ドットインストールの方で近々取り上げてみたいところです。
というわけで今週は詳細度について紹介してみました。まだあやふやだなぁ、という人は復習してみるといいかもですね。