benjaminsehl/liquid-theme-standards

Que fait liquid-theme-standards ?

Normes de codage CSS, JavaScript et HTML pour les thèmes Shopify Liquid. Couvre la nomenclature BEM dans les balises de feuille de style, les jetons de design, les propriétés personnalisées CSS, les composants Web pour les thèmes, le CSS défensif et l'amélioration progressive. À utiliser lors de l'écriture de code CSS/JS/HTML dans des fichiers .liquid ou des fichiers d'actifs de thème.

Normes de codage

CSS

• Nomenclature BEM : Utilisez la convention Bloc, Élément, Modificateur (BEM) pour nommer les classes CSS. Exemple : .product-card__title--highlighted.
• Propriétés personnalisées CSS : Préférez l'utilisation de propriétés personnalisées CSS (variables CSS) pour les jetons de design (couleurs, espacements, polices). Évitez les valeurs en dur.
• CSS défensif : Écrivez des règles CSS qui résistent à un contenu imprévu. Par exemple, utilisez max-width pour les images, word-break: break-word pour les textes longs, et overflow: hidden lorsque nécessaire.
• Amélioration progressive : Assurez-vous que le style de base fonctionne même sans CSS avancé ou JavaScript.

JavaScript

• Composants Web : Utilisez des éléments personnalisés (custom elements) pour encapsuler le comportement et le style des composants. Exemple : <product-gallery>.
• Évitez les sélecteurs globaux : Préférez la portée locale des composants (shadow DOM si approprié) pour éviter les conflits de styles.
• Gestion d'événements : Utilisez des écouteurs d'événements attachés au niveau des composants (ou du document via délégation) plutôt que des attributs inline comme onclick.

HTML (dans Liquid)

• Balises de feuille de style : Lorsque vous écrivez du CSS dans des balises {% style %} chez Shopify, utilisez toujours BEM et les propriétés personnalisées.
• Sémantique : Utilisez des éléments HTML sémantiques (<section>, <nav>, <article>, etc.) pour structurer les sections de thème.
• Accessibilité : Incluez des attributs aria-label, role et une navigation au clavier pour tous les composants interactifs.

Général

• Fichiers d'actifs : Pour les fichiers JS ou CSS dans le répertoire assets, respectez les mêmes normes de nommage et de structure.
• Documentation : Documentez les composants réutilisables avec des commentaires décrivant leur but, leurs paramètres et leur comportement attendu.

Exemple d'utilisation

{% style %}
  .product-card {
    --spacing: 16px;
  }
  .product-card__title {
    font-size: 1.5rem;
    word-break: break-word;
  }
  .product-card__title--featured {
    color: var(--color-accent);
  }
{% endstyle %}

<div class="product-card">
  <h3 class="product-card__title product-card__title--featured">Produit en vedette</h3>
  <product-gallery images='{{ product.images | json }}'></product-gallery>
</div>

Références

• Documentation Shopify sur les thèmes
• Guide BEM
• Composants Web chez Shopify