Quel est le meilleur framework CSS et valent-ils l'effort?
En lisant sur un autre forum, je suis tombé sur le monde des cadres CSS. Celui que j'ai étudié spécifiquement est BluePrint . Je me demandais si quelqu'un d'autre était tombé sur des cadres CSS, suggérait lequel était le meilleur et s'il en valait la peine?
Les "frameworks" CSS manquent complètement.
CSS n'est pas comme JavaScript, où vous pouvez inclure une bibliothèque/structure de base, puis appeler des fonctions et des objets à partir de celle-ci pour effectuer un travail de niveau supérieur. Tout ce qu'un framework CSS peut vous donner, ce sont des règles déclaratives: des éléments par défaut de réinitialisation des règles du navigateur, des styles de classe à forcer pour créer votre page et des règles de mise en page utilisant 'float' et 'clear'. Vous pouvez l'écrire vous-même dans quelques lignes de CSS plutôt que de tirer dans le fardeau d'une centaine de règles-cadres.
Le truc de la "disposition de la grille" en particulier remonte au mauvais vieux temps de mélanger votre présentation dans votre balisage. 'div class = "span-24"' n'est pas mieux qu'une table, vous devrez y retourner et modifier le balisage pour affecter la mise en page. Et tous les cadres que j'ai vus sont basés sur des boîtes flottantes à pixels fixes, ce qui rend impossible la création d'une disposition liquide accessible sur une large gamme de tailles de fenêtre.
Il s'agit de création à l'envers, utile uniquement à quelqu'un qui a trop peur d'écrire une règle CSS.
Donc, personne n'a encore répondu à cette question (bien que j'aie vu quelques votes positifs), donc Je vais au moins tenter de répondre à la deuxième question de cette invite.
Les cadres CSS sont excellents; comme tout autre framework, ils réduisent le temps de développement et vous permettent de travailler immédiatement sur la conception spécifique au site et CSS. Ils pensent à des décisions difficiles pour que vous n'ayez pas à le faire.
Malheureusement, l'utilisation d'un framework présente deux inconvénients (en général):
Le cadre dicte la structure globale et la mécanique de votre code CSS. Maintenant, je ne parle pas d'une réinitialisation CSS (celles-ci sont utiles en elles-mêmes, mais ce ne sont pas de vrais cadres); Je parle d'un cadre honnête à bon, qui a déjà pris les décisions sur les balises sémantiques que vous allez utiliser dans votre document, etc. En tant que tel, vous êtes rendu dépendant du cadre et lorsqu'il y a un bogue dans le cadre, vous devrez le plus souvent le réparer vous-même.
Les cadres ne sont pas une excuse pour ignorer les problèmes CSS entre navigateurs/avancés. Vous les rencontrerez invariablement, tout comme vous le feriez avec un PHP ou framework JavaScript. Et vous devez savoir comment y faire face. Il y a un dicton commun que vous devez écrire le vôtre cadre d'abord, avant d'utiliser quelqu'un d'autre.
En jetant un rapide coup d'œil à Blueprint, je n'appellerais pas vraiment cela un cadre; peut-être une réinitialisation avec quelques goodies supplémentaires sur le dessus.
J'ai regardé BluePrint et quelques autres et le seul "framework" CSS que je recommanderais est Grilles YUI
Avantages:
- Écrit par l'un des meilleurs ingénieurs front-end (IMO) (Nate Koechley)
- Très petit. 4Ko
- Très flexible (1000 dispositions différentes)
- Prend en charge les dispositions de largeur fluide (100%) ainsi que les dispositions prédéfinies de largeur fixe à 750 pixels, 950 pixels et 974 pixels, et la possibilité de personnaliser facilement n'importe quel nombre.
- Prend en charge la personnalisation facile de la largeur pour les dispositions à largeur fixe.
- Les colonnes de modèle sont indépendantes de l'ordre des sources, vous pouvez donc placer votre contenu le plus important en premier dans la couche de balisage pour une accessibilité et une optimisation des moteurs de recherche (SEO) améliorées.
- Pied de page autonettoyant. Quelle que soit la colonne la plus longue, le pied de page reste en bas.
- Les dispositions inférieures à 100% sont automatiquement centrées.
- Noms de classe quelque peu sémantiques (mieux qu'en haut, à gauche, à droite, etc.)
Les inconvénients:
- Beaucoup de balisage supplémentaire par rapport au HTML et CSS manuscrits
- Prend un peu d'apprentissage pour comprendre comment faire des mises en page complexes
Comme d'autres l'ont signalé, il n'y a pas de véritables "cadres" pour CSS. Reset les feuilles de style aident aussi beaucoup à la mise en page. Je m'en tiens généralement à une feuille de style réinitialisée et j'y vais. Mais si vous n'avez pas beaucoup d'expérience CSS, les grilles YUI pourraient vous faire gagner du temps.
Compass est un véritable framework CSS dans le sens où il vous donne non seulement des modèles (à la fois YUI et blueprint), mais aussi des constructions réutilisables et des déclarations de niveau supérieur tout en vous donnant une syntaxe CSS familière.
Pourquoi utiliser les 'frameworks' css?
Si vous êtes pressé par le temps.
Si vous ne connaissez pas css et ne connaissez pas quelqu'un qui puisse l'écrire pour vous.
Si vous n'êtes pas trop précieux sur les normes, etc.
Je connais des programmeurs qui ont été très heureux d'utiliser Blueprint ou 960, car cela leur permet de créer une mise en page par eux-mêmes, sans se tourner vers un développeur front-end. Ceci est idéal pour les projets personnels ou les startups avec des ressources limitées.
Si vous avez déjà une bonne connaissance de CSS, alors vous avez probablement déjà une bibliothèque décente de mises en stock, vous n'aurez donc clairement pas besoin d'un cadre.
Cependant, si vous êtes un débutant et que vous avez juste besoin de mettre quelque chose en place, vous pouvez vous tourner vers un cadre, car cela rend la mise en page de base beaucoup plus simple et la compatibilité avec les navigateurs également.
Cela dit, de nombreux cadres prêts à l'emploi utilisent des noms de classe horribles, etc. Je connais certains sites Web qui ont pris un cadre comme point de départ et l'ont ensuite personnalisé avec leurs propres balises de classe et d'identification. Mais il est clair qu'un peu de travail est également impliqué dans cette réécriture. L'utilisation de quelque chose comme Compass, comme mentionné ci-dessus, aide à contourner cela.
Ainsi, les frameworks CSS - ils peuvent vous faire gagner du temps, au détriment de la sémantique. Ils peuvent également nuire à votre connaissance du CSS, mais cela dépend davantage de l'investissement que vous investissez dans l'apprentissage du sujet en général. La décision de les utiliser vous appartient.
Prenez le temps d'étudier et de comprendre (vraiment comprendre!) Quelques frameworks CSS tels que BluePrint et YUI, et les réinitialisations CSS comme Eric Meyer. Ensuite, prenez le temps de mettre en place votre propre réinitialisation et/ou cadre en fonction de vos méthodes de travail et du type de sites que vous créez.
Personnellement, j'utilise la plupart des réinitialisations d'Eric Meyer avec certaines classes et réinitialisations de mon choix, ainsi que quelques idées de BluePrint et YUI.
J'ai récemment regardé Eric Meyer faire une présentation sur les cadres CSS dans laquelle il posait la question: "alors laquelle est la bonne pour moi?" Il a ensuite répondu à la question en montrant une diapositive vierge. Son point de vue était qu'il y a certainement des concepts utiles intégrés dans la plupart des réinitialisations et des cadres, mais celui qui vous conviendra le mieux est celui que vous écrivez pour vous-même (cela en vaut la peine).
Vous devez vous demander dans quelle mesure les cadres disponibles sont efficaces pour résoudre vos problèmes. Répondent-ils à vos exigences?
En utilisant un cadre, vous pouvez définir des règles ou des détails au niveau des pixels et consacrer le reste de votre temps à la mise en œuvre et à la production. C'est un énorme gain de productivité. Si vous vous retrouvez à passer du temps à ajuster les choses de quelques pixels tard dans le projet (micro gérer la conception), c'est un signe qu'un framework peut être utile.
Astuce # 17 dans The Pragmatic Programmer dit: "Programme proche du domaine problématique". L'utilisation d'une couche d'abstraction peut vous rapprocher de la résolution des problèmes réels de mise en page. Par exemple: vous pourrez peut-être vous concentrer sur l'amélioration de l'expérience utilisateur avec le temps supplémentaire dont vous disposez plutôt que sur des ajustements mineurs des pixels.
Cela ne veut pas dire que vous devez sacrifier la qualité à la quantité. C'est une question d'efficacité.
Sur un projet récent, j'ai créé mon propre framework car nous avions des ressources très limitées et les frameworks populaires ne faisaient pas ce que je voulais. Ensuite, j'ai configuré les PSD de l'équipe de conception pour s'aligner sur la même grille que j'ai déployée.
Un framework n'a pas besoin d'être une implémentation particulière de CSS. Il n'est pas nécessaire que ce soit quelque chose de gonflé que vous ayez téléchargé sur Internet ou quelque chose mettant en œuvre des idées obsolètes. C'est juste une technique pour faire un travail. Je ne serais pas surpris si certains codeurs ont déjà leurs propres cadres et ne le savent même pas. En fait, si vous considérez le DOM comme un ensemble d'éléments par défaut que vous étendez avec CSS, alors c'est un cadre par définition.
je ne l'ai pas utilisé oui, mais je pense que emastic peut être une bonne alternative qui mérite d'être vérifiée. il est similaire au plan dans la portée, mais prend également en charge les dispositions élastiques (d'où le nom) et vous pouvez spécifier des valeurs en px, em ou%, et même les mélanger.
En fait, j'ai passé une bonne partie des 24 dernières heures à enquêter par moi-même, hein. Ma conclusion était qu'une belle réinitialisation (j'ai utilisé Réinitialisation YUI ), et peut-être quelque chose d'autre pour définir des éléments de base ( polices YUI valait la peine dans mon cas; peut-être les "goodies supplémentaires") "de BluePrint serait dans le vôtre) est une bonne idée. Mais, un "framework" --- qui est généralement quelque chose comme grilles YUI --- est trop restrictif, vous obligeant à utiliser leurs noms de classe, leurs identifiants, etc. et s'adaptant rarement à votre site comme à la main -Fait CSS.
Donc en bref: les réinitialisations semblent plutôt sympas; il est bon d'éliminer toutes les variations, par ex. margin-vs-padding pour les listes, l'espacement des paragraphes, etc. Mais c'est aussi loin que je le prendrais.
Je pense que la boussole est incroyable. Assurez-vous de voir le screencast .
J'utilise 960.gs pour quelques sites Web et je le trouve très simple et facile et en vaut la peine. Économise beaucoup de travail sur la mise en page. Assurez-vous de vérifier le générateur CSS personnalisé qui s'en va avec la largeur fixe de 960 pixels.
Compass vous permet de renommer les classes et les identifiants de votre framework avec vos propres noms sémantiques, vous pouvez donc les vérifier. Il donne également accès à des choses que vous n'obtenez pas avec du CSS ordinaire comme des mixins.
Je suis étonné par les soi-disant "experts CSS" qui critiquent ces outils sans vraiment les avoir creusés et utilisés. Sont-ils essentiels? Non. Si vous aimez votre propre framework (vous en avez un, n'est-ce pas? Un framework CSS n'est qu'une bibliothèque soigneusement définie - tout le monde devrait en utiliser un), alors continuez à l'utiliser. Personne ne vous oblige à utiliser d'autres frameworks et je ne vois pas de gens qui utilisent des frameworks dire aux puristes CSS qu'ils "font du mal".
Critiquer les cadres dans une telle perspective révèle à la fois une insécurité et une ignorance. Par exemple, la notion est risible qu'une personne utilise un outil comme Compass sans connaître le CSS. Vous vous rendez compte, à droite, qu'un framework n'écrit généralement pas tout votre CSS pour vous? Vous pouvez toujours créer et écrire votre propre CSS dans le contexte de la plupart des frameworks. En fait, si vous ne connaissez pas CSS, vous pourriez être frustré rapidement.
Pour moi, j'apprécie d'avoir un framework car il est déjà documenté, testé par des centaines d'autres utilisateurs, et je peux appliquer mes propres classes et identifiants via Compass. Si j'ai besoin de quelque chose pour lequel le cadre ne convient pas, je coderai le mien.
Je pense que cette présentation vidéo par Kevin Yank, PDG de Site Point, répondra à votre question. Je recommande vraiment de le regarder.
La seule façon que je sache d'utiliser un framework CSS et de conserver le balisage sémantique est d'utiliser une abstraction de niveau supérieur. Pour le moment, Compass est la seule à ma connaissance qui soit suffisamment mature pour être utilisée, mais Nicole Sullivan semble faire des trucs intéressants avec son projet "Object-Oriented CSS".
Je trouve que l'utilisation intelligente des mixins Sass par Compass est brillante, et un grand pas vers le Saint Graal du balisage sémantique maintenable. Je ne pense pas que je voudrais utiliser un framework comme Blueprint ou YUI sans abstraction telle que Compass pour garder les classes de présentation hors du balisage.
BTW, il y a un cadre CSS agréable à regarder appelé Elastic qui semble assez bon pour que j'envisage de l'ajouter à Compass.
Bon lien que j'ai trouvé: Top 12 des cadres CSS et comment les comprendre
Matt Raible de la renommée AppFuse a organisé un concours de framework CSS il y a quelque temps pour développer des cadres CSS pour AppFuse. Les résultats sont publiés ici . Il y a quelques variantes et j'en ai utilisé moi-même parce que j'utilise AppFuse et les trouve très bien.
Je dois ajouter que ces cadres CSS fonctionnent bien car ils sont utilisés dans des applications thématiques. Autrement dit, si vous vous en tenez aux règles, le passage de l'une à l'autre est aussi simple que de changer une valeur dans un fichier de propriétés.
J'ai utilisé BluePrint avec beaucoup de succès sur un site (je pourrais mentionner le site ici mais je suis sûr que le message sera marqué comme spam!). Je ne suis pas sûr de pouvoir l'utiliser à l'avenir, car l'une des idées de CSS que je pensais était de ne pas avoir de logique de mise en page codée en dur. Vous ne devriez pas avoir d'éléments CSS appelés span-24 et span-12 pour définir la disposition, mais quelque chose comme searchBox et mainContent. C'est du moins comme ça que je le vois.
Voici mon article de blog sur les cadres CSS Quand utiliser le cadre CSS?
Craig,
La boussole est ce que vous recherchez: elle vous permet de renommer vos classes CSS Blueprint comme "span-24" avec vos propres noms. Il étend également la fonctionnalité CSS avec des variables et des mixins. Vraiment, ceux qui jugent prématurément les cadres sans avoir vérifié Compass "manquent de raison". C'est un peu comme ces gens qui nous ont dit il y a des années que nous manquions le point en utilisant CSS au lieu de tableaux HTML pour nos mises en page.
-Mat
Je crois que CSS est une question de simplicité. Le but est d'avoir un ou deux emplacements à vérifier lorsque vous faites un référencement entre le HTML et votre feuille de style. Ajouter plus de lignes, et en particulier des lignes que vous n'avez pas écrites et que vous ne connaissez probablement pas, augmentera de façon exponentielle la complexité et donc la volatilité du code CSS.
Je suggérerais vos mises en page au fur et à mesure que vous les écrivez et développez un système de modèles génériques à partir de cela. Bien que j'aime rendre CSS plus modulaire, souvent et selon la conception, votre CSS peut être très spécifique à la casse et pas du tout modulaire.
J'ai utilisé Blueprint sur quelques sites uniques et cela a certainement permis de gagner du temps, principalement dans les tests inter-navigateurs.
Cela craint vraiment d'ajouter du code de présentation à votre balisage, bien que du bon côté, il soit lisible. Bien que j'aime le concept de "vous pouvez repenser sans toucher au balisage", si vous produisez un site où cela ne se produira vraiment pas de toute façon et que vous avez juste besoin que cela soit fait hier, Blueprint est quelque chose à regarder.
Il existe également des compromis quant aux types de mises en page qu'il peut éventuellement créer. Si vous filmez le site depuis le début sur une grille stricte, il sera beaucoup plus facile de transposer dans le framework avec un minimum de tracas.
J'ai utilisé BluePrint et YUI mais je suis toujours frustré par certains des noms qu'ils donnent à leur identifiant et à leurs classes.
À chacun, mais je préfère faire les choses à partir de zéro, mais après un certain temps, vous développez un processus dans lequel vous utiliserez votre travail précédent et l'appliquerez à de nouveaux projets et apporterez quelques ajustements pour que le site Web ressemble à vous. comme ça.
Assurez-vous d'utiliser une bonne convention de dénomination, juste au cas où quelqu'un d'autre viendrait pour modifier le CSS, alors ils auront une bonne idée de ce à quoi chaque nom de style fait référence.
Jetez un oeil à cette démo: http://www.richstyle.org/demo-web.php Ce framework est basé sur l'idée que "les balises HTML devraient suffire". Je pense que la réutilisation est le facteur le plus important pour choisir un composant logiciel, y compris un cadre Web. Pour les développeurs de frameworks Web, plus vous vous engagez à respecter les normes, plus vous garantissez la réutilisation.
consultez http://www.ez-css.org/ . l'un des frameworks css les plus simples et les plus légers sur lesquels travailler. :)