stylelint を使用して CSS_html/css_WEB-ITnose を確認する

CSS コードを大量に記述すると、複数のエラーが発生することがあります。 CSS の記述エラーを防ぐツールが必要な場合があります。

もしかしたら、あなたのエラーが本当にバグである場合もあります。あるいは、単に不整合や、不注意によるコーディング スタイルの不明確さが原因である可能性もあります。おそらくそれらの多くは (あなたの気質にもよりますが) 些細なことのように思えるかもしれませんが、コードベースが増大し、時間の経過とともに、多くの人がそれらを使用するときに醜いものを作成するようになります。この問題の結果はあなたの想像を超えています。

あなたは自分自身をコントロールしようとします。同僚もあなたを助け、あなたが歩き回っているときに間違いをすぐに修正します。ただし、あなたとあなたの同僚は間違いを犯すものであるため、最終的には少なくともある程度の失敗は避けられません。後で、あなたまたは他の誰かが、ページ上の CSS エラーによって引き起こされた問題を修正する必要があります。

あなたもあなたの同僚も、自分が犯した間違いについて話し合うのは恥ずかしいからです。時にはイライラしたり、精神的に傷ついたりすることもあります。一貫した記述スタイルなど、コード ベースを維持するのに特定の規律が役立つ場合がありますが、手動で実装すると少し衒学的で退屈に見えるかもしれません。そうしないと、あなたが普段好んでいる強引で頑固な要素が出てきてしまいます。

さらに、コードレビュー後に他の人がエラーを指摘するのを待つのではなく、時間内にエラーを修正し、その後自分で修正を加えて、そのようなエラーを二度と起こさないことを宣言したいと思うかもしれません。 CSS にエラーがある場合、タイムリーなフィードバックは時間を大幅に節約するのに役立ちます。

必要なのはエラーのないマシンです

CSS を理解し、あなたの意図、好み、アイデア、弱点などを理解する、エラーのないマシンが必要です。

このマシンには制限があります。すべてのものは完璧ではありません。ただし、この制限はあなたとあなたの同僚では異なります。エラーを防ぐことができる限り、たゆまぬ努力を続けます。その間、あなたと同僚はいつでもマシンを改良して、その機能を拡張したり、制限を弱めたりすることができます。これはオープンソースであり、CSS の記述ミスを防ぎたいと考えている他の作成者など、世界中の人々が参加して自分の役割を果たすことができます。

他のものと同様、CSS 作成者にはリンターが必要です

これらのエラー防止プログラムを「リンター」と呼びます。 Javascript には、より優れたリンターがいくつかあります。特に ESLint は奇跡のように機能し、優れたリンターがいかに役立つかを示しています。しかし、CSS ではそれほど幸運ではなく、特別なプリプロセッサを備えた Ruby ベースの scss-lint と古い CSS Lint という選択肢が非常に限られています。

しかし、これは PostCSS が登場する前の話です。さらに、PostCSS は、よりインタラクティブな CSS ツールを構築するためのメソッドをいくつか提供します。 CSS に似た構文を解析して抽象構文ツリー (AST) プラグインに変換し、分析と操作を行うことができます。また、カスタム パーサーを使用すると、PostCSS は非標準の無効なパターン (// コメントなど) も処理できます

成熟した条件では、PostCSS の強力な機能と scss の利点に基づいて、より強力な機能を備えたリンターをすでに生成できます。 lint と ESLint の最高の機能からインスピレーションを得ています。

私は数人の友人とこのプロジェクトに取り組んでいます。ここで、私たちが開発したツール、stylelint を紹介します。

stylelint を使用してできること

以下は、stylelint の機能とルールの概要です。アイテム数は100以上あり、拡張性があります。

この時点で、少し焦っていることに気付いた場合は、(「分かった、分かった: stylelint は素晴らしい効果を発揮すると信じています。要約する必要はありません。」)。次のセクションに進んで、いくつかの問題に対処し、いくつかのヒントを提供します。

エラーキャッチ

一部の stylelint ルールは、スペルミスや、注意力が散漫になったり目が曇ったりしたときに発生した省略など、明らかなエラーをキャッチするように設計されています。たとえば、空のブロック、無効な 16 進値、重複したセレクター、名前のないアニメーション名、不正な線形グラデーション構文を抑制できます。

他のルールは、より微妙なエラーを見つけるために最善を尽くすことに関するものです。 ルールは次のとおりです。対応するプロパティ ( margin-top など) をオーバーライドする短縮プロパティ ( margin -top など) を使用する場合は、ユーザー側の見落としが原因である可能性があるため、警告を表示します。さらに、警告を発するルールもあります。たとえば、ルール A がルール B の前に出現するが、ルール A のセレクターの方が優先順位が高いため、実際にはルール B をオーバーライドするなど、混乱を招く状況が発生した場合です (たとえば、ルール A が.foo.bar{···}、ルール B は .foo{···})。これは非常に難しい状況です。

PostCSS douse プラグインを使用して、ブラウザがこのスタイルをサポートしているかどうかを確認するルールもあります。もう 1 つは、混乱を避けるために css-colorguard プラグインを使用して色の類似性を示します。 (注意: これは、PostCSS に加えて stylelint を使用する主な利点の 1 つです。stylelint は、他の PostCSS プラグインと比較して、非常に少ない労力でプロンプトを表示できます。)

ベスト プラクティスを強制する

スタイルシートで体系的なアプローチを使用する場合、またはコードにスタイル ガイドを設定する場合は、これらのパターンを禁止する必要があります。 stylelint はこれらの関数をすでに提供しています。

まず、セレクターを厳密に制御する必要があります。 stylelint を使用すると、特定の特異性を超えてセレクターを無効にしたり、ネストの深さに制限を設定したりできます。カテゴリ セレクター (ID のないセレクターなど) を抑制し、残りのセレクターに正規表現の命名規則を使用できます。

! important や、ブラウザがサポートしていないブラウザ ハックの使用を無効にすることができます。 Autoprefixer を使用する場合 (または使用する必要がある場合)、ソース スタイルシートでのベンダー プレフィックスの使用を無効にすることができます。

より厳密にしたい場合は、絶対的な一貫性を確保するために構成に時間を費やすことができます。スタイルシートのプロパティの順序を強制し、ブラックリスト、ホワイトリストのプロパティ、値、関数を提供するユニットもあります。

コード スタイル規則を適用する

stylelint にはコード スタイル規則を自動的に適用する機能があるため、あなたやチームメイトがコード スタイル規則を積極的に設定する必要はありません。私たちは、これらのルールをより包括的かつ柔軟にすることに取り組んでいます。

これらのルールは主にスペースに焦点を当てていますが、引用符、大文字と小文字、小数点の前にゼロを書くこと、キーワードの使用や値のスペルアウトなど、他の詳細にも適用されます。

あなたとあなたのチームメイトが書式設定規則 (たとえば、宣言ではコロンの後に常にスペースを残す) を確立し、それを stylelint 設定で変更でき、それについて再度話し合う必要がなくなることを夢見てください。機械王国で実行させてください。

すべてを定式化して拡張する

ESLint (および CSS Lint) の作成者である Nicholas Zakas は、ESLint の成功はその拡張性にあると書いています。 stylelint は、ESLint の先例に倣い、CSS 作成者に拡張可能なリンターを提供しようとしています。

独自のルール プラグインを作成して公開できます。すでにたくさんのプラグインが利用可能になっており、私たちは他の人の素晴らしいプラグインを楽しみにしています。

構成は拡張可能であるため、共有することができます。プラグインに関しては、ESLint からこの機能の価値を学びました。 WordPress と SUITSS の構成が含まれ、公開されているものを確認してください。

stylelint の組み込みヒントが気に入らない場合は、組織向けであっても独自のスタイルを手動で作成できます。警告メッセージを提供するために使用されるルールをカスタマイズすることもできます。

stylelint の API を使用すると、テキスト コンパイラ プラグインを作成してテストし、ワークフローのあらゆる側面に stylelint を統合できます。

stylelint 拡張機能に関するアイデアがありましたら、ぜひお知らせください。

予想される質問への答え

あなたの心の中にはいくつかの質問があるかもしれません。ここでは、最も一般的な質問についていくつか説明します:

SCSS 以下で stylelint を使用できますか?

答えは「はい」です。SCSS で stylelint を使用でき、Less でもサポートされています。 PostCSS ではカスタム パーサーが許可されているため、stylelint はさまざまな非標準構文を簡単にサポートできます。解析用に PostCSS パーサーをカスタマイズできます。

PostCSS パーサーのおかげで、stylelint は SCSS、Less、および新しい SugarSS をサポートしています。別のカスタム構文サポートを実装したい場合は、PostLess を通じて実現できます。

もちろん、非標準の構文には障害となる特定のルールがあります (Sass ID セレクターを混乱させる #{$interpolation} など)。 stylelint はスタイルシートのスタイルをマスクしようとするため、標準 CSS を使用する人、SCSS などの拡張言語を使用する人、奇妙なカスタム プロパティを使用する人などがいます。これらにより、必然的に、埋める必要のあるいくつかの穴が生じます。ただし、私たちはこれらのバグを見つけ次第、継続的に取り組んでいます。その間、スタイルシートごとまたは行ごとにルールを完全に無効にしたり、無効にしたりすることができます。

stylelint は将来の CSS 構文を使用できますか?

はい！上記の回答と同様に、stylelint は、将来の CSS 構文 (おそらく PostCSS プラグイン経由) の有効化を含め、PostCSS が理解できるものはすべて理解できます。実際、一部の stylelint ルールは、将来の CSS 構文と一部のカスタム プロパティを特別に処理します。

stylelint の設定は膨大です。どこから始めればよいですか?

次の 3 つの構成方法をお勧めします。

• 公開された構成を拡張する。私たちは、ユーザーに一貫したベースラインを提供するために、stylelint 構成標準を維持しています。そして多くの構成も発表されました。
• 最初から始めて、一度に 1 つのルールを追加します。デフォルトでは、どのルールも有効になっていないため、手動でルールを追加すると、どのルールが適用されるのかがわかり、追加した各ルールを理解できます。
• コピー＆ペースト設定を有効にして、使用するオプションを決定し、それらを選択的に削除します。

ありがたいことに、膨大な stylelint 設定を何度も記述する必要はありません。好きなスタイルを選んでどこでも使用できます。

stylelint を実行する最も簡単な方法?

ほとんどの人にとって、最も簡単な方法はコマンドラインを使用することです。

gulp プラグインを使用したい場合は、gulp-stylelint を使用できます。 Webpack に関しては、選択できるオプションがたくさんあります。これらのプラグインが、Grunt などの他の stylelint プラグインを作成するきっかけとなることを願っています。 (オープンソース プロジェクトで見つけることができます!)

PostCSS プラグインを使用して、プラグインに含まれるものを含めて stylelint を実行することもできます。これは、PostCSS (ほぼすべてのコンパイル ツールをカバーします) を使用できる場所ならどこでも stylelint を使用できることを意味します。

さらに、最速のフィードバックを提供する、Atom、Sublime Text、VS Code 用の stylelint テキスト コンパイル プラグインもあります。詳細については、stylelint Web サイトの補完ツールのリストを確認してください。

コマンドラインからは次のようになります。

Atom では次のようになります。

stylelint でエラーを修正できますか?

いいえ、しかし、stylefmt と呼ばれる別のツールはまさにそれを目的としています。これは、lint に使用するものと非常によく似た stylelint 設定を使用し、あらゆるエラーを修正できます。コミュニティからの貢献により、stylelint が stylelint ルールに違反するバグに自動的にパッチを適用できるように進化できることを願っています。 彼らがこの目標を達成できるよう支援してください。

CSScomb や、stylelint と組み合わせた Perfectionlist などの他のツールを使用して、自動的にブレークを修正したり強制的にブレークを強制したりすることもできます。

linting を使用した制約の補完

優れた CSS には膨大な量の制約が存在します。そのため、私たちは SMACSS、ACSS、BEM、SUITCSS、ITCSS などの手法について議論することに多くの時間を費やしています。不適切な CSS を書くのがいかに簡単かは誰もが知っているので、CSS スタイルを書くことを恐れなくなったら、仕事において賢明な戦略を確立し、勇敢にそれに固執する必要があります。

stylelint の目標は実行を自動化することであり、CSS 作成者が独自の戦略を実行するために使用できるルールのコア セットとプラグイン可能なフレームワークを提供します。

ぜひ試してみて、どのように機能するかをお知らせください。コントリビューション ルール、機能強化、テスト、バグ修正、ドキュメント、新しいアイデア、または単なるフィードバックなど、より良い改善のためのアイデアをお持ちの場合は、ぜひご連絡ください。これにより、あらゆるレベルの開発者にやるべきことが与えられます。

この記事は @David Clark の「Lint your CSS with stylelint」に基づいて翻訳されており、翻訳全体に私たちの独自の理解と考えが含まれています。翻訳が良くない場合、または何か間違っている場合は、業界の友人にアドバイスを求めてください。 。この翻訳を転載する場合は、英語のソースを明記してください: https://css-tricks.com/stylelint/。

Jingzi

現役学生、学部コンピューター専攻。積極的で笑いが大好きな女の子。フロントエンドが大好きで、他の人とコミュニケーションしたり共有したりするのが好きです。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶