Comment organiser et optimiser son fichier CSS

Rédigé par Djb aucun commentaire

organiser son fichier style

Lors de la réalisation d'une intégration, on s'aperçoit très vite que notre feuille de style peut devenir un casse-tête si nous n'avons pas un minimum de rigueur et de méthode. 

Je vous donne une méthode qui me permet de maintenir facilement ma feuille de styles et de réaliser des modifications en un temps record.

J'utilise Compass/SASS ou LESS pour créer des variables (couleurs, taille des caractères, ....), préfixes CSS3 mais aussi pour découper ma feuille de style.

 

Exemple d'un découpage d'une feuille de style

 

body.scss

Le corps du site, les grandes lignes.

reset.scss

Réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter des différences d'affichage sur les navigateurs.

fonts.scss

La police de caractères mais aussi la mise en forme de votre texte (h1 à h6,  les liens, les paragraphes, ....)

footer.scss 

Mise en forme du footer

grid.scss 

La création des class mais aussi du responsive avec les  Media Queries 

header.scss

Mise en forme du header et de la navigation

sidebar.scss 

Mise en forme de la sidebar

form.scss 

Mise en forme des formulaires (input, les boutons, ...)

module.scss ou page.scss

Mise en forme d'une page spécifique ou d'un module (newsletter, slider, ...)

style.scss 

Compilation des fichiers .scss , mais aussi toutes les variables (couleur, taille, largeur du site, mixins, ...)

 

Pensez à ajouter _  devant les fichiers pour ne pas les compiler. (ex: _footer.scss)

 

Cette technique est réalisée sur le framework HTML5 et celui de PluXml disponible sur Github

 

Classé dans : Tutoriel Mots clés : Compass, SASS, CSS

A propos de l'auteur, Djb:

Fort de notre expérience dans la création et l'intégration de projets web, l'équipe Psd-HTML vous accompagnons dans la définition de votre charte graphique et la réalisation de votre projet Web - Intégrateur chez psd-html.fr

 

Écrire un commentaire