Cet article interviewe Thierry Kobleentz, créateur d'Atomic CSS, pour acquérir un aperçu approfondi de l'histoire et du contexte derrière ce cadre CSS populaire. Thierry est maintenant à la retraite et possède une vaste expérience dans la rédaction du grand CSSS, et a travaillé comme ingénieur frontal chez Yahoo.
Thierry est largement considéré comme apportant le concept de CSS atomique au courant dominant de son article classique de 2013 «Challenge CSS Best Practices» sur Smashing Magazine. Cet article ouvre la voie à de nombreuses bibliothèques CSS populaires au fil des ans. Dans cette interview, Thierry passe en revue l'histoire du CSS atomique et réfléchit à son impact continu.
THIERRY KOBLETZ: Après avoir déménagé aux États-Unis en 1997, je me suis enseigné HTML, CSS et JavaScript comme passe-temps.
À l'époque, j'utilisais FrontPage et je comptais fortement sur des groupes de discussion pour obtenir des conseils. Je suis rapidement devenu un client régulier des groupes de presse Macromedia et du Discussion CSS. Au début, j'ai soutenu la philosophie du projet standard Web et développé un fort intérêt pour l'accessibilité. Pendant des années, le front-end n'a été qu'un passe-temps pour moi (mon vrai travail est un concessionnaire antique). Je créerais un site Web à l'occasion, mais j'écris et publie principalement (de nombreux) articles de partage des techniques que j'ai apprises ou «découvertes».
Cela a payé l'appel de Yahoo en 2007, me demandant si je pouvais aider à réparer et à construire la feuille de style pour le modèle de générateur de sites Web de Yahoo! Site Web Solution (YSS). Description du poste: pas de HTML, pas de javascript, seulement CSS! Et beaucoup!
TK: Mon rôle chez Yahoo a beaucoup changé au fil des ans.
Mon premier travail a été de créer une feuille de style pour un modèle YSS (similaire à CSS Zen Garden). Ensuite, avant que YSS ne soit «livré» à Bangalore (Inde), j'ai réécrit les marques et les styles du site Web de YSS - où mes collègues et moi avons été envoyés pour «transfert de connaissances».
Soit dit en passant, il est du défi de remplacer les feuilles de styles pour créer des conceptions différentes pour YSS qui nous obligent à trouver une solution légère (non JS) pour redimensionner les vidéos à la volée;
Après YSS, j'ai eu l'occasion de participer uniquement à des projets à partir de zéro (réécriture ou autre), et je suis de plus en plus impliqué dans le travail frontal de Yahoo. Je modifie et créent de nombreux documents internes (c'est-à-dire des normes de codage CSS); écrire des propositions; et plus encore.
Une autre note supplémentaire qu'au cours de mes huit années à Yahoo, je n'avais probablement pas 100 lignes de code JavaScript. Si je n'ai pas quitté ou fait virer, c'est grâce à Lingyan Zhu et Renato Iwashima;
TK: Au début, il n'y avait ni bibliothèques ni méthodes publiées; Sur mon ancien site, j'ai même eu un commentaire comme celui-ci:
<code></code>
Tout est une concurrence équitable, tout est maltraité parce que nous n'avons qu'un ensemble d'outils très limités et que nous devons faire beaucoup de choses.
Mais quand j'ai rejoint Yahoo, les choses ont radicalement changé. Les développeurs du Royaume-Uni sont des partisans fidèles des normes Web et je les remercie pour leur grande influence sur la façon dont le HTML et le CSS de Yahoo sont écrits. Le marquage sémantique est une réalité, et CSS est un "T" écrit conformément au principe de séparation des préoccupations (SOC) (bien que parfois trop vif pour moi).
YUI a des composants CSS, mais n'a pas encore de cadre CSS. Il y a une bibliothèque CSS interne (appelée LEGO) mais je ne l'ai jamais utilisée. OOCSS, SMACSS, ECSS (Salute to Ben), BEM, bootstrap, purs et autres méthodes et bibliothèques apparaîtront bientôt.
TK: Avant que YSS ne déménage en Inde, mon manager Michael Montesano a demandé s'il y avait un moyen d'amener l'équipe à Bangalore pour éviter d'éditer des feuilles de style, réduisant ainsi le risque de dommages . Je pense que l'expérience des modèles YSS (les clients payants se plaignent que la page soit endommagée) le rend très paranoïaque lorsqu'il apporte des modifications à la feuille de style.
Ainsi, dans l'esprit de ma bibliothèque EZ-CSS, j'ai créé une "table utilitaire" - une table conçue pour permettre aux développeurs de mettre en œuvre leurs styles sans modifier ou ajouter des règles à la feuille de style .
Quelques années plus tard, Michael, alors directeur de l'ingénierie, m'a demandé si je pouvais repenser la page d'accueil de Yahoo en utilisant la classe de services publics uniquement parce qu'il savait que nous ne serions pas responsables de la maintenance du site Web. Nous avons discuté de hiérarchisation des cours d'utilité au cours des classes sémantiques, et je ne pense pas qu'à ce niveau, il n'existait pas à l'époque. C'est une décision très audacieuse.
Cet exercice massif est rapidement devenu une preuve de concept, montrant bon nombre des avantages du style avec des étiquettes . Il a vérifié tant de boîtes que nous avons décidé de repenser Yahoo! Mes produits domestiques en utilisant cette feuille de style "statique" (appelée pochoir).
TK: Notre bibliothèque de pochoirs est statique, et c'est un excellent outil pour appliquer les styles de conception - nous pensons que Yahoo est sur le point d'adopter ce style dans toutes ses propriétés. Nous avons rapidement réalisé que cela ne se produirait pas. Chaque équipe de design Yahoo a ses propres opinions sur des tailles de police parfaites, des marges parfaites, etc. Nous continuons à recevoir des demandes pour ajouter des styles très spécifiques à la bibliothèque.
Cette situation est inaccessible, nous avons donc décidé de développer un outil qui permet aux développeurs de créer leurs propres styles à la volée tout en respectant la nature atomique de la méthode créative. C'est ainsi que Atomizer est né. Nous avons cessé d'ajouter des styles - des déclarations CSS - et nous nous sommes plutôt concentrés sur la création d'un vocabulaire riche qui fournit aux développeurs un large éventail de styles tels que les requêtes multimédias, les sélecteurs descendant, les pseudo-classes, et plus encore.
Avec ACSS, les développeurs sont libres d'utiliser ce qu'ils veulent; Et il existe de nouveaux avantages directs pour les styles auxquels les développeurs ont utilisés. Ils n'ont plus à s'inquiéter de la rupture de leurs styles, et ils n'ont pas à s'inquiéter d'écrire des sélecteurs pour coiffer leurs composants.
ACSS a été initialement conçu pour résoudre les problèmes de Yahoo et travailler dans l'environnement de Yahoo.
Les personnes impliquées dans le CSS atomique comprennent Renato Iwashima, Steve Carlson et moi-même. Renato et Steve ont créé l'atomiseur.
TK: Quand j'ai rejoint Yahoo en 2007, j'ai rapidement appris à quel point la base de code pourrait être énorme. Il y a des équipes dans les zones de temps;
La plupart de cela est nouveau pour moi et je dois savoir si et comment cela affecte la façon dont j'écris CSS. J'ai commencé à revisiter et à défier toutes mes croyances parce que de nombreuses techniques ou méthodes qui sont des pratiques courantes pour moi ne semblent pas s'adapter, ou du moins contre-productives à des applications complexes.
Un «contrôle de réalité» est lié à l'abstraction de style. Nous avons tous lu l'article disant que la cartographie des classes M-10 à marge: 10px n'est pas une bonne idée, car cela signifie éditer à la fois HTML et CSS pour changer le style. Malheureusement, c'est ce qui se passe dans les projets grands / complexes:
Pour prédire un tel problème, il est nécessaire de comprendre l'intention du concepteur derrière leur demande: le style est-il choisi en raison de son abstraction, comme la couleur primaire, ou en raison de sa valeur spécifique, comme la marge de 15 pixels dans notre cas M-3x? S'il y a des guides de style pour appliquer les principes de conception, des classes comme M-3X peuvent être bien, mais si l'équipe de conception peut demander n'importe quel style qu'ils souhaitent, il est préférable d'éviter les conventions de dénomination qui mèneront à des styles flous. D'après mon expérience, toute ambiguïté peut entraîner des dommages.
S'appuyant sur la structure d'un document ou d'un composant pour le réglage de style - à travers un combinateur tel que> ou - Sounds comme une façon intéressante d'écrire une feuille de style, mais il ignore le fait que dans des environnements complexes, on ne peut pas supposer qu'une balise ou une structure particulière est immuable.
Pensez-vous que Z-Index est compliqué? Pensez-y à nouveau lorsque vous n'avez même pas la plage de pile où se trouvent vos composants. C'est l'un des problèmes les plus complexes à résoudre dans les grands projets où l'équipe est responsable de différentes parties de la page. J'ai écrit une fois une proposition à ce sujet.
Les sélecteurs qualifiés - tels que l'entrée. Requage et .Input.Requured - semble bien et sémantique, mais il crée des niveaux de spécificité inutiles - comme 0.1.1 et 0.2.0 - et empêche les changements de balise;
Vous vous appuyez sur le sélecteur générique * pour définir les styles de portée mondiaux? Dans un très grand projet, cela peut signifier que vous stylisez les composants des autres. Ne prenez pas de décisions de style pour les autres à moins que vous ne compreniez leurs besoins.
Je crois que vous avez lu que l'ID est mauvais, la spécificité est mauvaise, mais. En fait. Une spécificité élevée n'est pas aussi problématique que le nombre de niveaux de spécificité créés par vos règles. Il est beaucoup plus facile de coiffer dans un environnement où il n'y a que deux ou trois niveaux d'existence - par exemple, 1,1,0, 0,1,0, 0,2.0 - plutôt que dans un environnement avec une spécificité assez faible mais suivant une approche de «compétition libre» - par exemple, 0,1,0, 0,1.1, 0,2.0, 0,2.1, 0,2.2, etc.
Suivre aveuglément les conseils de la communauté CSS peut entraîner des surprises désagréables. N'adoptez jamais de nouvelles technologies qui n'ont pas encore été testées dans la pratique. Rappelez-vous que Will change? Et sachez toujours quel style vous utilisez ou ce qui peut le déclencher. Par exemple, la position peut créer un contexte d'empilement et un bloc contenant, tandis que le débordement peut créer un contexte de formatage de bloc.
D'après mon expérience, une compréhension approfondie du CSS ne suffit pas pour que les grandes organisations écrivent efficacement CSS. Pendant mon séjour à Yahoo, je me suis souvent retrouvé en conflit avec des gens qui étaient avec moi il y a quelques années. L'environnement est très cruel et nécessite très pragmatique pour éviter de nombreux pièges. La prochaine fois que vous regardez le code source d'un grand projet et voyez quelque chose qui n'a pas de sens pour vous, rappelez-vous ce tweet de Nicholas Zakas:
Ne présumez pas que les gens sont stupides, ignorants, faites des erreurs, supposons qu'ils sont intelligents, font de leur mieux et vous manquez de fond.
- Nicholas C. Zakas (@slicknet) 10 février 2013
TK: Notre équipe de ma page d'accueil a bien accepté ACSS, mais ça n'allait pas bien dehors. Notre première interaction a été avec l'équipe sportive située à Santa Monica. Steve et moi avons essayé de convaincre les développeurs lors d'une conférence téléphonique que ne pas suivre le principe de séparation des préoccupations est la bonne chose à faire et qu'elle ne provoque pas de confusion.
Nous leur avons souligné un article récent de Nicolas Gallagher qu'il serait utile des «étrangers», mais pas! Les choses ne vont pas bien et il y a beaucoup de friction. Le principal problème est que la bibliothèque est composée de classes de services publics, mais sa syntaxe n'aide pas à faciliter la conversation.
Je me souviens avoir rencontré l'équipe de courrier électronique, qui ne s'est pas opposée à l'idée de l'atomique CSS, mais voulait proposer leur propre méthode JavaScript pour utiliser les déclarations CSS "normales" - car ils ne pouvaient pas supporter la syntaxe ACSS. Quoi qu'il en soit, les données prenant en charge la bibliothèque (réduction d'environ 36% de CSS et HTML) indiquent que tout seul, donc ACSS est la fin. Aujourd'hui, plus de sept ans plus tard, la page d'accueil de Yahoo, Yahoo Sports, Yahoo News, Yahoo Finance et d'autres produits Yahoo utilisent toujours ACSS.
Pour mieux comprendre comment des approches telles que les projets ACSS bénéficient où la réutilisabilité des composants est critique, copiez le balisage du composant de Yahoo Finance et collez-le dans Yahoo News. Le composant doit sembler appartenir à une partie de la page. En effet, ACSS rend ces composants indépendants de la page.
TK: Nous avons identifié deux ensembles de "candidats" utilisés comme séparateurs de valeur d'attribut via plusieurs itérations: parenthèses () et crochets carrés [].
Renato se souvient que nous avons choisi des supports sur des crochets car nous connaissions les fonctions en JavaScript, même au détriment des touches de décalage supplémentaires. La syntaxe ACSS est destinée à:
Cela ressemble à ceci:
<code>[<context> [:<pseudo-class> ]<combinator> ][(<value> ,<value> ?,...)][][:<pseudo-class> ][::<pseudo-element> ][--<breakpoint_identifier> ]</breakpoint_identifier></pseudo-element></pseudo-class></value></value></combinator></pseudo-class></context></code>
Les développeurs construisent leurs classes selon la structure ci-dessus. La syntaxe centrale est basée sur la boîte à outils populaire Emmet. Nous utilisons la méthode Emmet pour réduire les fonctionnalités, car la classe de base est une paire de propriétés / valeur explicite, pas une chaîne arbitraire .
Nous avons également créé plus d'une douzaine de classes auxiliaires. Ceux-ci appliquent plusieurs déclarations de style et sont soit des raccourcis, tels que le contenu cachant l'utilisateur visuellement malvoyant, soit des pirates, tels que ClearFix en utilisant .cf. Nous fournissons également aux développeurs plus de liberté en utilisant des fichiers de configuration où ils peuvent créer des variables, telles que .PrimaryColor - des points de rupture et plus encore.
Les gens qui n'ont jamais utilisé ACSS vous diront que la syntaxe est trop bizarre (au mieux), mais les gens qui le connaissent vous diront qu'il est intelligent à bien des égards.
TK: J'ai déjà écrit dans diverses publications en ligne, il est donc naturel d'écrire un article sur cette approche «difficile».
Yahoo a parrainé une conférence frontale en octobre 2013, où Renato a organisé un discours pour présenter notre solution, et j'ai essayé de publier cet article avant cela. J'ai choisi de ne pas le publier sur le réseau Yahoo! Le réseau car le site ne fournit pas de section de commentaires. Une liste à part ne pouvait pas le publier dans le temps, mais Smashing Magazine a accéléré son processus de révision pour pouvoir publier l'article fin octobre.
Mon approche pour choisir un éditeur avec une section de commentaires a porté ses fruits parce que le message a reçu plus de 200 commentaires, ce qui prenait beaucoup de temps et frustrant pour moi - et j'ai dû répondre à ces commentaires.
TK: Lorsque l'article a été publié, j'ai dit à Vitaly [Friedman, co-fondateur de Smashing Magazine] cette note ressemblait à une sorte de clause de non-responsabilité; Mais je ne l'ai pas vraiment réfuté parce que j'ai compris l'idée de Vitaly. Je trouve que cette note est toujours intéressante, et cette approche est devenue courant maintenant.
TK: Il y a toujours place à l'amélioration, surtout après avoir lancé cette solution. Vous ne pouvez pas regarder ce que les autres ont fait pour en savoir plus sur leurs erreurs ou leurs lacunes. Vous n'avez pas de matériaux améliorés. Donc, si nous pensons que nous avons réussi la première fois, ce serait vanite.
Nous avons une vaste expérience avec le CSS atomique parce que nous utilisons des feuilles de style "statiques" dans de grands projets depuis plus d'un an. Mais en termes de dynamique - des outils - nous ne semblons pas trouver beaucoup d'inspiration. N'oubliez pas qu'il a fallu six ans aux autres bibliothèques pour emboîter le pas.
En français, nous disons: Essuyer Les Plâtres . (Essuyer la poussière)
Une erreur que nous avons commise a été d'utiliser "Atomic CSS" comme titre d'Acss.io parce que, comme l'a souligné John Polacek, cela a créé une certaine confusion. Depuis lors, nous avons changé le titre.
La seule chose que je regrette, c'est de savoir comment la communauté a traité le CSS / ACSS atomique au fil des ans, ce qui a récemment conduit à un échange étrange où quelqu'un m'a expliqué ce que signifie «atomique CSS»:
La bibliothèque atomique CSS [ACSS] utilise ce nom, mais je pense que c'est trompeur parce que la fonctionnalité dont vous parlez est la génération de style dynamique. "ATOMIQUE CSS" est un terme commun qui spécifie les petits sélecteurs comme atomes, mais ils sont statiques.
Parlez d'être effacé. ;)
Merci beaucoup pour Thierry d'avoir participé à cette interview et nous a permis de le publier à la communauté.
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!
Comment résoudre err_connection_reset
Windows ne peut pas accéder à l'ordinateur partagé
redémarrage de nginx
utilisation de la fonction de formatage
Solution au problème selon lequel le logiciel de téléchargement Win10 ne peut pas être installé
Comment résoudre l'erreur inconnue 11
Comment apprendre le langage go à partir de 0 bases
fonction utilisation de la fonction
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
