Strategija klasa 1

Tipovi klasa

Pomoćne klase

Klasa stvorena s određenom kombinacijom CSS svojstava koja se može primijeniti na elemente globalno kroz cijeli projekt.

Klasa stvorena s određenom kombinacijom CSS svojstava koja se može primijeniti na elemente globalno kroz cijeli projekt. Sve pomoćne klase po prirodi su globalne klase. Koncept pomoćne klase je klasa koja pomaže primijeniti globalna CSS svojstva unutar projekta.

Na primjer, dodali smo pomoćnu klasu background-color-gray u početni projekt Client-First koja nam pomaže organizirati i upravljati često korištenim bojama pozadine kroz cijeli projekt.

Dodali smo pomoćnu klasu font-size-large u početni projekt Client-First koja nam pomaže organizirati i upravljati ujednačenim veličinama tipografije kroz cijeli projekt.

Pomoćne klase nemaju podvlaku u imenu klase.

‍

Prilagođene klase

Prilagođena klasa stvorena za određenu komponentu, stranicu, grupiranje elemenata ili pojedinačni element.

Ovu klasu nazivamo "prilagođena" klasa jer je prilagođena izvan naših pomoćnih klasa. Prilagođene klase treba stvoriti kada pomoćne klase ne mogu ili ne bi trebale biti korištene na elementu. Klasa je prilagođena tom elementu.

Na primjer, klasa za stiliziranje određenog elementa u globalnim zaglavljima za projekt, header_background-layer.

Na primjer, klasa za stiliziranje određenog elementa na slajdu s iskazima, testimonial-slider_headshot.

U Client-First, prilagođene klase koriste podvlaku u imenu klase.

‍

Globalna klasa

Klasifikacija klase. Globalna klasa namijenjena je za upotrebu kroz cijeli projekt. I pomoćne i prilagođene klase mogu biti globalne klase.

Globalna klasa primjenjuje stilove koji će ostati ujedinjeni kroz cijeli projekt. Globalna klasa nije za specifičan slučaj.

"Globalno" znači svugdje i bilo gdje u projektu.

Sve pomoćne klase su globalne klase. Pomoćne klase su globalne po prirodi.

Na primjer, naše klase margine i razmaka su globalne pomoćne klase. margin-large ima vrijednost margine od 3rem. Kada tu vrijednost ažuriramo na 4rem, svaka instanca koja koristi margin-large će se ažurirati na 4rem.

margin-large je globalni kontroler koji mijenja vrijednost naše margine i razmaka kroz cijeli projekt. Možemo napraviti značajne, globalne promjene u našem projektu kada pravilno koristimo globalne pomoćne klase.

Globalne klase nisu ograničene na pomoćne klase. Globalne klase sada su jasnije definirane kao bilo koja vrsta klase koja namjerava imati globalno upravljanje stilovima na cijeloj stranici.

U Client-First v2, bolje objašnjavamo i potičemo upotrebu prilagođenih klasa kao globalnih klasa.

Na primjer, faq_item može biti globalna prilagođena klasa. Imamo mnogo FAQ sekcija kroz cijelu web stranicu, a faq_item se koristi za upravljanje FAQ stavkama kroz cijeli projekt.

‍

Na primjer, header_content može biti globalna prilagođena klasa. Imamo komponentu zaglavlja na svakoj stranici projekta. Ova klasa globalno upravlja prilagodbom ovog omotača sadržaja kroz cijeli projekt.

Kombinirana klasa

Kombinirana klasa je varijanta osnovne klase. Kombinirana klasa nasljeđuje stilove iz osnovne klase i dodaje još stilova povrh nje. 

Definiramo "osnovnu klasu" kao prvu klasu na našem popisu kombiniranih klasa u kombiniranoj klasi. Na vrh osnovne klase dodajemo klasu kako bismo stvorili jedinstvenu varijaciju.

Dodana klasa koja daje jedinstvenu varijaciju koristi prefiks klase is-.

Kombinirana klasa će raditi samo kada se kombinira s osnovnom/ama klasom/ama prije nje. U videozapisu ispod, razumijte da is-blue ne radi samostalno. Radi samo kao dodatak osnovnoj klasi gumba.

Kombinirana klasa može biti stvorena iy prilagođene ili bazne pomoćne klase. Primjer iznad: button is-blue prikazuje pomoćnu klasu kao kombiniranu klasu.
‍

Također možemo stvoriti kombiniranu klasu za prilagođenu klasu. Na primjer, header_content is-home. Ovo je varijanta header_content prilagođene klase.

-is prefix

Definiramo kombiniranu klasu u Client-First s is- prefiksom. Kada vidimo is-, znamo da je ova klasa stvorena kao kombinirana klasa na vrhu osnovne klase.

‍

Nemojte naslagivati klase

Client-First ima univerzalno pravilo - ne naslagivati.

Naslagivati — puno klasa 'složeno' na elementu.

Naslagivanje — radnja slaganja puno klasa na element.

Ovaj je termin stvorio Client-First da bi se obratio problemima s kojima se suočavamo sa slaganjem klasa u Webflow Designeru.

Client-First ne preporučuje strategiju naslagivanja u Webflowu.

Na primjer:

U Client-Firstu, želimo izbjegavati takvo naslagivanje klasa. Čitat ćemo o izbjegavanju dubokog slaganja kroz cijelu dokumentaciju.

Evo kratkog popisa razloga:

Razlozi zbog kojih klase ne "naslagujemo".

Nemogućnost promjene redoslijeda stilova u ploči stilova dizajnera.

Nemamo slobodnu kontrolu nad složenim klasama u Webflowu. Ne možemo ih preurediti niti ih pravilno upravljati unutar Dizajnera. Ako moramo promijeniti ili ukloniti klase s popisa složenih, moramo ukloniti sve klase s popisa prije pristupa ranijim klasama.

U donjem slučaju možete vidjeti da moramo ukloniti neke klase ako želimo promijeniti težinu teksta s text-weight-medium na text-weight-bold:

Ovaj problem postane ekstreman kada radimo promjene na nižim breakpoint-ovima. Imamo čak i manje kontrole kad radimo promjene na breakpoint-ovima koji nisu bazni.

Sporiji workflow. Previše koraka za male promjene

Workflow prikazan gore uzima previše vremena. Ako je ovo konstanta praksa u našem workflow-u, to će produljiti naše vrijeme izrade i održavanja.

Produžena krivulja učenja.

Vjerujemo da naslagivanje klasa produžuje krivulju učenja. Nastaje veće potreba za razumjevanjem šta klase rade i kako sa njima upravljati.

Pisanje CSS-a u Webflow-u je brzo.

Pisanje CSS-a brzo je i učinkovito putem ploče Webflow Styles. Možemo stvoriti novu klasu i vizualno dodati CSS svojstva klasi. Ovaj je proces vrlo brz u Webflowu, a mi ga koristimo u Client-Firstu.

Ušteda veličine CSS-a nije previše značajna

Kada koristimo globalne klase u projektu, možemo smanjiti veličinu naše CSS datoteke. Ne vjerujemo da ove male CSS uštede nadmašuju prednosti stvaranja prilagođene klase unutar Webflowa.

Kasnije saznajte više o naslagivanju:
Postoji potpuno objašnjenje svake od ovih točaka u Strategija Klasa 2.

Koristite prilagođene klase

Prilagođene klase su moćna i preporučena metoda unutar Client-Firsta.

U ove svrhe koristimo prilagođene klase

1. Jednostavno uređivanje za određene elemente. Ako koristimo organizirani prilagođeni sustav klasa, možemo napraviti brze jedinstvene promjene na određenim elementima i komponentama u našem projektu.
2. Da izbjegnemo korištenje pomoćnih klasa posvuda u našem projektu. Sustavi klase korisnosti su moćni, ali se ne bi trebali koristiti za izgradnju cijelog projekta. Kada korištenje klase pomoćnih klasa komplicira naš posao kao Webflow developer, potičemo stvaranje prilagođene klase. Trebala bi postojati jasna korist od korištenja pomoćnih klasa.
3. Kako biste izbjegli naslagivanje. naslagivanje može se zamijeniti prilagođenom klasom.

Primjer pozadinske teksture

Na primjer, želimo stilizirati teksturu pozadine na komponenti.

Možda ćemo moći stilizirati našu pozadinsku teksturu s tri naslagane klase. Na primjer, pozadina-apsolutna + fit-size + opacity-low. Kada se kombiniraju, ove tri klase daju nam stilsku kombinaciju koja nam je potrebna.

Umjesto slaganja više klasa za ovu pozadinsku teksturu, možemo stvoriti prilagođenu klasu pod nazivom services-item_background-texture. Klasa jasno navodi da je ova klasa za "teksturu koja se nalazi na pozadinskoj slici stavke usluge."

Sada možemo brže i slobodnije uređivati ovu prilagođenu klasu umjesto reorganizacije naslaganih klasa. Ako trebamo jedinstveni stil, imamo prilagođenu klasu koja je spremna prihvatiti taj jedinstveni stil.

Tradicionalni razvoj CSS-a

U tradicionalnom razvoju CSS-a, rješenje naslagivanja klasa može biti bolje rješenje. Naslagane klase zahtijevat će manje CSS-a za ručno pisanje, što će dovesti do bržeg razvoja.

Međutim, ovo nije tradicionalni razvoj CSS-a. Ovo je Webflow. Client-First zbirka je načela stvorena posebno za Webflow.

U Webflowu vjerujemo da je potrebno manje vremena i truda za stvaranje i upravljanje stilovima prilagođene klase na elementu nego za upravljanje naslaganim popisom klasa.

Postoji potpuno objašnjenje stvaranja prilagođene klase u Strategija Klasa2.

Konvencija imenovanja

Stvorite jasna i specifična imena za klase.

Webflow developer, klijent ili bilo tko trebao bi razumjeti što klasa radi na temelju naziva klase, čak i ako nikada prije nije čuo za Client-First.

Način razmišljanja o imenovanju

Ciljevi Client-First konvencije imenovanja

• Omogućite netehničkoj osobi da upravlja našom web stranicom.
• Budite jasni, informativni i opisni u našem imenovanju klasa.
• Dajte čitatelju što više konteksta u svrhu te klase.
• Pročitajte naziv klase i znajte koja je njezina svrha.
• Bez kratica, bez zabune.
• Dajte što više konteksta u odnos te klase s web-stranicom.
• Stvorite imena na temelju organizacijskih tehnika.
• Koristite ključne riječi za traženje dostupnih klasa unutar Style ploče.
• Vizualizirajte koja je svrha klase na temelju njezina naziva .

Pitanja koja si trebamo postaviti kada imenujemo klase

Nazivi klasa trebaju govoriti što rade. Kada stvaramo naziv za klasu, možemo se sjetiti sljedećih pitanja:

• "Što ova klasa radi u projektu?"
• "Koja je svrha ove klase u projektu?"
• "Kako mogu dati najviše konteksta za što je ova klasa odgovorna u projektu?"

Naziv klase trebao bi odgovoriti na ova pitanja.

Webflow developer, klijent ili marketinški stručnjak trebao bi moći razumjeti što klasa radi na temelju naziva klase, čak i ako nikad prije nije čuo za Client-First.

Smislena imena i ključne riječi

Jaka ključna riječ daje nam kontekst onoga što ova klasa/element radi. Što opisniji nazivi pomoći će nam da ostanemo organizirani.

Ključne riječi i jasno imenovanje temeljni su koncepti Client-Firsta. Svaki naziv klase trebao bi služiti smislenoj svrsi. Sljedećoj osobi koja uđe u projekt trebali bismo dati što više konteksta u svrhu nastave.

Ključne riječi idu od općih do specifičnih unutar naziva klase

Pogledajmo kao primjer text-size-large.

Najopćenitija ključna riječ u ovom nazivu klase je text. Ova riječ nam govori da ova klasa ima veze s tekstualnim elementom.

size nam govori da radimo na prilagođavanju veličine teksta. Riječ "size" je specifičnija jer se odnosi na određeno CSS svojstvo teksta — ^font-size.

Zadnje imamo large, što nam daje preciznije informacije o vrijednosti veličine teksta. To je velika veličina teksta.

‍

Primijetite kako ovu klasu ne nazivamo large-size-text. Iako ovo može biti jednako jasno kao i text-size-large, imamo značajne prednosti u Client-Firstu kada slijedimo konvenciju imenovanja klasa od općeg do specifičnog. Omogućujemo inteligentnije pretraživanje razreda i čistu organizaciju mapa. O tome ćemo saznati više kroz dokumentaciju.

Pogledajmo primjer koristeći prilagođenu klasu, team-list_headshot-wrapper.

Naziv mape je team-list_, što nam govori da ovaj element ima neke veze sa stranicom tima ili odjeljkom tima i da je popis. "Team list" naziv je grupe koja sadrži određene elemente.

headshot postaje sve konkretniji i govori nam da to ima veze s elementom headshot unutar timskog popisa.

wrapper postaje još specifičniji i govori nam da je to omot headshot elementa.

Čitanje naziva klase team-list_headshot-wrapper je jasno i logično, čak i ako korisnik ne razumije CSS iza njega. Korisnik bi razumio da će uređivanje ove klase učiniti [nešto] na slikama popisa tima. To je izvrstan savjet za sljedeću osobu koja uđe u projekt.

Sada zamislite dodavanje više elemenata unutar našeg omota timske slike. Možemo ostati vrlo organizirani s konvencijom imenovanja od općeg do specifičnog.

team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background

Naš popis klasa za timski popis vrlo je organiziran i logičan unutar našeg projekta. Ova se konvencija imenovanja vrlo dobro integrira u našu značajku mapa.