CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。 今回は、CSSの設計手法に関する基本と、3つの人気のCSSの設計手法をご紹介したいと思います。 メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。 逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
CSSのコーディングにおいて、プロジェクト内のチームメンバー同士でコーディングスタイルを決めていないと、それぞれが独自ルールでコーディングをしてしまったり、似たようなコードが散乱することにもなります。 それはテーマ制作の現場だけでなく、UI設計がともなうモジュール開発行うときでも同じです。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 #モジュールのCSS設計にSMACSSの考え方を導入する Drupal CSS コーディング スタンダードでは、Drupal8からSMACSSが推奨されています。 これはテーマ制作だけではなくモジュール開発でも同じです。 SMACSSとは、Scalable and Modular Architecture for CSSの略語で「スマックス」と読みます。 SMACSSはCSSの設計手法
CSSのコーディングにおいて、コーディングガイドラインが決められていなかったり、プロジェクト内のチームメンバー同士でコーディングスタイルを統一できていなかったりすると、それぞれが独自スタイルでコーディングし始めるので非常に混乱することになります。 さらにレイアウト部分と視覚的なデザインを混ぜてしまうと一貫性がなく複雑なコードになってしまいます。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 #CSSコーディングの課題 これらの課題を解消するための設計手法を紹介していきます。 複数メンバーでCSSコーディングしたら似たようなコードが散乱していた 適当にコードを書いていたら設計が複雑になりファイルが膨れあがった 1箇所修正しただけなのに他のページが表示崩れした ページ数が多い分、作業時間も多くかかった そもそもコーディン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く