Quels sont les scénarios de meilleures pratiques pour l'utilisation d'un framework CSS? Quand est-il préférable de "rouler votre propre" CSS à partir de zéro plutôt que d'utiliser des frameworks?
Quels sont les scénarios de meilleures pratiques pour l'utilisation d'un framework CSS? Quand est-il préférable de "rouler votre propre" CSS à partir de zéro plutôt que d'utiliser des frameworks?
Réponses:
Les frameworks CSS sont un peu délicats car ce ne sont pas vraiment des frameworks pour moi. Ce sont simplement des classes prédéfinies. Mais ce n'est pas votre question.
Les frameworks CSS sont parfaits pour les maquettes et les armatures. Je ne recommanderais pas de les utiliser sur un site en direct car ils ajoutent des classes dénuées de sens à votre balisage. ".span3" ne me dit rien du contenu, seulement du design.
Cependant, blueprint a quelques outils sympas qui vous aident à combiner ses classes de framework et vos classes sémantiques une fois que vous avez terminé.
Je roule toujours mon propre CSS.
Evitez-les, ils ne sont que gênants.
Surtout celui-ci.
* { margin:0; padding:0; }
Ma plus grande plainte est que si vous héritez / maintenez un site qui utilise une réinitialisation et / ou un framework, vous devez apprendre ce framework avant de pouvoir modifier le site.
Lorsque j'ajoute une balise h1, j'attends certaines choses. La plupart des réinitialisations suppriment tout le remplissage, la marge, le bloc, etc. de sorte qu'une balise h1 n'agit plus comme elle le devrait par défaut. Je dois donc revenir en arrière et ajouter tout ce qui était là en premier lieu.
Généralement (selon mon expérience), ses personnes qui ne comprennent pas les CSS utilisent les réinitialisations et les cadres, et cela entraîne plus de travail pour les personnes qui le font.
* {margin:0; padding:0;}
est la réinitialisation CSS la plus importante de toutes. Il supprime margin-top/maring-bottom
sous toutes les balises même les p
balises, donc après vous ne verrez pas un énorme espace entre chaque ligne. Même ce site Web utilise probablement p {margin:0;}
sinon le navigateur vivrait un espace énorme entre chaque ligne. Je me demande comment vous pouvez dire qu'ils sont ennuyeux.
Je recommande également d'utiliser un reset.css d'Eric Meyer, mais je pense que les "frameworks" CSS peuvent être bénéfiques pour la mise en page. Blueprint, YUI grid et 960-grid peuvent vous aider à réaliser des mises en page très compliquées sans écrire le CSS vous-même.
Bien qu'il y ait des inconvénients qui ont été mentionnés, la même chose pourrait être dite à propos de la construction d'un site Web à partir d'un CMS au lieu de rouler du code personnalisé par exemple, mais ils peuvent toujours être utiles et pour de nombreux sites, les avantages obtenus l'emportent sur les problèmes de CSS ou de performances.
Si vous implémentez votre propre conception, vous allez écrire une partie de votre propre CSS (à moins que quelqu'un d'autre n'ait écrit la conception exacte que vous voulez).
En supposant que vous écrivez certains de vos propres CSS, les «frameworks» peuvent être utiles lorsque vous avez des styles qui sont:
Pour les styles vraiment simples, il est préférable d'utiliser des classes pour indiquer ce qu'est quelque chose (par exemple class="navigation"
), puis de définir son apparence en appliquant des règles de style à cette classe dans votre feuille de style.
Mais pour les styles plus complexes qui ne sont pas nécessairement liés à un élément (par exemple, les styles liés à la mise en page, le genre de frameworks qui donnent des noms .span3
), il n'y a rien de mal à les mettre dans une classe et à appliquer cette classe dans le CSS. Vous pouvez utiliser les deux approches ensemble.
Dans les sites plus grands et plus complexes où les éléments sont susceptibles d'être combinés de manière imprévisible, une approche de type framework peut vraiment vous aider à gérer votre code.
Je dirais que vous pourriez aussi bien écrire votre propre «cadre». Je mets «framework» entre guillemets parce que CSS n'est vraiment pas un gros langage. Vous pouvez lire CSS: The Definitive Guide (Eric Meyer) en une journée, puis lire tout le code dans par exemple Blueprint (un «framework» CSS) et comprendre à peu près ce qui se passe. Vous devrez peut-être rechercher un peu les solutions de contournement IE, mais nous parlons au moins d'un ordre de grandeur de complexité moindre que par exemple jQuery ici.
J'utilise blueprint, pour CSS.
CSS est, comme tout le monde le dit ci-dessus, très simple.
Cependant, en réalité, vous devez considérer la plate-forme.
Avec CSS, le moteur de rendu ajoute à la complexité.
Gecko vs WebKit vs Presto vs Trident ... qui veut faire tout ça?
Ce qu'un «framework» vous offre ici, c'est la possibilité d'écrire des mises en page qui fonctionneront très probablement sur tous les navigateurs, vous n'aurez donc pas besoin de googler pour le mode excentrique IE 7 «WTF-am-I-do = -this-crap» fixer, ou quelque chose de même ridicule.
Les cadres feront 90% de la mise en page que vous souhaitez, puis vous pourrez toujours ajouter vos propres styles plus tard.
Donc, pour répondre à la question, je dirais choisir un cadre et voir s'il fonctionne pour vous. C'est juste possible. Ensuite, vous êtes en or et pouvez revenir à tout ce que vous vouliez réellement faire. Sinon, étendez-le, utilisez css et modifiez ce qui n'a pas fonctionné. De cette façon, vous conservez l'avantage multi-navigateur, mais vous pouvez toujours le personnaliser.
Comme petit avantage, si vous en choisissez un et que vous l'utilisez tout le temps, puis que vous tombez malade ou que vous êtes promu et que vous devez former votre successeur, vous pouvez dire:
"Oui, j'ai utilisé le framework ABC. Les documents sont là. Le code est là. La formation terminée. Bonne chance."
Quand il résout tous vos besoins . (Ceci est basé sur l'idée de la couture .)
Du seul livre sur les cadres? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Lien uniquement car il est gratuit et pertinent ici.)