見出し画像

「CSS設計 完全ガイド」には、何が書いてあるのか ?

かいもち｜Designer

こんにちは。
Webデザイナー目指して勉強中のかいもちです ! 🐣
昨日2回目のコロナワクチンを打ちまして、本日はのんびり過ごしております。
心配していたような強い副作用は今のところ無く、多少だるいくらい。このまま終わると良いのですが...😂

つい最近、この本を手に入れました。


駆け出し(をちょっと過ぎたあたりの)Webデザイナーから現役バリバリの方まで、多くの方のバイブル...のようですが、つい最近まで「CSS設計ってなんのこと ? CSS極めたいオタク(失礼)のための本 ? 」とかなんとか思っておりました。(反省)


そんな考えがガラッと変わったきっかけはこちら。


...最近、初めて、下層ページにあるサイトを作ってみたんです。計15ページくらいの。そしたらもうCSSが混乱の嵐。崩壊の危機。😱

こりゃまずいと思って、とりあえず「CSS 書き方」「CSS コツ」とかなんとか検索しまくりまして、辿り着いたのが本書。
オタクの読み物とか言って本当申し訳なかったです...。

ということで、なんとなーくオカタイ印象のこの本には、どんなことが書いてあって、どんなひとが読むべきか、私がこの本を読んで自分のCSS設計にどう活かそうと思ったか、を書いていこうと思います。
(※ ネタバレ・著作権違反にならないよう留意いたします)


何が書いてあるのか


<前座>

CSSって扱いやすい言語だよね ! 難しいルールとか無いし ! ・・・だからこそカオスになりがちなんだよね😭 ページ数増えたり、複数人で開発するってなると困るんだよね😭

→ ということで、CSS設計という考え方が生まれたよ !  という話。

<本文>

( 1 )
CSS設計はいろんな人が提唱していて、それぞれいろんなルールがあるんだけど・・・
まずはその前に、そもそも良いCSS設計ってなに ? ということを学んでいこうね ! という話。
( 2 )
んじゃ実際、世の中で多くの人が使っているCSS設計はどんなものがあるか、見ていこう ! という話。
( 3 )
いろんなCSS設計手法があることを踏まえて、今回はBEM記法とPRECCS記法で実際にマークアップしてみるよ🤗 比べてみて、どっちが自分に適しているか見てみてね ! という話。
( 4 )
もっと細かくみていこう ! 例えばヘッダーはどういう設計が適してる ? ボタンは ? テーブルは ? という話。

<おまけ>

CSS設計以外にも、開発に役立つ技術は色々あるよ ! 例えばSassとかね ! という話。


どんな人が読むべきか


・わたしのように自分のCSSがカオスだ、崩壊の危機だ、と感じた人。わたしの場合、LP作ってた時はそこまで危機感を覚えなかったけど、下層ページのあるサイトを作ったとき、一気に焦りを覚えました。笑


・複数人で開発をしようと思っている人、する環境にある人。
自分ルールのCSSは、誰かにとっては使いにくいものであるかも・・・。
論理的で、整然としたCSSは自分の理解のためでもあるし、周りの理解のためにもなると思います。

(蛇足)
※ これは私感ですが、つい最近CSS始めました ! という人にはちょっと難しすぎるかも・・・。
基本的なマークアップが頭に入っていないと、説明されていることがなんのことかわからないのでは ? と思います。
最初からこうした記法でCSSを書く癖がつくなら、それはとても素晴らしいことだと思いますが、初学者だったわたしが初めにこの本読んだら、CSSを書くこと自体挫折していたんじゃないかと思います😂



自分の設計にどう活かしていくか(決意)


" ひとまずBEM記法について、基本を学んで実際に書いてみます !  "


・・・なぜBEMか ? というと、単純にとっつきやすそうだったから。
あと、比較的歴史のある記法ということで、困った時にググりやすそうというのもポイント高し。
執筆者が開発されたPRECCSも、レスポンシブありきな現代にめっちゃ合ってるなーと思いつつ、接頭辞をつけること自体がなかなかハードル高そうで...。慣れかな🤣


"このコンテンツはどのグループに属するか、考えながら構成を考えます ! "


・・・PRECCSはむずそう〜と先述したわたしですが、PRECCSの基本的な考え方を頭に浸透させるところから初めていこうと思います。笑

<今までのわたし>
「ここはなんとなくWrapperで囲っとこう」
「このaタグ、使い回すかもしれないからbtnっていうクラス付けとこう」

↓

<これからのわたし 笑>
「このコンテンツはベースグループに属するから、Wrapperで囲おう」
「このaタグはエレメントモジュールだから、btnクラスをつけよう」

・・・要するに、なんとなくをやめるということです ! w

このコンテンツがどれくらいの粒度で存在していて、どのくらいの範囲に影響を与え、どのくらい使いまわす可能性があるのか、考えながらマークアップするクセをつけようと思いました。
(それが自ずと、良いCSS設計につながる・・・はず ! 🤗✨)



読んでくださってありがとうございました💞

この記事が気に入ったらサポートをしてみませんか？