Freecodecamp: freeCodeCampのCSSスタイルガイドの作成

@raisedadeadどう思いますか？

ありがとう、あなたはこれらを糸くずにすることができる方法を知っていますか？ リンターを使用していますか？

@raisedadead @tomasvn私によると、CSSスタイルガイドを作成してそれに固執するプロセスは、長期的には有用な結果をもたらさないでしょう。 React、Yarn、Babel、および他の多くのオープンソースプロジェクトは、CSSスタイルのフォーマットにPrettierおよび他の同様の拡張機能を使用しています。

スタイルガイドを作成する代わりに。 寄稿者に、IDE /コードエディタにPrettierをインストールするように指示する必要があります。
@raisedadeadこれ

ありがとう、あなたはこれらを糸くずにすることができる方法を知っていますか？ リンターを使用していますか？

きれいに動作します;）。 CSSスタイルのルールに違反すると警告が表示されます。

スタイルガイドを作成する代わりに。 寄稿者にIDE /コードエディタにPrettierをインストールするように指示する必要があります。

問題から身を隠すことは誰にも役立ちませんでした...😅！

私はフォーマッターを避け、代わりにリンターを使用することに強く賛成です。 自動化はクールで簡単に聞こえますが、標準コードを書く際の要点が失われます。

私見ですが、学習を取り巻くコミュニティである私たちは、リンターが指摘するコードスタイルの問題を修正することを躊躇するべきではありません。

また、Prettierは_Opinionated_コードフォーマッターであることに注意してください

私によると、CSSスタイルガイドを作成してそれに固執するプロセスは、長期的には有用な結果をもたらさないでしょう。

これは間違った議論だと思います（統計がある場合は、私が間違っていることを証明してください）。

Airbnb JSスタイルガイドやJSStandardなどをチェックすると、ヘルパーに標準コードを書いてもらい、何千もの企業や開発者に毎日使われています。

@raisedadead私たちは問題から隠れていません...！ リンターを使用することはできますが、Prettierを使用した単一のキーバインディングで同じタスクを実行できるので、なぜそれを長時間実行しようとしているのでしょうか。

これは間違った議論だと思います（統計がある場合は、私が間違っていることを証明してください）。
Airbnb JSスタイルガイドやJSStandardなどをチェックすると、ヘルパーに標準コードを書いてもらい、何千もの企業や開発者に毎日使われています。

私はこれについてあなたに強く同意します！ 彼らのJSスタイルガイドは本当にとても役に立ちます。

私たちは問題から身を隠していません...！ リンターを使用することはできますが、Prettierを使用した単一のキーバインディングで同じタスクを実行できるので、なぜそれを長時間実行しようとしているのでしょうか。

なぜなら、標準コードを書きたいのですか？ 寄稿者は好きなツールを自由に使用できますが、ガイドが必要ないというわけではありません。

とにかく、ガイドに関する建設的なフィードバックのためにこのスレッドを保持しましょう。代わりに、チャットでいつでもディスカッションを行うことができます。

@tomasvn RFCは面白そうです。フィードバックに興味があるので、私たちがインスピレーションを得ることができるいくつかの確立されたスタイルガイドとツールを調べることが可能になると思いますか。

なぜなら、標準コードを書きたいのですか？ 寄稿者は好きなツールを自由に使用できますが、ガイドが必要ないというわけではありません。

私もこれであなたと一緒です。 さて、スタイルガイドを使ってみましょう。スタイルリントをリンターとして使用できます。

@raisedadeadstylelintは問題ないようです👍それは彼のドキュメント全体の矛盾について寄稿者に警告するので

@tomasvn新しいカリキュラムと学習プラットフォームを立ち上げました。 あなたはまだこれを手伝うことに興味がありますか？

すべてのCSSには適切なリファクタリングが必要です。これは、スタイルガイドを作成するだけでなく、向きを変えてすぐにプロジェクトに適用し、すべてのリポジトリがそれに準拠していることを確認する良い機会です。

@QuincyLarson確かに、freecodecampは非常に大きなコードベースであるため、時間をかけてCSSのリファクタリングを支援できます。どこから始めればよいか教えてください。

@tomasvnそれは素晴らしいでしょう！

freeCodeCampにはそれほど多くのCSSがありません。 freeCodeCampのCSSは、主に「main.less」にあります。 そして、Bootstrap3.0を使用しています。

最終的にはBootstrap4.0に移行するか、CSSを書き換えてFlexboxを使用する可能性があります。 ただし、当面の間、いくつかのアプリケーションでReact Bootstrapを使用しており、現在はBootstrap3.0にロックされています。 したがって、main.lessの既存のカスタムCSSにアクセスしてクリーンアップし、冗長性を減らして論理的に配置することをお勧めします。

@QuincyLarsonが取得し、main.lessはclient / less / main.lessにありますが、これは正しいファイルですか？

@tomasvnご

@tomasvnこれについて助けが必要ですか？ 喜んで貢献させていただきます

@tomasvnこれに取り組み始める機会は@ borisyordanovはい-これであなたの貢献を歓迎します。

@borisyordanov遅延して申し訳ありませんが、先に進んで

@tomasvn私はあなたにメールを送りました、チャットで会ってこれを計画しましょう。 プロジェクトの実行に問題がある場合は、まだガイドを読んでいないか

それでも必要がある場合は、これを手伝うことができます

@ Jgriebel1990 tomasvnと連絡が取れなかったので、私が知る限り、進展はありませんでした。 お気軽に引き継いでください

@ jgriebel1990お気軽に

@tomasvn @ Jgriebel1990と@borisyordanovはこれに取り組む機会を得ていないようです-あなたはまだこれを手伝うことに興味がありますか？

@QuincyLarson Windowsで動作するようにしますが、実行に問題があります。環境を設定できない場合は、スレッドを閉じてください。

@tomasvn心配ありません-ローカルで実行できるようになりましたか？

関連： https ：

@QuincyLarson運が悪い、ローカルで実行する

@tomasvnローカルでセットアップするときに、どのような問題に

@tomasvnこれを読んでください：//github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead https://github.com/freeCodeCamp/design-style-guideの更新に伴い、この問題は必要ですか？

その詳細はロードマップにあります。 最終的には、UIコンポーネントの中心的なリソースになります。

CSSボーダースタイル
border-styleプロパティは、表示する境界線の種類を指定します。

次の値が許可されます。

点線-点線の境界線を定義します
破線-破線の境界線を定義します
solid-実線の境界線を定義します
double-二重境界線を定義します
溝-3Dの溝付き境界線を定義します。 効果は境界線の色の値によって異なります
ridge-3Dの隆起した境界線を定義します。 効果は境界線の色の値によって異なります
はめ込み-3Dはめ込み境界線を定義します。 効果は境界線の色の値によって異なります
outset-3Dの開始境界線を定義します。 効果は境界線の色の値によって異なります
none-境界線を定義しません
hidden-隠し境界線を定義します
border-styleプロパティには、1から4の値を指定できます（上部の境界線、右側の境界線、下部の境界線、および左側の境界線）。

例-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

ねえ！ これの進捗状況は？ 私は助けることができます！

@ManasMahanand 、ご関心をお寄せいただきありがとうございます。
利用可能なcssリンターを調べて比較し、stylelintよりも優れたものがあるかどうかを確認できれば素晴らしいと思います。
次に、リンターをリポジトリに追加し、CSSファイルを変更して、リポジトリにエラーがないことを確認します。

@madabdolsahebします！

@ahmadabdolsaheb待って、リポジトリに追加するとはどういう意味ですか？

eslintがすでにあるように、リンターを依存関係としてインストールしますか？

または、github自体にテストをインストールする方法があるので、スタイルガイドに従わない限りマージできませんか？

わかりました、stylelint自体が良いオプションのようです。 私はそれをインストールしています。

実験のために、OPが提案するルールを設定します。 次に、すべてのルールを削除して、PRを開きます。 その後、ルールについて話し合い、設定できます

https://stylelint.io/user-guide/rules/about

このリンクを見て、設定できるルールの種類を確認できます。

現在、prettierを使用するlint：cssコマンドがすでにあります。 stylelintを使用するように変更できます。

とにかく、私はそれをインストールしました、そしてそれは設定されたルールに基づいてエラーを首尾よく検出します。 PRを開きましょうか。

prettierを削除する必要はありません。prettierには、prettier構成ファイルを拡張するために使用できるstylelintルールの構成があります。

驚くばかり。 明日はそれに取り組みます。

stylelintルールのよりきれいな構成（またはその方法）が見つかりませんでしたが、現在、競合をチェックし、競合するルールをオフにする別のパッケージstylelint-config-prettierをインストールしました。

私が考えているのはlint：cssコマンドで、stylelintコマンドをよりきれいに実行することもできます。

（意見）fccにとって意味のあるものに基づいて、すべてのカスタムstylelintルールを記述でき、さらにきれいなものを完全に削除できると思います。 これは単なる意見であり、決定するのは皆さんに任されています。

進捗状況について@ManasMahanandに感謝します。 セカンドオピニオンのために@ojeytonwilliamsにタグを付けています。

prettierはフォーマットでうまくいくと思うので、それを維持したいと思います。 https://github.com/prettier/stylelint-prettierを使用する場合、prettierはstylelintのプラグインとして使用され、両方の長所を活用できます。

これは、JavaScriptリンティングにすでに使用しているアプローチを反映しています。