Re-vélo est Buzzword et dans le développement Web, cela signifie pas différent. Il économise de l'énergie, en termes d'effort!
Au cours des années à écrire et à créer CSS HTML à partir de dessins, j'ai suivi quelques bonnes pratiques, à la poursuite de gain de temps et d'énergie dans ce que nous couramment terme comme «Re-inventer la roue». Maintes et maintes fois, je me suis dit que je dois créer quelques modèles, une norme réutilisable CSS que je voudrais utiliser OUT OF THE BOX dans mon travail futur. Bien que n'étant pas complètement, mais j'ai réussi à atteindre certains des objectifs.
En favorisant, Re-utilisation de CSS, j'ai eu un coup d'oeil aux cadres CSS peu qui sont couramment disponibles pour nous et a décidé de les mettre en oeuvre, car elles sont essayé et testé et créé par beaucoup de développeurs expérimentés, que moi-même. Plus important encore "éviter de réinventer".
Bien que la connaissance commune aux anciens combattants, j'ai essayé à la plume de certains des principaux concepts et meilleures pratiques ou les pensées qui a disparu dans la création de ces cadres, de faire RE-CYCLING de CSS possible. Espérons que cela aidera certains développeurs CSS qui sont sur le point de et récemment montés à bord du train en marche CSS!
Touches recyclage des CSS:
Utilisez Conventions de nommage
Ce doit être le facteur le plus important pour rendre le CSS / HTML réutilisable. Donner des noms uniformes pour des éléments de page permet la réutilisation des composants de la page et de leurs styles avec peu ou modifications. En ligne avec cet argument, même HTML5, dans un changement majeur par rapport aux changements de ses prédécesseurs, est d'introduire une certaine savoir structurelle balises. <article>, <section>, <header>, <aside>, et <nav> [ Qu'est-ce que HTML5 apporter? ]. Même avec le HTML 4 (ou inférieur), il est préférable de nommer sections standard de votre page consistanly comme dans l'exemple simple ci-dessous ...
Rappelez-vous, la plupart des pages sur votre projet, finissent par avoir les mêmes éléments de base structurelles. Identifier ces éléments communs de page de base ....
<div id="conteneur">
<div id="header"> ... </ div>
<div id="nav"> ... </ div>
<div id="sidebar"> ... </ div>
<div id="footer"> ... </ div>
</ Div> Réinitialiser les styles par défaut (réinitialisation CSS): Que vous utilisiez un cadre ou écrire votre propre, vous devez fournir Réinitialise CSS [ Quelles sont Réinitialise CSS? ], car ils réduisent ou parfois d'éliminer les incohérences visuelles qui se produisent entre les différents navigateurs. Dans des mots simples le mécanisme de Reset CSS définit les styles de l'élément HTML à des valeurs zéro ou nulle, ce qui annule toutes les valeurs par défaut du navigateur ils peuvent peser. Ceci fournit une table rase pour définir les propriétés de ces éléments nuls de toute valeur par défaut est User-Agent [ CSS2.1 utilisateur par défaut de l'agent de feuille de style ]. Tous les cadres CSS ne sont d'un mécanisme de remise à zéro. Si vous écrivez vous-même réinitialiser CSS, un mot de prudence, c'est que s'il vous arrive d'oublier de réinitialiser une propriété de clé, il pourrait conduire à contre-navigateur questions, qui sont très difficiles à déboguer. Rappelez-vous, Conservez une copie des styles de réinitialisation et de les déposer dans chaque nouveau projet que vous créez.
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pré, la forme, fieldset, input, select, textarea,
p, blockquote, table, th, td
{
border: 0px;
margin: 0;
padding: 0;
} Définir par défaut (Styles de base) aux éléments:
Après avoir configuré (à zéro ou null) les valeurs par défaut de certains attributs de certains éléments HTML, il est nécessaire d'appliquer des styles à travers tous les cas de ces éléments. Ces paramètres par défaut peuvent varier selon la conception ou selon les meilleures pratiques que vous suivez.
La plupart des cadres CSS, présente toujours quelques nouveaux paramètres par défaut, en plus de la réinitialisation des styles par défaut du navigateur.
Ces valeurs par défaut étant vide des valeurs par défaut User-Agent (dépouillé par le Reset CSS), ceux-ci seront dans tous les navigateurs.
Rappelez-vous, les styles de base sont utilisées pour définir des styles qui vont être utilisés à l'échelle de conception. par exemple.
html {font-size: 77%; font-family: Arial, sans-serif;}
forte, h1, h2, h3, h4, h5, h6 {font-weight: bold;} Styles abstraits pour le commun des composants HTML et des classes ordinaires:
La plupart de projet composée de plusieurs pages auront communes éléments HTML utilisés à travers le site, pour par exemple Une sorte de formes, les alertes et les erreurs, les popups personnalisées, etc Lightboxes Depuis ces composants sont utilisés de nouveau à travers des projets, il sera utile de prévoir un ensemble de classes associées à des styles prédéfinis pour ces composants et vous pouvez vous épargner beaucoup de temps.
En dehors de la définition de définitions réutilisables styles pour les éléments communs HTML, nous pourrions les classes abstraites styles se rapportant à la typographie, la couleur ou même mise en page. Je me tendent vous utilisez ... les classes ordinaires comme Clearfix, Font08, FontGrey, alignl, etc DisplayB
formulaire de saisie {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; hauteur: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
forme textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em; line-height: 1.5em; overflow: visible;}
. Fbold {font-weight: bold; color: # CCCCCC;}
. Fgrey {color: # 666666;}
. Flightgrey {color: # bbbbbb;}
. Clearfix {clear: both;}
. Diviseur {border-top: 1px solid # 647B06; border-bottom: 1px # solide 9CC00A; hauteur: 0px;}
. Displayb {display: block;}. Displayn {display: none;}
. Alignr {text-align: right}. Alignc {text-align: center}
. Floatr {float: right;}. Floatl {float: left;} Correctifs pour bizarreries courants du navigateur
Différents navigateurs mettre en œuvre le code CSS et d'assurer un niveau variable de soutien pour les spécifications CSS. Le résultat de cette .... «Quirks Browser», que nous, les développeurs sont laissés à aborder. Surtout, IE6 hante les codeurs les plus CSS avec une échéance à respecter. Les bonnes nouvelles sont l'expérience a rassemblé possibles corrections RÉUTILISABLES à ces questions (souvent appelé comme Hacks CSS ).
Rappelez-vous, Gardez ces hacks ou des corrections à portée de main
/ * Le zoom ci-dessous: 1 règle est spécifiquement pour IE6 + IE7. * /
* Html. Clearfix,
*:. Premier enfant + html {clearfix
zoom: 1;
} Gardez Affiner votre CSS
- L'habitude de recyclage ne viendra pas à vous dans la journée. Il doit développer. Alors planifiez votre Re-Cycling. Gardez cela à l'esprit que vous pourriez par défaut abstraites styles, les définitions de typographie, mise en page les styles des éléments HTML, etc Essayez de penser à l'avance.
- En outre de revenir sur vos projets passés, il aidera à identifier les styles que vous avez tendance à utiliser souvent à travers porjects. Résumé elle.
- Retirez tous les styles inutilisés. Cette pratique permet de garder votre framework CSS à partir d'un symptôme fréquent appelé "ballonnement" -
- Retirer styles répétitifs.
- Construire un ensemble de styles qui sont assez souples pour le porter ensemble des projets.
A Look At frameworks CSS
Enfin. Si vous êtes inspiré et ont l'intention d'utiliser une ou plusieurs des cadres CSS, Heres est la liste rapide de quelques unes populaires ....
- 960 Grid System : Le système 960 Grid est un effort pour rationaliser les tâches de développement Web en fournissant des dimensions couramment utilisés, basés sur une largeur de 960 pixels. Il ya trois variantes: 12, 16 et 24 colonnes, qui peuvent être utilisés séparément ou en tandem. Rien la pensée que vous ne pouvez pas créer un pour votre propre assez facilement, Le cadre fournit des modèles de grille pour l'impression en format PDF, que l'on peut utiliser pour esquisser votre designs.Bet page, il ferait une impression professionnelle, si vous portez quelques feuilles lorsque vous allez à un client pour l'interface utilisateur collecte des besoins. Il fournit également des modèles de grille de base pour un logiciel de conception populaires comme Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc fournir un "starter pour dix" pour commencer votre travail de conception.
- Plan : Plan d'action fournit distinctement classés les fichiers CSS pour réinitialiser les grilles de calcul, formulaires, d'impression, la typographie, plugins pour les boutons, les onglets et les sprites, etc Il fournit également un soutien pour IE en tant qu'entité distincte comprennent.
- SenCSs : Contrairement aux deux ci-dessus, SenCSs (Sens prononcé), n'a pas définitions CSS pour la présentation. Il inclut les polices, les rembourrages, les marges, des tableaux, des listes, des en-têtes, blocs de citation, les formes et plus encore.
- BlueTrip : Sa demande initiale à la gloire, c'est que, c'était une combinaison des meilleures fonctionnalités offertes par d'autres frameworks comme d'autres bleu d'impression, de voyage oli ... de là où elle tire son nom. Son jeu de fonctionnalités comprend 24 colonne de la grille, les styles de typographie, styles orm, d'impression, boutons, etc
- Grilles YUI : Apporté à vous par le Developer Network Yahooo, soutient fluide en largeur (100%) mises en page prédéfinies ainsi que mises en page à largeur fixe à 750px, 950px, 974px et, et la capacité de personnaliser facilement à n'importe quel nombre. Comme vous pouvez le voir, sa techniquement seulement les composantes de présentation. YUI a également fourni HTML / CSS ensembles des éléments de page d'autres
- YAML (Yet Another Mise multicolonnes)
- Emastic
Rappelez-vous, en utilisant des cadres CSS ne signifie pas que vous êtes paresseux pour créer un de vos propres ... Cela implique que vous êtes intelligent pour apprendre de l'expérience d'autres erreurs et, gagnez du temps et augmenter la productivité!!
