Share
Atomic Design är en metod som beskriver förnuftig kodstruktur för stylesheets. Den har en stor följd, men jag finner att dess namnkonventioner kan ibland vara tvetydiga. Vad är en molekyl? Vad är en organism? Hur vet vi vart man ska rita linjen mellan de två? Dessa speciella frågor verkar vara det största hindret för att tolka en atomarkitektur.
Atomer, molekyler, organismer, mallar och sidorIdag diskuterar vi vad jag använder, speciella fasetter av atomkonstruktionens konventioner som jag kämpar med, vad jag har gjort för att lösa mina problem och hur jag för närvarande organiserar Sass med exempelvis 7-1-mönstret.
Brad Frost, författare till Atomic Design, har sedan klargjort det faktum att dess metoder inte faktiskt dikterar någon CSS-struktur. Istället erbjuder den en mental modell för att tänka på att konstruera användargränssnitt. Ledsen Brad!
"Vi utformar inte sidor, vi utformar system av komponenter." - Stephen Hay
Jag älskar atomdesign och dess ideologier, men jag har funnit att de kan kollapsa när de arbetar med teammedlemmar som inte är bekanta med hur allt fungerar. Tidigare använde jag följande mappstruktur:
Mapporganisation: root / css / src /
- vars - funktioner - mixins - baspluggar - typografi - atomer - molekyler - organismer - mallar - sidor - stater - verktygsstil.scss
Inom style.scss Sass partials importeras med gulp-sass-glob-import:
Sass Import Index-fil: root / css / src / style.scss
// Config @ import "vars / *"; @import "funktioner / *"; @import "mixins / *"; // Bower Components @ import "... / bower_components / normalize-scss / _normalize"; // Allmänt DOM-väljarkanaler @ import "base / *"; // Typsnitt & Allmänt Typ Styling @ import "typografi / *"; // 3rd Party Addons @ import "plugins / *"; // Atomic Design @ import "atomer / ** / *"; @ import "molekyler / ** / *"; @import "organismer / ** / *"; @import "mallar / ** / *"; @import "sidor / ** / *"; // Variationer genom Events @ Importer "states / *"; // Allmänna användargränssnittsanvändare @import "verktyg / *";
Ordern med den här inställningen är ganska stor. Om en "atom", "molekyl" eller "organism" behöver justeras, kommer deklarationer som gjorts i mallar eller sidor att åsidosätta de ovan nämnda delarna tillsammans med alla andra partiella föregående.
Ordern möjliggör dessutom överskridanden till ett plugins styling, om det behöver uppstå (och brukar göra enligt min erfarenhet).
Mycket av innehållet för varje atomkatalog (atomer, molekyler, organismer, mallar, sidor) innehåller partiklar som i teorin är lätta att hitta och lätthanterliga när det behövs.
- atomer - _buttons.scss - _links.scss - _inputs.scss - molekyler - _navigation.scss - _search-form.scss - _contact-form.scss - organismer - _header.scss - _footer.scss - _content.scss - mallar - _sticky- footer.scss - _grid-2column.scss - _grid-3column.scss - sidor - _home.scss - _about.scss - _contact.scss
Organisationen verkar vara förnuftig om du är klok på Atomic Design, men faller för någon som inte känner till tillvägagångssättet och nomenklaturen. En utvecklare som inte känner till Atomic Design kommer inte att känna av det faktum att en sökformulär finns inom molekyler katalog och kan stänga av sökning i andra områden för att göra ändringar, eller helt enkelt bli frustrerad och skapa en ny fil; Jag har sett det hända.
Från tidpunkten för detta skrivande tar jag ett tillvägagångssätt som helt och hållet innehåller komponenter som lego-block, vilket ger användarvänlighet för alla som är involverade i kodbasen. Ta en titt på följande katalogstruktur:
- vars - funktioner - mixins - bas - typografi - plugins - verktygslåda - komponenter - layout - sidor - states - utility style.scss
Förhoppningsvis kan du se med det här exemplet att det är ganska intuitivt att samla syftet med varje mapp (med undantag för verktygslåda). "Verktygslåda" är en plats för att lagra hjälpare som inte är relaterade till verktyg, till exempel anpassade klasser för layout- och objektmönster, anpassade keyframe-animeringar och så vidare. Dessa verktygslådor, för mig, brukar hamna som delar jag kan åsidosätta eller kanske vill i framtiden, och varför de importeras före komponentkatalogen.
På detta stadium laddas partials i stilindexet så här:
// Config @ import "vars / ** / **"; @import "funktioner / *"; @import "mixins / *"; // UI @ import "... / bower_components / normalize-scss / _normalize"; @import "bas / *"; // generell styling med DOM element selectors @ import "typografi / *"; @import "plugins / ** / *"; // 3rd party add-ons @import "verktygslåda / ** / *"; // Non-Utility Helpers @ import "komponenter / ** / *"; // lego block @import "layout / ** / *"; @import "sidor / ** / *"; @import "states / ** / *"; @import "verktyg / ** / *";
"Komponenter" kommer att innehålla delar av användargränssnittet, såsom knappar, ingångar, logotyper, avatarer, sidhuvud, sidfot, former och till och med moduler som navigering. Komponenter kan vara vad som helst, så länge de bara gör en sak och en sak, återanvändbar, återanvänds över hela projektet och viktigast oberoende. inte en dålig definition som förstås universellt om du frågar mig. Denna speciella metod utövar också olika idéer från SMACSS (stater) och Atomic Design (mallar som kallas layout i det här exemplet och sidorna).
Med tanke på att det är mycket lättare att hitta komponentkatalogen och hitta den korrelerade gränssnittsdelen kan en utvecklare spåra ner; till exempel:
- komponenter - _buttons.scss - _navigation.scss - _masthead.scss - _footer.scss - _logo.scss - _avatar.scss - _contact-form.scss - _sales-calculator.scss
I grunden är komponenter en one-stop-butik. Atomdesign kan fungera perfekt för ett lag av en, eller till och med ett lag som är välbekant, men inom en större laginställning kan frustrationen kännas.
Atom Design kan absolut användas för att hålla minimal styling på element för att skapa meningsfulla och återanvändbara gränssnittskomponenter. Men du kan hitta vissa aspekter förvirrande. Bestäm själv vad som fungerar bäst för dig och dra slutsatser av det. Som med allt är det bara min erfarenhet och andra kan ha en annan hållning.
Jag skulle gärna höra hur du närmar dig detta scenario, så låt mig veta i kommentarerna. Lycklig kodning alla!
Accentsconagua