« Framework » est un mot à la mode dans le développement Web de nos jours. Par exemple, les frameworks JavaScript YUI, JQuery et Prototype ont attiré une large attention, et les frameworks d'applications Web Rails et Dojo ont attiré encore plus d'attention. Il semble que tout le monde utilise une sorte de framework pour développer son propre site Web. Mais qu’est-ce qu’un framework exactement ? Les frameworks ne sont-ils utiles qu’aux programmeurs ?
Qu'est-ce qu'un cadre ?
Afin de faciliter la communication, nous donnons une définition unifiée du « framework » (au moins dans cet article) : un ensemble d'outils, de bibliothèques de fonctions, de conventions et de modules généraux qui tentent d'abstraire les tâches courantes et peuvent être réutilisés. et les développeurs doivent se concentrer sur les aspects propres au projet de tâche et éviter la duplication du développement. De manière générale, les frameworks sont le framework JavaScript et le framework d'application Web mentionnés ci-dessus.
Il est important de souligner que nous n'avons pas besoin de parler de construction, d'emballage et de distribution, un framework ne peut être utilisé que par vous ou votre équipe.
Cadre CSS
Parfois, vous pourrez goûter aux avantages du code CSS abstrait et similaire, ce qui est particulièrement évident chez les concepteurs qui conçoivent plusieurs sites Web similaires en même temps. De plus, les concepteurs de l'équipe ont beaucoup bénéficié de l'approche du framework. Par exemple, je travaille pour un journal, et les plus de 20 sites Web ont de nombreux points communs. Selon les caractéristiques des sites Web d'information, ils ont tendance à être plus similaires que différents. Mais même un seul concepteur travaillant sur un projet qui semble très différent en surface peut faire abstraction de quelques petits éléments communs pour le framework CSS.
Chez Lawrence Journal-World, où je travaille, nous avons récemment construit un framework CSS et avons constaté qu'il constituait un énorme multiplicateur d'efficacité. Bien sûr, il nous a fallu plusieurs jours pour créer nous-mêmes un framework CSS, mais une fois le framework terminé, le développement de pages Web de haute qualité a été extrêmement rapide. De plus, puisque tous les concepteurs de l'équipe utilisent désormais ce framework, lorsqu'un concepteur modifie la page Web d'un autre membre de l'équipe, il n'a plus besoin de passer 20 minutes à comprendre les idées de construction des autres et peut commencer immédiatement.
Y en a-t-il qui peuvent être ignorés ?
Lorsque vous investissez dans un framework CSS très holistique, vous recherchez un code commun qui est répété encore et encore dans chaque projet. L'objectif est de consolider la position centrale de ces codes et de suivre le principe « Ne vous répétez pas ». t Répétez-vous)" méthode d'encodage. Cela rend la maintenance beaucoup plus facile et permet d'économiser les coûts de bande passante pour vos visiteurs.
Dans presque tous les projets sur lesquels je travaille, je dois déclarer quelques problèmes CSS :
"Réinitialisation complète" du style par défaut du navigateur, par exemple en définissant la marge et le remplissage de tous les éléments à 0, en supprimant les bordures des jeux de cadres et des images, etc.
Alignez-vous sur la ligne de base. Cela inclut des éléments tels que la définition des marges pour les éléments au niveau du bloc tels que les paragraphes, les en-têtes et les listes sur la même (ou plusieurs) hauteurs de ligne de base.
Créez le style de base du formulaire.
Créez plusieurs classes CSS couramment utilisées, par exemple .hide (définissez l'affichage sur aucun, c'est-à-dire masquez l'élément), .mute (définissez sur une police plus petite et une couleur plus vive).
Et voici le plus drôle, de nombreux concepteurs de sites Web se retrouvent à réutiliser la même structure de base encore et encore, alors pourquoi ne pas se l'approprier, d'une manière très flexible et pouvant être utilisée sur plusieurs sites Web. Yahoo a fait cela ? YUI. Lorsque nous avons créé le framework CSS pour le site Web Lawrence Journal-World, j'ai commencé par regarder comment Yahoo l'a fait. Nous sommes presque sûrs que ce n'est pas ce que nous voulons, mais cela constitue un bon exemple et nous donne de nombreuses idées sur lesquelles réfléchir et sur la manière de construire notre propre cadre. Nous avons opté pour un problème à 16 cellules suffisamment flexible pour fonctionner sur chacun de nos sites, même si chaque site semblait un peu différent du suivant. De plus, la plupart des sites Web partagent des widgets, tels que des menus déroulants, des menus de navigation, des boutons, etc. Ce sont également les principaux objets qui doivent être abstraits. De plus, vous pouvez avoir des noms de contenu communs, tels que des miniatures pour les listes d'images. Vous pouvez standardiser la dénomination CSS, telle que "thumbnail-list", afin que toutes les miniatures qui affichent des miniatures utilisent cette classe CSS.
Une autre chose à faire peut être d'extraire des hacks (comme la compatibilité avec ces anciens navigateurs) et d'ajouter votre propre module de style étendu. Je l'ai essayé moi-même, mais j'ai trouvé que le hack était trop propriétaire pour être extrait dans un cadre général.
Quels sont les réels avantages ?
Le véritable avantage du framework est qu'il peut commencer à travailler rapidement. Vous pouvez créer un nouveau fichier (X)HMTL et introduire votre framework. Vous n'avez plus à vous soucier de la réinitialisation du remplissage et des marges. Widgets valides, etc. Évidemment, cependant, vous devez absolument personnaliser l’apparence de chaque site. Pour y parvenir, tout ce que vous avez à faire est de remplacer et d’ajouter au style par défaut si nécessaire.
Évidemment, même si vous devez personnaliser l'apparence de chaque site Web, il vous suffit pour cela d'ajouter quelques lignes de code aux styles par défaut. Par exemple, si vous définissez un style de navigation horizontale de base pour toutes les balises UL avec l'attribut de classe « onglets » dans votre cadre et que vous avez une bordure grise, vous n'avez besoin que de quelques lignes de code CSS pour le personnaliser. le site Web est conforme.
| Voici le contenu cité : ul.tabs li { bordure : aucune ; image d'arrière-plan : url('/images/tabs/ ?site-special-tab-look.jpg'); } ul.tabs li { bordure : aucune ; image d'arrière-plan : url('/images/tabs/ ?site-special-tab-look.jpg'); } |
La liste flotte vers la gauche et les liens sont placés sous forme de blocs dans la liste. Les liens flottent également vers la gauche et la police est centrée sur votre site Web. Pour le travail de conception, concentrez-vous simplement sur les détails spécifiques et intéressants de votre site Web, plutôt que sur l'écriture de code CSS qui a été écrit un million de fois auparavant.
Comment construire un framework CSS ?
Il existe plusieurs manières possibles de créer un framework, mais la plus courante, et sans doute la plus utile, consiste à résumer le CSS commun dans un fichier de feuille de style autonome qui ne contient qu'une partie spécifique de l'ensemble. Par exemple, vous pouvez avoir une typographie de poignée de style et une autre réinitialisation groupée de poignée. Cette bonne méthode vous permet d'introduire de manière sélective les styles dont vous avez besoin. Il peut y avoir six ou sept fichiers de styles différents dans votre framework, mais vous n'en avez pas besoin d'un ou deux, tant qu'ils ne sont pas importés. Le framework créé par notre équipe est composé de 5 fichiers de style :
reset.css — gère la réinitialisation
type.css — gère la typographie
grid.css — gère la mise en page
widgets.css — gère les widgets tels que les menus à onglets, les menus déroulants et les boutons « plus »
base.css — Contient tous les autres fichiers de feuille de style, de sorte que nous n'avons besoin que de référencer base.css dans (X)HTML pour utiliser l'intégralité du framework CSS. Nous stockons ensuite le framework dans un endroit séparé afin que chaque site importe ce cadre. Bien entendu, chaque site Web a également besoin d’une feuille de style unique, et le style unique constitue des compléments nécessaires au cadre.
conseil
Cette méthode est bonne, mais elle pose aussi de nouveaux problèmes : elle augmente le nombre de liens http pour chaque page. Pour les sites Web à trafic important et moyen, si plus de 5 connexions HTTP sont ajoutées à chaque page, l'administrateur système peut avoir de gros problèmes. Deux solutions possibles :
Mettez tous les styles dans un seul fichier au lieu de les diviser en plusieurs modules. Le problème ici est que la flexibilité du framework pour inclure uniquement des fichiers spécifiques est perdue et la maintenance devient lourde.
Il existe un programme côté serveur qui traite dynamiquement plusieurs fichiers uniques en une réponse. Je n'ai pas encore vu cela réalisé, mais cela devrait être très efficace s'il est bien fait. En prenant mon framework ci-dessus comme exemple, ce processus de traitement dynamique est déclenché lorsque base.css est demandé, pas lorsque type.css, grids.css, etc. sont demandés. De cette façon, les fichiers individuels sont toujours disponibles et l'ensemble du framework est valide sur la version de la plateforme.
En résumé, il est important de noter que notre objectif n’est pas d’être aussi abstrait que possible. Au lieu de cela, l’objectif est de fournir un démarrage rapide et un processus de conception plus efficace, ce qui est certainement possible. Si vous êtes trop abstrait, les choses peuvent devenir confuses et trop de liens HTTP peuvent affecter les performances de votre site. N'oubliez pas : un bon cadre ne consiste pas à rendre les choses plus difficiles et plus compliquées, mais à repartir de zéro.
Résumer
Nous, les concepteurs de sites Web, avons tendance à nous répéter tout le temps et, comme mes amis du monde de la programmation, nous réinitialisons sans cesse les styles par défaut des navigateurs, les mises en page et les menus de navigation, sur presque tous les projets. Passer un peu de temps à trier le framework CSS vous permettra de démarrer rapidement chaque projet de site Web, de maintenir le site Web plus facilement et d'aider les autres concepteurs de l'équipe à comprendre votre travail. Il est à noter que ces avantages doivent être obtenus sans affecter les performances du site Internet.