Comment construire des sites Web uniques et beaux avec CSS à vent arrière

La sélection du bon cadre CSS est une partie importante du développement de nouveaux projets. Des cadres tels que Bootstrap et Foundation sont populaires pour leurs composants prédéfinis prêts à l'emploi que les développeurs peuvent facilement démarrer. Cette méthode convient aux sites Web simples avec une apparence et une sensation plus polyvalentes. Mais pour des sites Web plus complexes et personnalisés, des problèmes surviennent.

Au fur et à mesure que le projet progresse, nous devons personnaliser les composants, créer de nouveaux composants et nous assurer que la base de code finale reste uniforme et facile à maintenir après modification.

Les besoins ci-dessus sont difficiles à répondre à des cadres tels que Bootstrap et Foundation car ces cadres apportent de nombreux styles qui sont subjectifs et dans de nombreux cas indésirables. En conséquence, nous devons continuer à résoudre les problèmes de spécificité tout en essayant de remplacer le style par défaut. Cela ne semble pas facile.

Les solutions sur l'étagère sont faciles à mettre en œuvre, mais manquent de flexibilité et sont limitées par certaines limites. D'un autre côté, la conception d'un site Web sans cadre CSS n'est pas facile à gérer et à entretenir. Alors, quelle est la solution?

La solution, comme toujours, suit la moyenne dorée. Nous devons trouver et appliquer le bon équilibre entre le béton et le résumé. Les cadres CSS de bas niveau fournissent cet équilibre. Il existe de nombreux cadres de ce type, et dans ce tutoriel, nous explorerons le plus populaire: le vent arrière CSS.

Points clés

• Le vent arrière CSS adopte une approche pratiquement préférée qui permet un contrôle et une personnalisation plus directs des composants Web dans HTML, facilitant ainsi une base de code plus gérable et évolutive.
• L'installation et la configuration du vent arrière CSS sont très simples, y compris l'installation NPM, la configuration via tailwind.config.js et l'utilisation de la commande @tailwind pour inclure les styles.
• Tailwind CSS prend en charge la conception réactive via des classes de services publics mobiles qui peuvent être appliquées conditionnellement à l'aide de préfixes d'arrêt pour créer facilement des sites Web réactifs.
• Le cadre encourage l'extraction de modèles communs en composants réutilisables, réduisant la redondance et améliorant l'efficacité de la conception du style.
• La puissante personnalisation de Tailwind permet aux développeurs d'étendre le cadre avec leurs propres classes et utilitaires CSS, ajustant les thèmes par défaut en fonction des besoins spécifiques au projet.
• Des petits blogs personnels aux grandes applications d'entreprise, le vent arrière CSS convient car il est flexible et facile à entretenir.

Qu'est-ce que le vent arrière?

Le vent arrière n'est pas seulement un cadre CSS, c'est un moteur pour créer des systèmes de conception. —— site officiel du vent arrière

Tailwind est une collection de classes de services publics de bas niveau. Ils peuvent être utilisés pour construire tout type de composants, tout comme les briques LEGO. Cette collection couvre les propriétés CSS les plus importantes, mais peut être facilement étendue de plusieurs façons. Avec le vent arrière, la personnalisation n'est plus un problème. Le cadre a une excellente documentation, détaille chaque utilitaire de classe et démontre ses méthodes personnalisées. Tous les navigateurs modernes et IE11 le soutiennent.

Pourquoi utiliser un cadre de priorité pratique?

Le cadre CSS de priorité pratique de bas niveau comme le vent arrière présente de nombreux avantages. Explorons certains des plus notables:

• Vous pouvez avoir un meilleur contrôle sur l'apparence de l'élément. En utilisant des cours de services publics, nous pouvons modifier et affiner l'apparition des éléments plus facilement.
• Facile à gérer et à maintenir dans les grands projets, car il vous suffit de maintenir des fichiers HTML, pas de grandes bases de code CSS.
• Il est plus facile de créer des conceptions de sites Web uniques et personnalisées sans combattre des styles indésirables.
• Il est hautement personnalisable et évolutif, ce qui nous donne une flexibilité illimitée.
• Il adopte une approche mobile d'abord et facilite la mise en œuvre de modèles de conception réactifs.
• Vous pouvez extraire des modèles répétitifs communs dans des composants réutilisables personnalisés - dans la plupart des cas, pas besoin d'écrire une ligne de CSS personnalisée.
• Il a une classe auto-interprétée. Nous pouvons imaginer l'apparence de l'élément de style en lisant simplement le nom de la classe.

Enfin, comme l'a dit le créateur de Tailwind:

La première fois que je l'ai vu, il était presque impossible de penser que c'était une bonne idée - vous devez l'essayer.

Alors, essayons-le!

débutant du vent arrière

Pour démontrer la personnalisation du vent arrière, nous devons l'installer via NPM:

npm install tailwindcss

L'étape suivante consiste à créer un fichier styles.css, que nous utilisons la directive @tailwind pour inclure le style de trame:

@tailwind base;

@tailwind components;

@tailwind utilities;

Après

, nous exécutons la commande npx tailwind init, qui créera un fichier tailwind.config.js minimal> où nous mettrons des options personnalisées pendant le développement. Le fichier généré contient le contenu suivant:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

L'étape suivante consiste à construire les styles afin qu'ils puissent être utilisés:

npx tailwind build styles.css -o output.css

Enfin, nous lions le fichier généré output.css et la police génial à notre HTML:

<link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

Maintenant, nous sommes prêts à commencer à créer.

(Les étapes détaillées pour construire un modèle de site Web d'une seule page sont omises ici, car la longueur est trop longue, mais les photos et les extraits de code clés sont conservés)

Résumé

Comme vous pouvez le voir, Tailwind fournit un processus simple sans limiter les options ou la flexibilité. La méthode de priorité pratique fournie par Tailwind a été appliquée avec succès à de grandes entreprises telles que Github, Heroku, Kickstarter, Twitch, segment, etc.

Personnellement, après de nombreuses heures de "combat" et de "combat" avec les styles de frameworks comme Bootstrap, Foundation, Semantic UI, Uikit et Bulma, l'utilisation de l'utilitaire de vent arrière a l'impression d'être dans une mouche de ciel sans nuage librement au milieu .

(La section FAQS est omise ici car elle est trop longue, mais un aperçu des principales questions et réponses est conservé) La section FAQ couvre l'unicité du vent arrière CSS, l'approche pour commencer, et d'autres cadres de compatibilité, de conception réactive, d'applicabilité de projet à grande échelle, de personnalisation du thème, de support préprocesseur, d'optimisation de l'environnement de production, de conception de messagerie et de ressources d'apprentissage.

Cette sortie révisée maintient les positions et les formats d'image d'origine tout en paraphrasant le texte pour réaliser des exemples de longs exemples. également résumé.

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!