既存のコードベースで作業を開始する場合、最初にCSS監査を実施する必要があります。 不十分に組織化され起動されたCSSテーブルからの主な害は、開発チームがコードのジャングルを通り抜けなければならず、誤って定義されたセレクターが衝突とスタイルオーバーレイを引き起こす場合、非稼働サイトで歩き回らなければならないため、開発プロセスを遅くすることです
このような監査は、プロジェクトのCSSテーブルがどれだけうまく編成されているか、評価とアセンブリを担当するパイプラインが現代の要件にどのように対応しているか、CSS作成チームがどのように構造化および統制されているかを評価するのに役立ちます。 以下に、独自のCSS監査を実施するために使用できるいくつかの手順を示します。
CSSシステム
何を探す
プロジェクトには、CSSReadmeファイルや、このプロジェクトのCSSを記述するための原則を説明する他の同様のドキュメントがありますか？ 最も成功したプロジェクトは、SMACSS、BEM、OOCSSなどのより厳格なシステムから始まり、その後の提案や構造に合わせて修正します。 これがGithub wikiリポジトリ、プロジェクトのメインREADMEファイル、またはチームの新しい開発者向けの指示にない場合は、存在しないことを考慮してください。
最終的に、CSSシステムには次の手順が含まれます。
•新しく作成されたファイルに名前を付ける方法と作成するタイミング
•クラスおよびidプロパティの名前を選択する方法
•サイトでサポートされているCSS3機能
•プロジェクト内でどの構文オプションが推奨されますか（単一行スクリプトを使用できますか？）
どのように役立ちますか
サイトのCSSは、個々の開発者の気まぐれにより増加しています。 ルールを作成する前に、セレクターがあるかどうかを確認するために時間を費やす人もいれば、そうでない人もいます。 システムは、CSSレコードから仮定と意見を抽出します。開発者は、CSSレコードの見栄えを良くするだけで、独自のルールを考案することはできません。
整理整頓の最初のステップ
上記のシステムを確認し、その利点と欠点を示します。 他のプロジェクトチームとスタイルシートで最も重要と考えるものについて話し合い、目標に最も適したものを選択します。
新しいシステムを既存のWebサイトに統合する最も安全な方法は、一度に1ページずつ時間をかけることです。 システムを使用して新しい開発を実行し、再適用したスタイルを以前に作成したページにバックポートできます。 さらに、コンベヤの設計が変更された場合、これは材料の完全なリサイクルからやり直す絶好の機会です。 時々、これはあなたが確信できる唯一の方法です。
スタイル参照
何を探す
担当CSSチームには、担当するWebサイトを構成するコンポーネントとスタイルの「キッチンシンク」が必要です。 新しい開発者にページをデザインするタスクが与えられると、CSSページを歩き回ったり、製品内の1つまたは別の要素の場所を知ることは必ずしも便利ではありません。 スタイルガイドは、サイト用に既に作成されているスタイルとコンポーネントを表示する開発者専用のページです。そのため、凡例を添付できるため、時間を節約し、重複するスタイルの数を減らすことができます。
どのように役立ちますか
常にチェックできるアクティブページの存在により、デスクトップに配置したばかりのコンピューターのポップアップウィンドウから非常に青いテキストを見つけやすくなります。 すべての開発者がWebサイト全体を完全に知っているわけではないため、この「ヘルプウィンドウ」は、開発者が時間を犠牲にして車輪を再発明するのではなく、既存のスタイルを使用するように促します。
整理整頓の最初のステップ
次回、誰かが新しいプロパティまたは要素を作成したらすぐに、それをマークして、既存のスタイルシートがすでに含まれている新しいページのどこかで使用する必要があります。 これがスタイルガイドの初期段階になります。まず、このページで新しい要素とコンポーネントを作成し、分離されたスペースで機能をテストしてから、元々意図していたページにそれらを転送してください。
パイプライン
何を探す
サイトのドキュメントのどこかに、デジタルオブジェクトを処理するためのパイプラインの説明があるはずです。特に、CSSの処理に興味があります。 これは、完了する必要があるタスクを指すGruntfileにすることも、多くの処理機能を備えたRailsのようなシェルを使用することもできます。
どのように役立ちますか
生のCSSの作成は堅実ではありません。 SassやLessなどの前処理プログラムは、CSSプロセスからほとんどの鋭いエッジを取り除き、関数や変数に関連する良い習慣を身に付けます。
機能を送信する前に、何らかの方法でCSSを検証することが重要です。 クイックレフトによる最近の調査では、colroやz-marginなど、何百もの作成されたプロパティが効果なしで作品に渡されることが示されています。 それは事実上無害ですが、あなたのウェブサイトにそのようなものがあることは確かに迷惑です、それは些細なことにあなたの不注意を示しています。
前処理プログラムに加えて、サイトを高速化するために、CSNをCDNを介して送信し、適切なキャッシュ制御ヘッダーを使用してブラウザーで確実にキャッシュできるデジタルオブジェクトに集中して最小化することが重要です。
整理整頓の最初のステップ
プログラムシェルに、CSSおよびJavaScriptを処理できるデジタルオブジェクトを処理するためのパイプラインの概念が最初にない場合は、スタンドアロンツールを試すことができます。 GruntとGulpの2つのツールが気に入っています。 それらは大規模な展開システムに組み込まれ、展開中にデザインを作成するか、それらが作成されることを保証し、展開前にアーティファクト（コンパイル済みCSS）を受け入れます。
CSSの順序と完全な機能を維持することは簡単ではなく、継続的な監視が必要です。また、開発者には、内部プロパティや外部MVCシェルでの作業など、より「重い」タスクが与えられます。 ただし、設計と検証の記述プロセスに追加できるツールがあり、各サイトが不足しているものを取得するのに役立ちます。数か月ごとに完全に変更する必要のない、保守しやすいCSSです。 上記の最も簡単なことは、シンプルなスタイルガイドから始めることです。そのため、サイトにまだない場合は、すぐにワークフローを改善してください。
CSS監査の実施：スタイルシートはひどいものであってはなりません
All Articles