Sur des motifs de type et des guides de style

Au cours des six dernières années, j'ai utilisé ce que j'appelle des «modèles de type» dans la conception Web, en obtenant des résultats positifs. Cet article explore ces modèles, leur implémentation dans CSS et comment ils peuvent rationaliser votre flux de travail de typographie.

Considérez cela comme un équivalent HTML / CSS des "styles de paragraphe" dans des logiciels de publication de bureau comme Quarkxpress, InDesign ou CorelDraw. Dans la conception du livre, vous devrez peut-être ajuster dynamiquement la typographie de la tête de l'ensemble de l'ensemble du livre. Cela nécessite un contrôle central sur les modèles typographiques.

La plupart des logiciels de conception offrent cette fonctionnalité, bien que leurs interfaces varient. Un style de paragraphe "de base" existe généralement, dont les autres dérivent. Les styles de paragraphe gèrent les éléments au niveau du bloc, tandis que les styles de personnages gèrent les éléments en ligne (des travées audacieuses et uniques).

Le principe de base reste cohérent: clé: paires de valeur , miroir de propriété CSS: paires de valeurs .

 H1 {
  Font-Family: "Helvetica Neue", Sans-Serif;
  taille de police: 20px;
  Police-poids: Bold;
  Couleur: Fuchsia;
}

Une fois définies, les styles sont appliqués au texte. Un symbole "" indique souvent des modifications de style. La redéfinition d'un style applique des changements à l'échelle du projet.

Bien que cela ressemble à des cours CSS, la conception du site Web présente des complexités. Les tailles d'écran varient considérablement, les styles de contexte exigeants qui s'adaptent en conséquence.

Contrôle typographique essentiel

Le développement précoce présente souvent un HTML sémantique:

<h1 id="Niveau-de-tête"> Niveau de tête 1</h1>
<p>Texte de paragraphe.</p>
<h2 id="Niveau-de-tête">Niveau de tête 2</h2>
<p>Plus de texte de paragraphe.</p>

Associé à CSS ciblant ces éléments:

 H1 {
  taille de police: 50px;
  Couleur: # FF0066;
}

H2 {
  taille de police: 32px;
  Couleur: RGBA (0,0,0, .8);
}

p {
  taille de police: 16px;
  Couleur: DeepskyBlue;
  hauteur de ligne: 1,5;
}

Cela fonctionne, établissant une hiérarchie visuelle. Les styles d'agent utilisateur fournissent un style par défaut, garantissant la hiérarchie de base même sans CSS.

Complexités dans les grands projets

À mesure que les sites Web augmentent, la complexité augmente. Initialement, des classes uniques pourraient suffire, mais cela devient insoutenable. Des cours de cas spéciaux émergent:

<h1 id="Tête-principale"> Tête principale</h1>
<p>Paragraphe avec <em>l'accent</em> .</p>
<p>Paragraphe régulier.</p>

Ensuite, les classes prolifèrent:

<h1 id="Tête-principale"> Tête principale</h1>
<main><h2 id="Sous-titrage">Sous-titrage</h2>
<p> Texte de paragraphe</p></main>

Les nouveaux développeurs peuvent avoir du mal avec les tailles de police par défaut et les marges, conduisant à des hacks comme margin-top: -20px . Cela crée un «combat» contre la cascade CSS, souvent en raison de l'incitation aux styles d'agent utilisateur.

Scénario du monde réel

Imaginez recevoir un document Photoshop parfait et parfait avec de nombreuses couleurs, dispositions et styles typographiques. L'identification des styles réutilisables sur de nombreuses pages nécessite des efforts importants. Les considérations à petit écran sont souvent négligées et les modèles incohérents à travers les différentes tailles d'écran compliquent encore les questions. Les guides de style peuvent exister mais n'ont pas la spécificité nécessaire au développement frontal.

Même des guides de style détaillé peuvent être incompatibles avec le document de conception, conduisant à la confusion. Au début de votre carrière, vous pourriez vous sentir obligé de tout déchiffrer, traduisant les valeurs de pixels en CSS. Cependant, cela conduit à des règles dupliquées:

 .blog Article P {/ * ... Styles ... * /}
.Welcome .main-message {/ * ... Styles similaires ... * /}
/ * ... plus de styles dupliqués ... * /

Vous pourriez essayer de consolider les styles dans le sélecteur body , mais cela peut devenir trop large.

Concevoir des révisions

Les changements de conception nécessitent la mise à jour de nombreuses règles CSS, conduisant à des conflits et à une complexité supplémentaire. La solution consiste souvent à créer des classes et à les appliquer aux éléments, à séparer la mise en page et les modèles de type:

 .standard-text {/ * ... styles ... * /}
.Oing-1 {/ * ... Styles ... * /}
.Dedium-Heading {/ * ... Styles ... * /}

Cela améliore la maintenabilité et permet le style plug-and-play, mais ne traite pas de situations où la modification HTML est impossible (par exemple, CMS).

Travailler avec un CMS

Lorsque vous traitez avec un CMS, vous manquez de contrôle HTML direct. Les mélanges dans des préprocesseurs comme SASS offrent une solution:

 @Mixin Standard-Type () {/ * ... Styles ... * /}
.Context .That {@include standard-type (); }

Cependant, le simple fait d'associer des mélanges avec des niveaux de cap pourrait être limite. Au lieu de cela, envisagez d'organiser les styles par «voix» (par exemple, calm-voice , loud-voice , attention-voice ), reflétant le ton souhaité du contenu.

 @Mixin Calm-Voice () {/ * ... Styles ... * /}
@Mixin Loud-Voice () {/ * ... Styles ... * /}
@Mixin Attention-Voice () {/ * ... Styles ... * /}

Cette approche améliore le sens et facilite la communication interdisciplinaire. Appliquer ces mixins dans un contexte article :

 article {
  H1 {@include Loud-Voice (); }
  H2 {@include ATTHENDER-VOICE (); }
  p {@include calme-voice (); }
}

Cela nécessite de gérer diverses structures de contenu et des incohérences potentielles. Des règles CSS supplémentaires pourraient être nécessaires pour gérer l'espacement et d'autres éléments.

Stylus, un autre préprocesseur, offre une syntaxe concise mais manque actuellement d'outils robustes.

Modèles de type: la solution

Les modèles de type, qu'ils soient implémentés via des mixins ou des classes, fournissent un système de plug-and-play pour un style cohérent. Ils peuvent être combinés avec des cours de services publics. Guides de style en direct, incorporation de modèles de type, faciliter la collaboration d'équipe et réduire la poussée de pixels. Cette approche profite aux projets de toutes tailles.

Les tailles de police variables peuvent être gérées à l'aide clamp() et des unités vmin pour une conception réactive. Bien que cette approche génère plus de CSS, la priorisation de la maintenabilité et de la collaboration d'équipe est cruciale.

Au-delà de CSS: collaboration

Les modèles de type favorisent la collaboration entre les concepteurs et les développeurs. Les concepteurs visuels peuvent se concentrer sur l'esthétique, tandis que les développeurs gèrent la structure et la disposition. Les guides de style en direct servent de source unique de vérité, rationalisant le processus de conception. Cette approche réduit le besoin de maquettes à pixels approfondies, permettant une exploration de conception itérative plus itérative. InDesign et les paragraphes et les styles de personnages de l'illustrateur offrent l'inspiration, mais manquent de réactivité. Un guide de style complet peut inclure des ratios de rembourrage, des couleurs et des largeurs de ligne, promouvant la cohérence de conception. Les détails finaux sont raffinés en collaboration sur de vrais appareils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!