Share
Atomic Design este o metodologie care conturează structura de cod sensibil pentru foile de stil. Are o urmă mare, dar îmi găsesc convențiile de numire uneori ambigue. Ce este o moleculă? Ce este un organism? De unde știm unde să trasăm linia dintre cele două? Aceste întrebări particulare par a fi cea mai mare piedică pentru interpretarea unei arhitecturi atomice.
Atomii, moleculele, organismele, șabloanele și paginileAstăzi vom discuta ce folosesc, aspecte particulare ale convențiilor designului atomic cu care mă lupt, ce am făcut pentru a rezolva problemele mele și cum organizez în prezent Sass folosind, de exemplu, modelul 7-1.
Brad Frost, autor al Atomic Design, a clarificat de atunci faptul că metodologiile sale nu dictează nici o structură CSS. În schimb, acesta oferă un model mental pentru a gândi la construirea interfețelor utilizatorilor. Îmi pare rău Brad!
"Nu proiectăm pagini, proiectăm sisteme de componente" - Stephen Hay
Îmi place designul atomic și ideologiile sale, dar am descoperit că se pot prăbuși atunci când lucrează cu membrii echipei care nu sunt familiarizați intim cu modul în care funcționează toate. În trecut, am folosit următoarea structură de directoare:
Organizarea dosarelor: root / css / src /
- vars - funcții - mixuri - bază - pluginuri - tipografie - atomi - molecule - organisme - șabloane - pagini - state - utilitate style.scss
În style.scss Parametrii Sass sunt importați folosind gulp-sass-glob-import:
Fișierul index de import Sass: root / css / src / style.scss
// Config @import "vars / *"; @import "funcții / *"; @import "mixuri / *"; // Componente Bower @import "... / bower_components / normalize-scss / _normalize"; // stiluri generale de selectare DOM @import "base / *"; // Tipuri de fonturi și tipărire generală @import "typography / *"; // Adăugări de la 3rd Party @import "plugins / *"; // Atomic Design @import "atomi / ** / *"; @import "molecule / ** / *"; @import "organisme / ** / *"; @import "șabloane / ** / *"; @import "pagini / ** / *"; // Variații prin evenimente @import "states / *"; // Ajutor general UI @import "utilitar / *";
Comanda cu această configurație contează destul de puțin. Dacă trebuie modificat un "atom", "moleculă" sau "organism", declarațiile făcute în șabloane sau pagini vor înlocui părțile menționate mai sus, împreună cu toate celelalte.
Comanda permite în plus suprascrierea stilului unui plugin, dacă ar trebui să apară (și, de obicei, în experiența mea).
O mare parte din conținutul fiecărui director atomic (atomi, molecule, organisme, șabloane, pagini) va conține particule care, teoretic, sunt ușor de găsit și ușor de gestionat atunci când este necesar.
- atomi - _buttons.scss - _links.scss - _inputs.scss - molecule - _navigation.scss - _search-form.scss - _contact-form.scss - organisme - _header.scss - _footer.scss - _content.scss - footer.scss - _grid-2column.scss - _grid-3column.scss - pagini - _home.scss - _about.scss - _contact.scss
Organizația pare a fi sensibilă dacă sunteți înțeleaptă cu Atomic Design, dar nu vă puteți familiariza cu cineva care nu cunoaște abordarea și nomenclatura. Un dezvoltator care nu știe de designul Atomic nu va înțelege faptul că o formă de căutare se află în interiorul molecule directorul și poate dezactiva căutarea în alte domenii pentru a efectua modificări sau pur și simplu a fi frustrat și a face un nou fișier; Am văzut că sa întâmplat.
Din momentul acestei scrieri, am realizat o abordare care prevedea elemente în întregime ca elemente, cum ar fi blocurile lego, creând astfel o ușurință de utilizare pentru toți cei implicați în codabază. Uitați-vă la următoarea structură de directoare:
- vars - funcții - mixuri - bază - tipografie - pluginuri - set de instrumente - componente - aspect - pagini - state - utility style.scss
Sperăm că puteți vedea prin acest exemplu că este destul de intuitiv să adunăm scopul fiecărui dosar (cu excepția setului de instrumente). "Toolbox" este un loc pentru a stoca ajutoare care nu au legătură cu utilitarele, cum ar fi clasele personalizate pentru modelele de aspect și obiecte, animațiile personalizate ale cadrelor cheie și așa mai departe. Aceste elemente de instrumente, pentru mine, sfârșesc de obicei ca părți pe care le pot suprascrie sau pe care le-aș putea dori în viitor și de ce sunt importate înainte de directorul de componente.
În această etapă, partialele sunt încărcate în indicele de stiluri astfel:
// Config @import "vars / ** / **"; @import "funcții / *"; @import "mixuri / *"; // UI @import "... / bower_components / normalize-scss / _normalize"; @import "bază / *"; // stilul general folosind selectorii elementului DOM @import "typography / *"; @import "pluginuri / ** / *"; // Suporturi pentru @ third party add-ons @import / ** / * "; // Componente nonimplicitate @import "/ ** / *"; // blocuri lego @import "layout / ** / *"; @import "pagini / ** / *"; @import "state / ** / *"; @import "utilitate / ** / *";
"Componentele" vor conține bucăți de interfață, cum ar fi butoane, intrări, logo-uri, avatare, antet, subsol, formulare și chiar module cum ar fi navigația. Componentele pot fi orice, atâta timp cât fac un lucru și un singur lucru, reutilizabile, reutilizate în cadrul proiectului și, cel mai important, independente; nu o definiție proastă care să fie universală înțeleasă dacă mă întrebi. Această abordare particulară implementează, de asemenea, diverse idei de la SMACSS (statele) și Atomic Design (șabloane - denumite în acest exemplu - și pagini).
În ceea ce privește modalitatea de a găsi mult mai ușor să localizați directorul de componente și să găsiți partea de interfață de corelare pe care un dezvoltator o poate urmări; de exemplu:
- componente - _buttons.scss - _navigation.scss - _masthead.scss - _footer.scss - _logo.scss - _avatar.scss - _contact-form.scss - _sales-calculator.scss
În esență, componentele reprezintă un magazin unic. Designul atomic ar putea funcționa perfect pentru o echipă de unu, sau chiar o echipă care este familiar, dar într-o echipă mai mare, frustrarea poate fi resimțită.
Atomic Design poate fi utilizată în mod absolut pentru a păstra stilul minim pe elemente pentru a crea componente de interfață semnificative și reutilizabile. Dar puteți găsi anumite aspecte confuz. Decideți-vă pentru dvs. ce este mai bine pentru dvs. și trageți concluzii din aceasta. Ca și în cazul tuturor, aceasta este doar experiența mea și alții pot avea o poziție diferită.
Mi-ar plăcea să aud cum vă apropiați de acest scenariu, așa că spuneți-mi în comentariile. Fericit codarea tuturor!
Accentsconagua