CSSのコーディングにおいて、コーディングガイドラインが決められていなかったり、プロジェクト内のチームメンバー同士でコーディングスタイルを統一できていなかったりすると、それぞれが独自スタイルでコーディングし始めるので非常に混乱することになります。 さらにレイアウト部分と視覚的なデザインを混ぜてしまうと一貫性がなく複雑なコードになってしまいます。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 CSSコーディングの課題 これらの課題を解消するための設計手法を紹介していきます。 複数メンバーでCSSコーディングしたら似たようなコードが散乱していた 適当にコードを書いていたら設計が複雑になりファイルが膨れあがった 1箇所修正しただけなのに他のページが表示崩れした ページ数が多い分、作業時間も多くかかった そもそもコーディング
Drupal8.0からCSSスタンダードのルールに沿ったコーディングをするためのリントツール「CSS Lint」のコンフィグファイル（.csslintrc）が含まれるようになりました。 このリントツール「CSS Lint」を利用すればCSSソースの品質を向上させることができます。 もし、リントツールを導入しない場合、例えばマズイ書き方をしたコードが入り込んでしまい修正・拡張するのが大変になります。 複数メンバーで平行してコーディングしなければならない状況では、メンバーごとに書き方に癖があるので全体を通して見るとコーディングスタイルが統一できていない状態になります。 リントツールを導入する目的はそれらの問題を防ぐ効果があります。 Stylelintの紹介 Drupal8 ドキュメントルート直下に CSS Lint のコンフィグファイルが設置されてはいますが、イマドキのテーマ制作の現場では、生
Drupal 8.4.xからStylelintがサポートされるようになったので、これから導入するなら SCSS Lint ではなく Stylelint をオススメします。 Stylelintを導入してSCSSのリントチェックを行う（for Drupal8） Drupal8からCSSスタンダードのルールに沿ったコーディングをするためのリントツール「CSS Lint」のコンフィグファイルが含まれるようになりました。 このリントツール「CSS Lint」を利用すればCSSソースの品質を向上させることができます。 もし、リントツールを導入しない場合、例えばマズイ書き方をしたコードが入り込んでしまい修正・拡張するのが大変になります。 複数人で平行してコーディングしなければならない状況では、人ごとに設計方法が異なり、書き方の癖もそれぞれなので全体を通して見ると著しく設計が劣化してしまいます。 リントツ
PHPStormのFile Watcher機能を使って、Drupalのテーマで SCSS + Compass のビルドをするための設定方法を紹介します。 前提条件 テーマは、OMEGA4とする。 ※ただし、テーマ配下にconfig.rbが設置されていれば何のテーマでも構いません。 SCSS + Compass のコマンドの実行環境が整備されていること。 ※ruby + gemコマンドにて適宜コマンドのセットアップをお願いします。 実施環境 下のコマンドの組み合わせで実施しました。 「rbenv」「rbenv-gemset」「Bundler」はとくにセットアップしていなくても支障はないです。 Macbook Pro (Retina, 15-inch, Mid 2014) Mac OS X 10.11 El Capitan PHPStorm 10.0.4 Ruby 2.2.5p319 (201
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
