web-dev-qa-db-fra.com

Est-ce que bootstrap séparez-vous des préoccupations et vaincre le but de CSS?

Bien que j'ai vu quelques sites Bootstrap, je n'ai juste commencé à y examiner sérieusement et j'étais assez choqué par ce que j'ai vu dans le HTML - charges de DIV imbriquées avec plusieurs classes attachées à chacune.

Au cours des anciens jours précédant CSS, les gens ont l'habitude de décorer leur HTML avec des polices, des couleurs, etc., et ceci a été considéré comme une "mauvaise chose". CSS a permis au HTML d'être très propre et exempt d'informations de style. C'est "séparation des préoccupations" qui est considérée comme une "bonne chose".

Bien que le style de bootstrap ait un niveau d'indirection (c'est-à-dire des noms de classe plutôt que de spécifier directement les couleurs, etc.), il met en évidence les informations de style dans le HTML au lieu d'utiliser CSS tel qu'il était prévu.

Ne vous méprenez pas, j'en ai écrit suffisamment de CSS pour savoir à quel point il est difficile de maintenir, afin que je puisse comprendre comment bootstrap est venu. Ma question est vraiment si bootstrap est considéré comme un hack pour les personnes qui souhaitent assommer rapidement un site rapidement et ne se soucient pas de la séparation des préoccupations, ni de savoir s'il est en fait considéré comme une bonne pratique pour garder les informations de style Près du HTML (que vous pourriez discuter est une sorte d'encapsulation) plutôt que de replacer tout ensemble dans un fichier séparé (c'est-à-dire que CSS n'était pas vraiment la bonne solution).

7
Andy

Ma question est vraiment si =bootstrap est considéré comme un hack pour les personnes qui souhaitent assommer rapidement un site rapidement et ne se soucient pas de la séparation des préoccupations

Beaucoup de Bootstrap classes utilitaires sont des hacks utiles pour obtenir un site rapidement et courir rapidement oui, mais si nous ignorons les classes utilitaires, la plupart des composants de bootstrap sont en fait bien conçus des composants réutilisables qui peuvent bien se mailler avec des balises sémantiques et ils sont beaux sémantiquement (bien qu'ils vous obligent à utiliser leur nommage, et la normalisation n'est pas nécessairement une mauvaise chose).

Mon principe lors de l'épouse Bootstrap et une balise sémantique est que vous ne voulez pas boire trop de Kool-Aid de l'un ou l'autre des deux côtés. Ils sont tous deux des techniques fines pour aider à résoudre les problèmes et à minimiser le coût de la Entretien, mais ils peuvent également créer leur propre ensemble de problèmes si vous appliquez de manière inutile les bons principes de base sans compréhensionner complètement lorsque les techniques sont prises d'une certaine manière.

En règle générale, vous devriez écrire la plupart de vos principaux composants du site avec des marges de sémantices simples et définir des blocs de fonctionnalité utiles dans votre CSS; Utilisez Bootstrap Pour ses composants réutilisables et compostables ici et il y a OK (c.-à-d. Ne pas construire la maison entière avec Bootstrap, mais utiliser des fenêtres et des meubles de marque Bootstrap sont parfaitement bien). Le Bootstrap Les composants sont excellents car il vous donne une langue commune pour parler des composants communs d'un site de niveau supérieur à celui de HTML/CSR brut et vous permet de protéger très rapidement rapidement.

C'est vraiment génial d'avoir des boutons, des formes et des grilles de base bien testés sans avoir à écrire vous-même une énorme quantité de code vous-même. Mais vous ne voulez pas non plus vous limiter à BOOTSTRAP, car vous pouvez constater que forcer Bootstrap au-delà des bases mène souvent au pire cauchemar d'entretien que le style droit.

Cependant, Bootstrap classes utilitaires doit être utilisé avec parcimonie, réservé aux supports mineurs où la praticité bat la pureté, plutôt que de construire votre définition de mise en page principale avec elle. Si vos tags ont des attributs de classe qui sont principalement des classes utilitaires, Vous le faites mal, imho.

La plupart Bootstrap classes utilitaires sont essentiellement simplement des classes d'envelopper pour une doublure CSS. Et avoir à les ajouter partout, il est utilisé peut rendre votre code HTML très illisible et gonflé, avec tous les problèmes d'attributs de style inline . Ils ne rendent certainement pas le code plus maintenu.

5
Lie Ryan

Dépend. =Bootstrap peut être utilisé à la mode. Beaucoup bootstrap classes sont sémantiques, de même - pas ​​Séparation des préoccupations. E. G.

<div class="alert alert-danger">Beware of the leopard</div>

Ceci est parfaitement conforme à la façon dont CSS est censé être utilisé.

Mais bootstrap a également des classes qui sont plus directement couplées à la présentation, par exemple. btn-dark, btn-xl qui définissent les propriétés de présentation plutôt que ces propriétés sémantiques. Ce n'est pas exactement dans l'esprit de CSS - mais il est encore beaucoup plus maintenu que d'avoir par ex. Taille de police spécifiée directement dans le HTML.

3
JacquesB

Je pense qu'une vérité de facto qui complète la séparation du style de contenu via HTML et CSS n'est pas possible.

Jetez un coup d'œil à http://www.csszengarden.com/

À première vue, il ressemble à la démonstration parfaite de la séparation du contenu et du style. Mais si vous examinez de près quelques-uns des conceptions les plus avancées, ils mettent du contenu dans le CSS via des images de fond et similaires.

Sur un site de page unique moderne, vous apportez des frameworks JavaScript sur la photo, qui ajoutera et supprimera de manière dynamique de style et de contenu.

Plutôt que d'atteindre l'objectif d'une langue de mise en page simple qui a laissé l'écran au navigateur, HTML est devenu un véhicule pour afficher des conceptions parfaites Pixel où les sites ne fonctionnent que sur tous les navigateurs avancés.

2
Ewan

La séparation des préoccupations signifie pouvoir définir les préoccupations d'abord et HTML + CSS/SASS + JavaScript + XML/JSON ... sont trop fragmentées pour permettre des préoccupations d'être définies de quelque manière que ce soit d'autre que possible lorsque les langues étaient définies lorsque les langues étaient définies. rédigé.

Un bouton ou un champ de texte n'est pas une "préoccupation", la "liste d'utilisateurs" est une préoccupation, mais il n'y a aucun moyen dans les normes Web actuelles pour séparer "la liste des utilisateurs" qui ferait enregistrer tous les aspects couverts par les normes Web répertoriées. ci-dessus et laissez tomber une telle commande dans une page Web, même en supposant qu'une API Web agréable à appeler la fonctionnalité arrière.

Bien avant que les concepteurs de graphistes Web utilisés a "grille" pour produire une mise en page, mais HTML (et ses racines de SGML) ont spécifiquement divorcé le contenu de la grille, quelque chose qu'aucun concepteur graphique ne ferait. (par exemple le logo doit être la chose la plus évidente de la page. ) Donc, au concepteur, le logo est la préoccupation et sa représentation visuelle est ce qui est important. . Vous ne pouvez pas spécifier tous les aspects de cette préoccupation dans une langue Web standard.

0
verisimilidude