コードスタイルガイド

• 行は最大80文字にしてください。
• 命名は簡潔さよりも明瞭さを優先します。
• ページ、パーシャル、レイアウトは「.liquid」または「.md」で終わります。

マークアップMarkup permalink

ほとんどの場合、マークアップを書くためにLiquidJSとMarkdownを使用しています。通常のHTMLをどこでも使用する必要がある場合は、HTML5を記述しますが、厳密なXHTMLスタイルを優先します。

• 適切に整形されたマークアップを使用します。要素は適切にネストされており、オーバーラップしません。
• 要素と属性はすべて小文字で書きます。
• すべての属性を引用符で囲みます。
• 空の要素は後ろのスラッシュの前にスペースを入れて自己終了します (<hr />)

スタイルStyle permalink

このウェブサイトはSCSS構文でSassを使用しています。別のものを書き換える前に、私たちが提供しなければならないクラスを使用していることを確認してください。そうでなければ正当な理由を説明できるときのみです。

• 明瞭にするために、Brad Frostが記述しているスタイルを使用します。
  • 古いクラスはまだこのスタイルを使用していませんが、将来的にリファクタリングします。
  • sl-のグローバルネームスペースを使用します。
  • では、Harry Robertsが推奨しているクラスの接頭辞を使用しますが、はるかにシンプルなものを設定しています。
    • c-はコンポーネントを表します。例: sl-c-card
    • l-はレイアウトを表します。例: sl-l-grid
    • is-とhas-は状態を表します。例: sl-is-active
    • js-は明確にJavaScriptターゲティング用に作成されたクラスを表します。例: sl-js-toggle-navigation
  • BEM構文を使用します。
    • ブロック – コンポーネントの全体的なオブジェクト。例: sl-c-card
    • 要素 – ブロックの子。例: sl-c-card__header
    • モディファイア – バリエーション。これはブロックに追加できます。例: sl-c-card--primary。要素に追加することもできます。例: sl-c-card__header--large
• 可能な限りクラスがフラットになるようにし、あまり深くネストしないようにします。
• ラップマークダウンのブロックや他の長いテキストの周りのクラスなど、すべてをターゲットとするラップユーティリティを使用している場合を除き、要素セレクタを使用しないでください。これは、クラスの使用が理にかなっていない場合に限定されます。これを行う際には注意してください。このような状況では、コードレビューでフィードバックを提供できます。
• 変数、ミックスイン、プレースホルダーセレクタ、またはクラスの命名には、一般から特殊へのアプローチを使用します。詳細についてはこちらの記事を参照してください。
• コンマで区切られたセレクタは、別の行に記述します。