Les meilleures pratiques Magento fichiers CSS

Question

J'ai quelques questions au sujet des fichiers livrés avec css magento et les meilleures pratiques pour faire leurs modifications.

Tout d'abord je ne pouvais trouver une description de base pour tous les fichiers qui viennent avec css magento. Par exemple, lorsque le fichier est de reset.css utilisé?

Mais ma plus grande question est, pourquoi magento fait presque tout dans le styles.css par défaut? Ne serait-il une meilleure idée de diviser le css en plusieurs fichiers plus petits et charger ceux dans le fichier local.xml pour les différents points de vue? Cela permet de mieux contrôler le style des éléments.

Par exemple, on pourrait créer un fichier css pour les vues simples de produits et de charger le fichier dans local.xml et un autre pour les produits groupés.

Une autre question que j'est, sur les styles -moz- de *. Pourquoi sont-ils dans le styles.css et non dans un fichier css spécifique firefox? Si j'utilise Opera (ou tout autre navigateur), ils montrent ce style comme des erreurs parce qu'ils ne les connaissent pas.

Answer 1

  

Mais ma plus grande question est, pourquoi magento est en train de faire presque tout   le styles.css par défaut? Ne serait-il une meilleure idée de diviser la   css en plusieurs fichiers plus petits et charger ceux dans le fichier local.xml   pour les différents points de vue? Cela permet plus de contrôle sur le style   des éléments.

Non, ce ne serait pas mieux. Les fichiers CSS séparés entraîneraient plus de demandes HTTP qui ralentirait votre site Web. Je crois que vous avez 2 options:

1) Séjour avec 1 grand fichier CSS, mais rapetisser il

2) de Split-les dans plusieurs fichiers plus petits pour augmenter la lisibilité pour vous-même et demandez-leur automatiquement combinés en utilisant le Fooman Speedster l'extension Magento .

  

Une autre question que j'est, sur les styles -moz- de *. Pourquoi sont-ils   le styles.css et non dans un fichier css spécifique firefox? Si j'utilise Opera   (Ou tout autre navigateur), ils montrent ces styles comme des erreurs parce qu'ils   ne les connaissent pas.

AFAIK il est considéré comme une pratique générale de le faire de cette façon. Il y a plus d'inconvénients sur l'écriture de chaque style spécifique du navigateur dans un fichier séparé.

Par exemple il suffit d'ajouter comme ça pour les coins arrondis:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

Selon le navigateur, le visiteur utilise le style correspondant sera appliqué. Les navigateurs qui ne prennent pas en charge ces propriétés seront simplement vous montrer des coins carrés.

Answer 2

Vous avez à regarder ce des deux côtés.

• Le navigateur, le téléchargement et le rendu du contenu
• Le développeur, écriture / édition / gestion de CSS

Un navigateur veut que quelques fichiers si nécessaire, combinés et minified. Ainsi que l'idéal ayant aussi peu et aussi simple que possible CSS (ie. Ne pas avoir 1+ niveaux de dépendance hiérarchique).

Mais un développeur peut lutter pour gérer tout dans un seul document, ou trouver moins productifs au travail comme ça.

Ceci est vraiment pourquoi le traitement des CSS (par exemple. SASS / MOINS) existe. Alors que vous pouvez avoir simple, propre et commenté CSS, structuré comme bon vous semble, mais ce que le navigateur obtient est un fichier combiné et le fichier optimisé. Donc, ce qui vous donne le meilleur des deux mondes.

De façon réaliste, vous avez seulement besoin 2 feuilles de style (écran et impression) - bien que les navigateurs plus récents peuvent simplement faire via les requêtes des médias.

En ce qui concerne l'entrée de CSS concerne, faire tout ce qui rend le développement plus confortable pour vous. Mais en ce qui concerne la production est, essayer de vous assurer que vous avez aussi peu de fichiers, optimisés et de-dupés possible.