Geekly Articles each Day

CSSコードを整理します。 Yandexの経験

みなさんこんにちは！

私は巨大なプロジェクトのフロントエンドであるYandexの検索結果に取り組んでいます。 また、他の大規模なWebプロジェクトと同様に、大量のCSSコードと、それとやり取りするかなり大きなチームがあります。

さまざまなツールを使用して多くの人がcssを作成および編集すると、時間の経過とともにこのcssは非常に混乱し、一貫性がなくなり、一般的に見た目が悪くなります。 たとえば、ベンダープレフィックスを1つの順序で記述する方が便利であり、別の順序でURLを引用符で囲む、引用しない、誰かが緊急リリースのバグを修正するなど、次のように書くことができます。 position: relativeプロパティブロックの先頭のposition: relative 。colorとbox-shadow間のどこかにすでにposition: absoluteがあり、長い間、なぜ何も機能しないのか疑問に思います。



しかし、誰もがさまざまな方法でコードを記述しているという事実にもかかわらず、リポジトリには完璧な順序があります。CSSコードは完全に一貫しており、見た目も美しいです。 すべて。

これをどのように達成したかは、カットの下で確認できます。

最初のステップ


css全体をコードスタイルで記述したい場合、最初の明らかな考えは、非常に重要な上司が「このように記述し、それを保持しなければならない」と言い、レビューのためにコードの矛盾をキャッチすることです。 クールに聞こえますが、残念ながら、聞こえるだけですが、実際にはまあまあわかります：
  1. 私たちは皆人間です-そして、CSSプロパティのヒープ全体の正確な推奨順序を覚えて、間違いを犯すことは人にとって少し難しいです。
  2. この場合、レビューコードはコードスタイルの編集セットに変わりますが、ロジックとアーキテクチャについて説明します。
  3. この場所のすべてのエラーは手動で修正する必要があり、すべての不整合はいくつかのドックで明確にする必要があります。

一般的に、どうやら見た目があまりよくなく、時間がかかり、最も重要なことは、開発者を本当に怒らせます。
開発者を満足させるために、私は他のソリューションを探す必要があり、それが見つかりました。

ロボットについて少し


古いロボットが1つありました-CSScombは、タスクの最も重要な部分を解決しました。
彼は、特定の順序でプロパティをソートする方法を知っていました。 しかし、彼にはいくつかの欠点がありました。
  1. さらに、彼は何も知りませんでしたが、彼はそれを削除する必要のない場所に引用符を使用し、ベンダーのプレフィックスをラダーで構築したかったのです...
  2. PHPと正規表現で書かれており、拡張機能も提供していませんでした。

そして、もちろん、jsプログラマーの環境でのPHPはc ++よりも少しよく知られていますが、それでも私たちが望むものではありません。

私たちのチームのmishangaは、すべてを見て、これらの欠点のないツールを作成することにしました。彼は多くの異なるものを作成でき、jsで記述され、簡単に拡張できました。 また、Yandexの従業員は積極的に開発に関与していますが、CSScomb.jsはYandexをはるかに超えた本格的なオープンソースプロジェクトです。

CSScomb.jsをご覧ください -これは古いCSScombの新しいバージョンであり、多くのクールなことを実行できます。

どのように見えますか？


例を使用して現在の開発プロセスを検討してください。 教育目的でのみ、このコードをコミットするとします。

 .block { -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); z-index: 2; position: absolute; height: 2px; width: 2px; color: #FFFFFF; }

見た目はあまりよくありませんし、コードのスタイルも違います。したがって、コミットしようとすると、次のように表示されます。

 % git commit block.css -m"Add My awesome css" Code style errors found. ! block.css

このようなcssファイルはコミットできません。 これは、gitのリポジトリに、コミットするcssファイルのすべての変更をCSScombでチェックする事前コミットフックがあるために発生します。 リンターモードで動作します。 フックは同時に非常にスマートなので、すべてではなく、コミットすることのみをチェックします。

このようなメッセージを見たので、私たちは動揺していませんが、CSScomb.jsにすべてを修正するように依頼します。

 % csscomb block.css

今、今別のこと：

 .block { position: absolute; z-index: 2; width: 2px; height: 2px; color: #fff; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }

彼は私たちのためにコードにかなりの定期的なマイナーな変更を加えました：ブラケットを別の行に転送し、色を小文字に変換し、ベンダーのプレフィックスをラダーで構築し、プロパティを正しい順序で作成しました。 現在、このようなコードは自動チェックに合格し、すでに機能している品質のさらなるレビューに進みます。

したがって、開発者はコードスタイルでcssを正しく記述する方法について考える必要がなくなり、必要に応じて記述するだけで、残りは自動的に行われます。 これはまさに我々が達成したかったものです。

そして彼女のネオンカの中


このようなシステムは、CSScomb自体とそれを使用する事前コミットフックの2つの部分で構成されています。 このフックについては次のセクションで説明しますが、この記事ではCSSComb.jsの仕組みについて詳しく説明します。

CSScomb.jsは、プラグインシステムとgonzales-pe cssパーサーの2つのことに基づいています。純粋なcssだけでなく、SassやLESSなどのプリプロセッサでも動作する非常にクールなものです。

パーサーから始めましょう。 cssコードに対して設定され、それに基づいてASTを構築します。 たとえば、次の場合：

 .block { position: absolute }

ASTは次のようになります。

 [ "stylesheet", [ "ruleset", [ "selector", [ "simpleselector", [ "class", [ "ident", "block" ] ], [ "s", "\n" ] ] ], [ "block", [ "s", "\n " ], [ "declaration", [ "property", [ "ident", "position" ] ], [ "propertyDelim" ], [ "value", [ "s", " " ], [ "ident", "absolute" ] ] ], [ "s", "\n" ] ] ], [ "s", "\n" ] ]

この形式は非常にかさばり、人間が読むには不便ですが、 プラグインが行う自動処理には非常に便利です 。 それ以降のすべてのcss変換に従事しているのは彼らであり、プラグインはcssコードではなく、処理がはるかに簡単なASTで直接動作します。 使用するプラグインとその設定は、個別の構成ファイルに示されています。

上記の例では、 absolute後にセミコロンを入れていません。 セミコロンの検出と修正を担当するプラグインはこれに気づき、ASTの修正により修正しました（大きなコードを複製しないようにツリーを少し縮小しました）。

 ... [ "block", [ "s", "\n " ], [ "declaration", [ "property", [ "ident", "position" ] ], [ "propertyDelim" ], [ "value", [ "s", " " ], [ "ident", "absolute" ] ] ], >>>[ "declDelim" ],<<< [ "s", "\n" ] ...

すべてのプラグインが機能した後、同じgonzales-pe ASTを使用するとCSSコードに戻り、
忘れられたセミコロンが配置されています：

 .block { position: absolute; }

使用を開始するには？


最初のステップ

いずれにしても、プロジェクトに応じてCSScomb.jsを追加する必要があります。
プロジェクトがnpmを使用する場合、package.jsonのdevDependenciesに追加する必要があります

 { ... "devDependencies": { ... "csscomb": "2.0.4", ... } ... }

第二段階

プラグインがコードを必要なフォームに持ってくるために、プラグイン設定ファイルをプロジェクトのルートに置く必要があります 。 各プラグインの機能とオプションの詳細については、 こちらをご覧ください 。

CSScomb.jsは、既存のcss-kuをベースとして構成を生成できるため、ある程度これを自動的に行うことができます。

 csscomb -d example.css > .csscomb.json

このようにして、すべてのプラグインを構成できます。 唯一の例外はプロパティの並べ替えです。プロパティの並べ替えは、自分で記述するか、手でどこかからコピーする必要があります。

最後のステップ

コミットする前にCSScomb.jsがlinterモードで実行されることを確認する必要があります。また、通常はコミットする前に実行されるjscs / jshint-groupsまたはその他のツールも必要です。 gitとlinux / BSDを使用している場合、次のようになります。

 #!/usr/bin/env bash PATCH_FILE="working-tree.patch" NPM_BIN="./node_modules/.bin" function cleanup { exit_code=$? if [ -f "$PATCH_FILE" ]; then patch -p0 < "$PATCH_FILE" rm "$PATCH_FILE" fi exit $exit_code } #     trap cleanup EXIT SIGINT SIGHUP #   git diff > "$PATCH_FILE" --no-prefix #     git checkout -- . #       ,     git_cached_files=$(git diff --cached --name-only --diff-filter=ACMR | xargs echo) if [ "$git_cached_files" ]; then #  CSScomb.js $NPM_BIN/csscomb -v -l $git_cached_files || exit 1 fi

このフックには興味深い機能があります。 CSSComb.jsをすぐに修復モードで実行してから、自動的に自動的にコミットしないのはなぜでしょうか。 ほとんどの場合、これは実際にうまく機能しますが、ファイルにいくつかの編集を加えた場合に問題が発生し、そのうちの1つだけをコミットしたい（ git add -p ）。 この場合、コミットされているファイルのバージョンでエラーが見つかった場合、不快な状況が始まります。
  1. コミットしようとしているファイルのバージョンでCSScomb.jsを実行できますが、状況によってはパッチの適用時に競合が発生します。
  2. または、現在のファイル全体でCSScomb.jsを実行しますが、まだコミットしたくない編集には、不正なコードなど、何でもあります。

また、一般的に、ファイル自体が予期せず変更された場合、あまり良くありません。 したがって、CSScomb.jsは開発者が起動する必要があるという結論に達しました。

できた！


それだけです 現在、CSScomb.jsでは、コードスタイルに従わないコードのコミットが許可されず、1つのコマンドでコードを目的の形式にすることができます。
これは、開発者の時間と神経を節約するだけでなく、シンプルなアイデアとシンプルなツールがコードを整理するのに役立つ方法です。

このような束は多くのプロジェクトで使用できます。基本的な機能やプラグインが不足している場合は、いつでも問題を取得したり、必要なものを自分でコピーしたりできます。

Source: https://habr.com/ru/post/J223503/

More articles:


All Articles