私は巨大なプロジェクトのフロントエンドであるYandexの検索結果に取り組んでいます。 また、他の大規模なWebプロジェクトと同様に、大量のCSSコードと、それとやり取りするかなり大きなチームがあります。
さまざまなツールを使用して多くの人がcssを作成および編集すると、時間の経過とともにこのcssは非常に混乱し、一貫性がなくなり、一般的に見た目が悪くなります。 たとえば、ベンダープレフィックスを1つの順序で記述する方が便利であり、別の順序でURLを引用符で囲む、引用しない、誰かが緊急リリースのバグを修正するなど、次のように書くことができます。
position: relative
プロパティブロックの先頭の
position: relative
。colorと
box-shadow
間のどこかにすでに
position: absolute
があり、長い間、なぜ何も機能しないのか疑問に思います。
しかし、誰もがさまざまな方法でコードを記述しているという事実にもかかわらず、リポジトリには完璧な順序があります。CSSコードは完全に一貫しており、見た目も美しいです。 すべて。
これをどのように達成したかは、カットの下で確認できます。
最初のステップ
css全体をコードスタイルで記述したい場合、最初の明らかな考えは、非常に重要な上司が「このように記述し、それを保持しなければならない」と言い、レビューのためにコードの矛盾をキャッチすることです。 クールに聞こえますが、残念ながら、聞こえるだけですが、実際にはまあまあわかります：
- 私たちは皆人間です-そして、CSSプロパティのヒープ全体の正確な推奨順序を覚えて、間違いを犯すことは人にとって少し難しいです。
- この場合、レビューコードはコードスタイルの編集セットに変わりますが、ロジックとアーキテクチャについて説明します。
- この場所のすべてのエラーは手動で修正する必要があり、すべての不整合はいくつかのドックで明確にする必要があります。
一般的に、どうやら見た目があまりよくなく、時間がかかり、最も重要なことは、開発者を本当に怒らせます。
開発者を満足させるために、私は他のソリューションを探す必要があり、それが見つかりました。
ロボットについて少し
古いロボットが1つありました-CSScombは、タスクの最も重要な部分を解決しました。
彼は、特定の順序でプロパティをソートする方法を知っていました。 しかし、彼にはいくつかの欠点がありました。
- さらに、彼は何も知りませんでしたが、彼はそれを削除する必要のない場所に引用符を使用し、ベンダーのプレフィックスをラダーで構築したかったのです...
- 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
）。 この場合、コミットされているファイルのバージョンでエラーが見つかった場合、不快な状況が始まります。
- コミットしようとしているファイルのバージョンでCSScomb.jsを実行できますが、状況によってはパッチの適用時に競合が発生します。
- または、現在のファイル全体でCSScomb.jsを実行しますが、まだコミットしたくない編集には、不正なコードなど、何でもあります。
また、一般的に、ファイル自体が予期せず変更された場合、あまり良くありません。 したがって、CSScomb.jsは開発者が起動する必要があるという結論に達しました。
できた！
それだけです 現在、CSScomb.jsでは、コードスタイルに従わないコードのコミットが許可されず、1つのコマンドでコードを目的の形式にすることができます。
これは、開発者の時間と神経を節約するだけでなく、シンプルなアイデアとシンプルなツールがコードを整理するのに役立つ方法です。
このような束は多くのプロジェクトで使用できます。基本的な機能やプラグインが不足している場合は、いつでも問題を取得したり、必要なものを自分でコピーしたりできます。