CodeUpsを進めるにあたりCSS設計について理解を深めてもらいます。

「CSS設計」を聞くと難しいイメージがあると思いますが、理解できるようになるとコーディングが早くなったり、修正が楽になったりします。

その理解を深めるためにCodeUpsに取り組んでいると思います。覚えて損はありません。

CSS設計とCSS設計手法の違いについて

CSS設計とCSS設計手法はまったくの別物です。

よくBEM設計やFLOCSS設計という言葉を耳にすると思いますが、それらはCSS設計手法であり、CSS設計ではありません。

厳密にいうと、「CSS設計でBEMを取り入れています」という表現も目にしますが異なります。

CSS設計とは

CSS設計とは「予測・再利用・保守・拡張」の4つを指します。

参考：https://philipwalton.com/articles/css-architecture/

これら4つの条件は同時に満たされている必要があります。

いますぐ理解する必要はありません。

CSS設計に関する書籍はたくさんありますが、読んだだけで理解するのは至難の業です。

とはいえ、CSS設計を意識しながらコーディングをお願いします。ここを本気で取り組めば取り組むほどフィードバックで理解が深まります。

初稿を提出するときに設計が完璧にできている必要はないです。

どこをどうすればいいか、この書き方よりもこういった書き方のほうが好ましい理由など、実際に書いてもらったコードをみながら解説をしていきますので、ご安心いただければと思います。

CSS設計手法とは

CSS設計手法とは、CSS設計を表現するための手段です。

その表現の種類としてBEMやFLOCSSといったものが存在します。

書き方に一定のルール（基準）を設け、また、フォルダ管理を分割することで保守性をあげ、可読性をあげることを目的としています。

先人の方たちが、それぞれの方法を考えそれが広く使われているものになりますね！

BEM設計手法：https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

FLOCSS：https://github.com/hiloki/flocss

CodeUpsではまずBEM設計手法の理解を深めていただきます。

注意：コーディングの目的はデザインの再現

コーディングの一番の目的はどこまでいってもデザインを再現すること。CSS設計が理解できていなくても問題はありません。

CodeUpsではCSS設計の理解を目的としていますが、CSS設計はあくまで手段です。

ただCSS設計を理解すると、コードの可読性があがり、修正が楽になり、第三者が読んでも理解しやすくなります。

第三者に評価され、結果的にあなたに返ってきます。

今やたくさんの人がコーディングを学習しています。ただ書くではなく考えて書くことで他者との差別化を図り、優位性を見出していきましょう！

次の項目