Quel est le meilleur framework CSS et valent-ils l'effort?

https://stackoverflow.com/questions/203069

03-07-2019
|

Question

En lisant sur un autre forum, je suis tombé sur le monde des frameworks CSS. Celle que j'ai spécifiquement étudiée est BluePrint . Je me demandais si quelqu'un d'autre avait découvert les frameworks CSS, suggérait lequel était le meilleur et s'ils en valaient la peine?

La solution

Les CSS "frameworks" sont complètement absents.

CSS n’est pas semblable à JavaScript. Vous pouvez y inclure une bibliothèque / un framework de base, puis appeler des fonctions et des objets pour effectuer un travail de niveau supérieur. Tout ce qu’un framework CSS peut vous donner, c’est des règles déclaratives: certains éléments par défaut de la réinitialisation des règles du navigateur, certains styles de classe auxquels la page doit être forcée, et des règles de mise en forme utilisant 'float' et 'clear'. Vous pouvez écrire cela vous-même dans quelques lignes de CSS plutôt que de tirer dans le fouillis d'une centaine de règles-cadres.

La "disposition de la grille", en particulier, remonte au mauvais vieux temps où vous avez mélangé votre présentation à votre balisage. 'div class = " span-24 "' ' n’est pas meilleur qu’un tableau, vous devrez y retourner et modifier le balisage pour affecter la mise en page. Et tous les frameworks 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êtres.

Il s'agit d'une création inversée, utile uniquement à quelqu'un qui a trop peur d'écrire une règle CSS.

Autres conseils

~~Donc, personne n'a encore répondu à cette question (même si j'ai déjà vu quelques votes positifs), donc~~ je vais au moins tenter de répondre à la deuxième question de cette invite.

Les frameworks CSS sont excellents. Comme tout autre framework, ils réduisent le temps de développement et vous permettent de travailler immédiatement sur une conception et des CSS spécifiques à un site. Ils pensent à des décisions difficiles pour que vous n'ayez pas à le faire.

Malheureusement, l’utilisation d’un cadre (en général) présente deux inconvénients:

Le framework dicte la structure générale et les mécanismes de votre code CSS. Maintenant, je ne parle pas d'une réinitialisation CSS (elles sont utiles, mais ce ne sont pas de vrais frameworks); Je parle d'un cadre honnête à bon, qui a déjà pris les décisions concernant les balises sémantiques que vous allez utiliser dans votre document, etc. En tant que tel, vous êtes dépendant du cadre, et quand il y a un bogue dans le cadre, vous devrez généralement le réparer vous-même.
Les frameworks ne sont pas une excuse pour ignorer les problèmes de CSS croisés / avancés. Vous les rencontrerez invariablement, comme vous le feriez avec un framework PHP ou JavaScript. Et vous devez savoir comment les gérer. On dit souvent que vous devriez écrire votre propre cadre avant d’utiliser celui de quelqu'un d’autre.

En jetant un 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 consulté 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. 4 Ko
Très flexible (1000 mises en page différentes)
Prend en charge les dispositions de largeur fluide (100%) ainsi que les dispositions de largeur fixe prédéfinies à 750, 950 et 974 pixels, ainsi que la possibilité de personnaliser facilement tout nombre.
Prend en charge la personnalisation facile de la largeur pour les dispositions à largeur fixe.
Les colonnes de modèle étant indépendantes de l'ordre des sources, vous pouvez donc placer votre contenu le plus important en premier dans la couche de balisage pour améliorer l'accessibilité et l'optimisation du moteur de recherche (SEO).
Pied de page auto-nettoyant. Peu importe la colonne la plus longue, le pied de page reste en bas.
Les modèles comportant moins de 100% sont automatiquement centrés.
Noms de classe quelque peu sémantiques (meilleurs que haut, gauche, droite, etc.)

Inconvénients:

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

Comme d'autres l'ont écrit, il n'y a pas de véritable "framework" pour CSS. Les réinitialiser les feuilles de style aident également beaucoup la mise en page. Je colle habituellement avec une feuille de style de réinitialisation et je pars de là. 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 que cela 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 la syntaxe CSS habituelle.

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 votre propre infrastructure en fonction de vos méthodes de travail et du type de sites que vous construisez.

Personnellement, j’utilise la plupart des réinitialisations Eric Meyer avec certaines classes et réinitialisations, ainsi que quelques idées de BluePrint et de YUI.

J'ai récemment vu Eric Meyer faire une présentation sur CSS Frameworks dans laquelle il posait la question suivante: "Quel est celui qui me convient le mieux?" Il a ensuite répondu à la question en montrant une diapositive vierge. Son point de vue était qu'il y avait certainement quelques concepts utiles intégrés dans la plupart des resets et des frameworks, mais celui qui vous conviendra le mieux est celui que vous écrivez vous-même (cela en vaut la peine l'effort).

Pourquoi utiliser les "frameworks" css?

Si vous êtes pressé par le temps.
Si vous ne connaissez pas le css et que vous ne le connaissez pas connaître quelqu'un qui peut l'écrire pour vous.
Si vous n'êtes pas trop précieux pour normes, etc.

Je connais des programmeurs qui ont vraiment apprécié l'utilisation de blueprint ou de 960, car cela leur permet de créer eux-mêmes une mise en page, sans passer par un développeur front-end. Ceci est idéal pour les projets personnels ou les startups aux ressources limitées.

Si vous avez déjà une bonne connaissance de CSS, vous avez probablement une bonne bibliothèque de présentations de stock, vous n'aurez donc clairement pas besoin d'un framework.

Toutefois, si vous êtes débutant et que vous avez juste besoin d’obtenir quelque chose d’existant, vous pouvez vous tourner vers un framework, car il simplifie beaucoup la présentation de base et aborde également la compatibilité du navigateur.

Cela dit, de nombreux frameworks prêts à l'emploi utilisent des noms de classe horribles, etc. Je connais des sites Web qui ont pris un framework comme point de départ, puis l'ont personnalisé avec leurs propres balises class et id. Mais il est clair que cette réécriture nécessite également un peu de travail. Utiliser quelque chose comme Compass, comme mentionné ci-dessus, aide à résoudre ce problème.

Donc, les frameworks CSS - ils peuvent vous faire gagner du temps, au détriment de la sémantique. Cela pourrait également nuire à votre connaissance de la CSS, mais cela dépend davantage de ce que vous investissez dans l’apprentissage de la matière en général. Que vous en utilisiez dépend de vous.

Vous devez vous demander quelle est l'efficacité des cadres disponibles pour résoudre vos problèmes. Est-ce qu'ils répondent à 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 passez du temps à ajuster les choses de quelques pixels en retard dans le projet (micro-gestion de la conception), c'est un signe qu'un cadre peut être utile.

Le conseil n ° 17 de Le programmeur pragmatique dit: " Programmez à proximité du domaine problématique " . L'utilisation d'une couche d'abstraction peut vous aider à résoudre les véritables 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 que sur des ajustements mineurs de pixels.

Cela ne veut pas dire que vous devez sacrifier la qualité pour la quantité. C'est une question d'efficacité.

Lors d’un projet récent, j’ai créé mon propre framework car nos ressources étaient très limitées et les frameworks populaires ne faisaient pas ce que je voulais. Ensuite, j'ai configuré les fichiers PSD de l'équipe de conception de manière à ce qu'ils s'alignent sur la même grille que celle que j'ai déployée.

Un framework ne doit pas forcément être une implémentation particulière de CSS. Il n'est pas nécessaire que vous ayez téléchargé quelque chose de lourd à partir de l'interweb ou mis 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 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, c’est un framework par définition.

En fait, j’ai passé une bonne partie des dernières 24 heures à enquêter moi-même, heh. Ma conclusion était qu’une bonne réinitialisation (j’avais utilisé la réinitialisation de YUI ) et peut-être autre chose à définir des éléments de base ( les polices YUI valaient la peine dans mon cas; peut-être les «cadeaux supplémentaires» " BluePrint serait dans le vôtre), c’est une bonne idée. Mais, un "framework" --- qui ressemble généralement aux grilles YUI - -est trop restrictif, vous obligeant à utiliser leurs noms de classes, identifiants, etc. et s'intégrant rarement dans votre site comme le ferait un CSS créé à la main.

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

Je ne l'ai pas utilisé oui, mais je pense que emastic est peut-être un bon alternative vaut le détour. il est similaire à blueprint, mais prend également en charge les dispositions élastiques (d'où son nom) et vous pouvez spécifier des valeurs en px, em ou% et même les mélanger.

Je pense que la boussole est incroyable. Assurez-vous de voir le screencast .

J'utilise 960.gs pour quelques sites Web et le trouve très simple et facile, mais en vaut la peine . Enregistre beaucoup de travail sur la mise en page. Assurez-vous de vérifier le générateur CSS personnalisé qui disparaît avec une 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 infrastructure avec vos propres noms sémantiques. Vous pouvez donc le vérifier. Il donne également accès à des choses que vous ne comprenez pas avec les CSS simples comme les mixins.

Je suis stupéfait par les soi-disant "experts CSS". qui critiquent ces outils sans vraiment avoir creusé et utilisé. Sont-ils essentiels? Si vous aimez votre propre framework (vous en avez un, pas vrai? Un framework CSS est juste une bibliothèque soigneusement définie - tout le monde devrait en utiliser une), alors continuez à l'utiliser. Personne ne vous oblige à utiliser d'autres frameworks et je ne vois pas les personnes qui utilisent des frameworks en train de dire aux puristes CSS qu'ils "se trompent".

En critiquant de la sorte, les frameworks ne font que révéler une insécurité et une ignorance. Par exemple, il est risible qu'une personne utilise un outil tel que Compass sans connaître CSS. Vous vous rendez compte, d'accord, 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 le CSS, vous pourriez ê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, alors je coderai le mien.

Matt Raible de la célébrité AppFuse a organisé un concours de framework CSS pour développer des frameworks CSS pour AppFuse. Les résultats sont publiés ici . Il existe quelques variantes et j'en ai utilisé certaines moi-même, car j'utilise AppFuse et je les trouve très bien.

Je dois ajouter que ces frameworks CSS fonctionnent bien car ils sont utilisés dans des applications thématiques. Autrement dit, si vous vous en tenez aux règles, passer d'une position à l'autre est aussi simple que de modifier 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 pouvoir l’utiliser à l’avenir, car une des idées de CSS que j’ai pensé é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 présentation, mais quelque chose comme searchBox et mainContent. Au moins c'est ce que je vois.

Bon lien trouvé: Les 12 meilleurs frameworks CSS et leur compréhension

Voici mon billet de blog sur les frameworks CSS When utiliser le framework CSS?

Le seul moyen que je connaisse pour utiliser un framework CSS et conserver le balisage sémantique consiste à utiliser une abstraction de niveau supérieur. À l’heure actuelle, Compass est le seul dont je suis au courant qui soit suffisamment mature pour être utilisé, mais Nicole Sullivan semble faire des choses intéressantes avec son "CSS orienté objet". projet.

Je trouve l'utilisation intelligente de Sass mixins par Compass brillante et constitue un grand pas en avant vers le Saint-Graal du balisage sémantique maintenable. Je ne pense pas que je souhaiterais utiliser un framework tel que Blueprint ou YUI sans une abstraction telle que Compass pour conserver les classes de présentation en dehors du balisage.

BTW, il existe un joli framework CSS appelé Elastic, qui a l'air assez beau pour que je songe à l'ajouter à Compass.

Je pense que CSS est synonyme de simplicité. L’objectif 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, en particulier des lignes que vous n’avez pas écrites et que vous ne connaissez probablement pas bien, augmentera de manière exponentielle la complexité et, partant, la volatilité du code CSS.

Je suggérerais vos mises en page à mesure que vous les écrivez et développiez un système de modèles génériques à partir de cela. Bien que j'aime rendre CSS plus modulaire, souvent et en fonction de la conception, votre CSS peut être très spécifique à chaque cas et pas modulaire du tout.

J'ai utilisé Blueprint sur quelques sites uniques et cela a certainement fait gagner du temps, principalement lors des tests multi-navigateurs.

Cela ne sert vraiment à rien d'ajouter du code de présentation à votre balisage, même si, du côté positif, il est lisible. Bien que j'aime le concept de "vous pouvez modifier la conception sans toucher au balisage", si vous créez un site où cela ne se produira vraiment pas de toute façon et que vous devez simplement le faire hier, Blueprint est une chose à regarder. / p>

Il existe également des compromis sur les types de dispositions qu'il est possible de créer, bien que. Si vous filarisez le site dès le début sur une grille stricte, il sera beaucoup plus facile à transposer dans le cadre avec un minimum de tracas.

J'ai utilisé BluePrint et YUI mais je suis toujours frustré par certains des noms qu’ils donnent à leurs identifiants et classes.

À chacun sa manière, 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, tout en apportant quelques modifications pour que le site Web apparaisse comme tel. comme vous le souhaitez.

Veillez à utiliser une bonne convention de dénomination, au cas où quelqu'un d'autre modifierait le fichier css, il aurait alors une bonne idée de ce à quoi chaque nom de style faisait référence.

Craig,

Compass est ce que vous cherchez: 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 ratent le point. C'est un peu comme ces gens qui nous ont dit il y a des années que nous manquions le problème en utilisant CSS au lieu de tableaux HTML pour nos mises en page.

-Matt

consultez http://www.ez-css.org/ . un des framework css le plus simple et le plus léger sur lequel travailler. :)

Jetez un coup d’œil à cette démo: http://www.richstyle.org/demo-web.php Ce cadre repose 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 cadres Web, plus vous vous engagez à respecter les normes, plus vous garantissez leur réutilisabilité.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow