Bonjour,
Je souhaite me servir de compass pour mes projets de sites, mais pour l'instant la seule méthode que je trouve c'est de lancer un "compass watch" pour chacune de mes vues. d'un côté c'est pas super génant dans le sens où je ne travaille pas sur 2 vues en même temps...
pour explication : chacune de mes vues se trouve dans un sous-dossier d'un dossier view.
ce sous-dossier comprend :

  • un dossier css
  • un dossier scss (pour compass)
  • un dossier image
  • un dossier js
  • un fichier index.php

De votre côté comment faites vous ?
un peu comme moi ou est-ce que tous vos css et js se trouvent dans un seul et même dossier commun. (ce qui permettrait de ne lancer qu'un seul watch)

10 réponses


Benjamin Derepas
Réponse acceptée

Je te conseil de créer un dossier asset à la racine de ton site ou tu mettra les dossier suivants

  • js (contenant tes scripts et un dossier /lib pour les libraires)
  • css (contenant uniquement ton unique fichier de style.css)
  • scss (ou sass), qui contiendra ton fichier principale (style.scss) mais aussi tes partials comme _reset.scss, _typo.scss etc.
  • ton dossier image
Benjamin Derepas
Réponse acceptée

Pourquoi faire un css par page ? Oui, style.css contiendra le style de toutes tes pages

Je ne comprend pas vraiment ton problème. Si tu n'es pas à l'aise avec la CLI je t'invite à utilier une app comme Prepos, Koaloa, Codekit

mrdus
Auteur

ok je vais essayer d'être plus clair :
je code en MVC. mes vues se trouvent dans des sous-dossiers séparés : un dossier pour l'accueil, un dossier pour contacts, etc. pour chaque page du site.
Au début chacune de ces vues contenait un sous-dossier 'css' contenant des fichiers css à utiliser selon les pages.
(ainsi qu'un sous-dossier images et un sous-dossier js.)

  • views

    • accueil

      • css/*.css
      • scss/*.scss
      • images/*.jpg
      • js/*.js
      • index.php
    • contacts

    • css

    • scss

    • images

    • js

    • index.php

le tuto concernant compass (ou gulp) montre comment automatiser la compilation sur un seul et unique dossier : je prend mes scss dans tel dossier, je compile dans tel dossier.
mais si les scss sont dans différents dossiers ? on fait comment ? y a t-il une solution ?
ou alors j'ai tord de vouloir mettre mes css dans les dossiers des vues, et je devrais simplement les rassembler dans un unique dossier css, contenant tous les css de mon site. (solution que je viens de choisir)

mrdus
Auteur

ok
donc au lieu d'inclure dans mon header mon style.css et mon contacts.css (par exemple) je n'aurais plus qu'a inclure style.css qui contiendra aussi contact.css ?

mrdus
Auteur

un css par page pour ne pas charger un css immense et n'appeler que le css concernant la page. ($this->view->css = array('page.css') )
en tout cas merci.

Tout le code css , de chacune de tes pages, modules etc, est compris dans un et un seul fichier css. Après tu peux très bien créer des fichiers scss qui ne seront pas compilés (préfixés avec _) pour chaque page

Je commence aussi avec sass/compass et je commence déjà a déchanté.
N'est-ce pas finalement une erreur d'aboutir à un css unique parce qu'on veut gagner en production grace à sass/compass ?
quid de la maintenabilité de cet unique fichier css pour qui n'a pas les sources scss ?
quid pour des sites qui chargerait dynamiquement le contenu ET le css de pages dynamiques (ce que fais apparemment mrdus) ?

"Après tu peux très bien créer des fichiers scss qui ne seront pas compilés (préfixés avec _) pour chaque page"

Oui mais apparemment out l'utilisation des variables globales :-(

La plupart des intégrateurs et développeurs front end utilisent SASS ou LESS.
Pourquoi ? Et bien tout simplement parcequ'il offre des possibilités que le CSS n'offre pas par défault. Il permet un code modulaire, et c'est un gain de temps non négligeable, surtout couplé à des libraires comme Compass, Bourbon, ou encore les frameworks css comme Bootstrap^et Foundation.
J'aime voir ça comme le principe du MVC en php : on créer divers fichiers, chacun ayant son rôle, et le tout est inclu dynamiquement dans un fichier (index.php) lorsqu'on demande le serveur.
C'est un peu pareil avec SASS. De plus je te conseil fortement de suivre des conventions lorsque du travails avec sass. Conventions de nommage (BEM, OOCSS) mais aussi de structure (SMACSS).

De plus, je dirait qu'en règle général, l'appel d'une seule stylesheet est (dans 90% des cas) plus formant que d'avoir 5-6 stylesheet dans ta page (menu, slider, responsive, reset, plugins et j'en passe).
Bien sur au jour d'aujourd'hui avec les performances serveurs , et surtout l'optimisation du front (minifications et concéténation des css et javscript, optimisation des images à la volée), la taille de ton css importera peu .