Quel est le meilleur framework CSS et en vaut-il la peine?

En lisant sur un autre forum, je suis tombé sur le monde des cadres CSS. Celui que j'ai spécifiquement examiné est BluePrint . Je me demandais si quelqu'un d'autre était tombé sur des frameworks CSS, suggérerait-il le meilleur et s'ils en valaient la peine?

Les «frameworks» CSS manquent complètement le point.

CSS n'est pas comme JavaScript, où vous pouvez inclure une bibliothèque / structure de base, puis en appeler des fonctions et des objets pour effectuer un travail de plus haut niveau. Tout ce qu'un framework CSS peut vous donner, ce sont des règles déclaratives: des éléments de réinitialisation des règles du navigateur par défaut, des styles de classe sur lesquels créer votre page et des règles de mise en page utilisant 'float' et 'clear'. Vous pouvez l'écrire vous-même en quelques lignes de CSS plutôt que de tirer le plein d'une centaine de règles de cadre.

Les trucs de «disposition de grille» en particulier remontent au mauvais vieux temps de mélanger votre présentation dans votre balisage. 'div class = "span-24"' n'est pas meilleur qu'un tableau, vous devrez y retourner et changer 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 mise en page liquide accessible sur une large gamme de tailles de fenêtres.

C'est une création à l'envers, utile uniquement pour quelqu'un qui a trop peur d'écrire une règle CSS.

Donc, personne n'a encore répondu à cette question (même si j'ai vu quelques votes positifs), donc Je vais au moins tenter de répondre à la deuxième question dans 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 et le CSS spécifiques au site. Ils pensent aux décisions difficiles pour que vous n'ayez pas à le faire.

Malheureusement, il y a deux inconvénients à utiliser un framework (en général):

1. Le cadre dicte la structure globale et la mécanique de votre code CSS. Maintenant, je ne parle pas d'une réinitialisation CSS (elles sont utiles en elles-mêmes, mais ce ne sont pas de vrais frameworks); 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 quand il y a un bogue dans le cadre, vous devrez le plus souvent le réparer vous-même.

2. Les frameworks ne sont pas une excuse pour ignorer les problèmes liés aux navigateurs / CSS avancés. Vous les rencontrerez invariablement, comme vous le feriez avec un framework PHP ou JavaScript. Et vous devez savoir comment y faire face. Il y a un dicton commun selon lequel vous devez d'abord écrire votre propre framework, avant d'utiliser celui de quelqu'un d'autre.

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 en plus.

J'ai regardé BluePrint et quelques autres et le seul `` cadre '' CSS que je recommanderais est YUI Grids

Avantages:

• Écrit par l'un des meilleurs ingénieurs frontend (IMO) (Nate Koechley)
• Très petit. 4 Ko
• Très flexible (1000 dispositions différentes)
• Prend en charge les mises en page à largeur fluide (100%) ainsi que les mises en page à largeur fixe prédéfinies à 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 mises en page à largeur fixe.
• Les colonnes de modèles sont indépendantes de l'ordre de la source, vous pouvez donc placer votre contenu le plus important en premier dans la couche de balisage pour une accessibilité améliorée et une optimisation pour les moteurs de recherche (SEO).
• Pied de page à effacement automatique. Quelle que soit la colonne la plus longue, le pied de page reste en bas.
• Les mises en page inférieures à 100% sont automatiquement centrées.
• Noms de classe un peu sémantiques (mieux que haut, gauche, droite, etc.)

Les inconvénients:

• Beaucoup de balisage supplémentaire par rapport au HTML et au CSS écrits à la main
• Il faut un peu d’apprentissage pour comprendre comment créer des mises en page complexes

Comme d'autres l'ont signalé, il n'y a pas de véritables «cadres» pour CSS. La réinitialisation des feuilles de style aide également beaucoup à la mise en page. Je m'en tiens généralement à une feuille de style de réinitialisation et je pars de là. Mais si vous n'avez pas beaucoup d'expérience CSS, YUI Grids pourrait 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 également des constructions réutilisables et des déclarations de niveau supérieur tout en vous donnant une syntaxe CSS familière.

Prenez le temps d'étudier et de comprendre (vraiment comprendre!) Quelques frameworks css tels que BluePrint et YUI, et les réinitialisations css comme celle d'Eric Meyer. Ensuite, prenez le temps de créer votre propre réinitialisation et / ou framework 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 ma part, ainsi que quelques idées de BluePrint et YUI.

J'ai récemment regardé Eric Meyer faire une présentation sur CSS Frameworks dans laquelle il posait la question: "Alors, lequel est le bon pour moi?" Il a ensuite répondu à la question en montrant une diapositive vierge. Son argument était qu'il existe certainement des concepts utiles intégrés dans la plupart des réinitialisations et des frameworks, mais celui qui vous conviendra le mieux est celui que vous écrivez pour vous-même (cela en vaut la peine).

Pourquoi utiliser des «frameworks» CSS?

• Si vous êtes pressé par le temps.

• Si vous ne connaissez pas le CSS et que vous ne connaissez personne qui peut 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 eux-mêmes une mise en page, sans se tourner vers un développeur front-end. C'est idéal pour les projets personnels ou les startups aux ressources limitées.

Si vous avez déjà une connaissance décente du CSS, alors vous avez probablement déjà une bibliothèque décente de mises en page 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 faire fonctionner quelque chose, vous pouvez vous tourner vers un framework, car il simplifie la mise en page de base et aborde également la compatibilité des navigateurs.

Cela dit, de nombreux frameworks prêts à l'emploi utilisent des noms de classes horribles, etc. Je connais certains sites Web qui ont pris un framework comme point de départ et l'ont ensuite personnalisé avec leurs propres balises de classe et d'identification. Mais clairement, il y a aussi un peu de travail dans cette réécriture. Utiliser quelque chose comme Compass, comme mentionné ci-dessus, aide à contourner cela.

Donc, les frameworks CSS - ils peuvent vous faire gagner du temps, au détriment de la sémantique. Ils peuvent également nuire à vos connaissances en CSS, mais cela dépend davantage de combien vous investissez dans l'apprentissage du sujet en général. Que vous en fassiez usage dépend de vous.

Vous devrez vous demander dans quelle mesure les cadres disponibles sont efficaces pour résoudre vos problèmes. Répondent-ils à vos exigences?

En utilisant un framework, vous pouvez définir des règles ou des détails au niveau du pixel et consacrer le reste de votre temps à la mise en œuvre et à la production. C'est une augmentation massive de la productivité. Si vous passez du temps à ajuster les choses de quelques pixels en fin de projet (micro-gestion du design), c'est le signe qu'un framework peut être utile.

Le conseil n ° 17 du programmeur pragmatique dit: "Programmez près du domaine problématique". L'utilisation d'une couche d'abstraction peut vous rapprocher de la résolution des vrais problèmes 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 qu'avec des ajustements mineurs des pixels.

Cela ne veut pas dire que vous devez sacrifier la qualité pour 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 qu'ils s'alignent 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 avez téléchargé à partir de l'interweb ou quelque chose mettant en œuvre des idées dépassées. C'est juste une technique pour faire un travail. Je ne serais pas surpris si certains codeurs ont déjà leurs propres frameworks 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 framework par définition.

En fait, j'ai passé une bonne partie des dernières 24 heures à enquêter sur cette question par moi-même, heh. Ma conclusion a été qu'une bonne réinitialisation (j'ai utilisé YUI Reset ), et peut-être autre chose pour définir des éléments de base (les polices YUI valaient la peine dans mon cas; peut-être que les "bonus supplémentaires" de BluePrint seraient dans le vôtre) est une bonne idée. Mais, un "framework" - qui est généralement quelque chose comme les grilles YUI - est trop restrictif, vous obligeant à utiliser leurs noms de classe, identifiants, etc. et s'intègre rarement dans votre site comme le ferait un CSS fait à la main.

Donc en bref: les réinitialisations semblent plutôt sympas; il est bon d'éliminer toutes les variations dans, par exemple, marge-contre-remplissage pour les listes, ou espacement des paragraphes, ou autre. Mais c'est aussi loin que je le prendrais.

Je ne l'ai pas utilisé oui, mais je pense que l' émastic peut être une bonne alternative qui vaut la peine d'être vérifiée . il est similaire au plan directeur dans sa 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.

Compass, je pense que c'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. Cela me fait gagner beaucoup de travail sur la mise en page. Assurez-vous de vérifier le générateur CSS personnalisé qui disparaît avec la largeur fixe de 960 pixels.

Je pense que cette présentation vidéo du PDG de Site Point, Kevin Yank, répondra à votre question. Je recommande vraiment de le regarder.

Compass vous permet de renommer les classes et les identifiants de votre framework avec vos propres noms sémantiques, vous voudrez peut-être le vérifier. Il donne également accès à des éléments que vous n'obtenez tout simplement pas avec du CSS ordinaire, comme les 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 est juste une bibliothèque soigneusement définie - tout le monde devrait en utiliser une) alors par tous les moyens, 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 les choses mal».

Critiquer les cadres d'un tel point de vue révèle simplement une insécurité aussi bien qu'une ignorance. Par exemple, la notion est risible qu'une personne utilise un outil comme Compass sans connaître CSS. Vous vous rendez compte, n'est-ce pas, qu'un framework n'écrit généralement pas tout votre CSS pour vous? Vous pouvez toujours sortir et écrire votre propre CSS dans le contexte de la plupart des frameworks. En fait, si vous ne connaissez pas CSS, vous risquez d'être rapidement frustré.

Pour ma part, 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 framework ne convient pas, je coderai le mien.

Matt Raible de AppFuse fame a organisé un concours CSS Framework il y a quelque temps pour développer des Frameworks CSS pour AppFuse. Les résultats sont publiés ici . Il existe quelques variantes et j'en ai utilisé moi-même car j'utilise AppFuse et je les trouve très bonnes.

Je dois ajouter que ces Frameworks CSS fonctionnent bien car ils sont utilisés dans des applications thématiques. Autrement dit, si vous respectez les règles, passer 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 serait marqué comme spam!). Je ne suis pas sûr de 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. Au moins c'est comme ça que je le vois.

Bon lien que j'ai trouvé: Top 12 des cadres CSS et comment les comprendre

Voici mon article de blog sur les cadres CSS Quand utiliser le framework CSS?

Le seul moyen que je connaisse pour utiliser un framework CSS et conserver le balisage sémantique est d'utiliser une abstraction de plus haut niveau. Pour le moment, Compass est le seul à ma connaissance qui soit suffisamment mature pour être utilisé, mais Nicole Sullivan semble faire des choses intéressantes avec son projet "CSS orienté objet".

Je trouve que l'utilisation intelligente des mixins Sass par Compass est brillante et constitue 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 une abstraction telle que Compass pour garder les classes de présentation hors du balisage.

BTW, il existe un joli cadre CSS appelé Elastic qui semble assez bon pour que j'envisage de l'ajouter à Compass.

Je pense que CSS est une question de simplicité. Le but est d'avoir un ou deux endroits à vérifier lorsque vous faites référence 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 n'êtes probablement pas familier avec, 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èle générique à partir de cela. Bien que j'adore rendre CSS plus modulaire, souvent et en fonction de la conception, votre CSS peut être très spécifique à un cas et pas du tout modulaire.

J'ai utilisé Blueprint sur quelques sites ponctuels et cela a définitivement gagné du temps, principalement dans les tests multi-navigateurs.

Il est vraiment nul d'ajouter du code de présentation à votre balisage, bien que du bon côté, il soit lisible. Bien que j'adore 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 de le faire hier, Blueprint est quelque chose à regarder.

Il existe également des compromis dans les types de mises en page qu'il peut éventuellement créer. Si vous wireframe le site dès le départ sur une grille stricte, il sera beaucoup plus facile de le 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 son propre, 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 simplement quelques ajustements pour donner au site Web l'apparence que vous feriez comme ça.

Assurez-vous d'utiliser une bonne convention de dénomination, juste au cas où quelqu'un d'autre viendrait éditer le css, alors il aura une bonne idée de ce à quoi chaque nom de style fait référence.

Craig,

Compass est ce que vous recherchez: il 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 frameworks sans avoir vérifié Compass «manquent le point». C'est un peu comme ces gens qui nous ont dit il y a des années que nous manquons le point en utilisant CSS au lieu de tableaux HTML pour nos mises en page.

-Mat

consultez http://www.ez-css.org/ . l'un des frameworks css les plus simples et les plus légers sur lesquels travailler. :)

Jetez un œil à 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 framework Web. Pour les développeurs de frameworks Web, plus vous vous engagez à respecter les normes, plus vous garantissez la réutilisation.