Mga uri ng Klase
Klaseng utility
Ang klase na ginawa gamit ang partikular na kumbinasyon ng mga katangiang CSS na maaaring ilapat sa mga elementong pang-global sa buong proyekto.
Ang lahat ng mga klaseng utility ay kalikasang mga klaseng global. Ang konsepto ng klaseng utility ay klase na tumutulong sa paglalapat ng mga global na katangian ng CSS sa loob ng proyekto.
Halimbawa, nagdagdag tayo ng klaseng utility na background-color-gray sa panimulang proyekto ng Client-First para matulungan tayong ayusin at pamahalaan ang mga karaniwang ginagamit na kulay ng background sa buong proyekto.
Nagdagdag tayo ng klaseng utility na font-size-large sa Client-First starter project para matulungan tayong ayusin at pamahalaan ang pinag-isang pagsusukat ng tipograpiya sa buong proyekto.
Ang mga klaseng utility ay hindi gagamit ng salungguhitan sa pangalan ng klase.
Klaseng kustom
Ang klaseng kustom ay ginagawa para sa partikular na komponent, pahina, pagpapangkat ng mga elemento, o elemento.
Tinatawag natin itong "kustom" na klase dahil labas ito sa klaseng utility ng ating proyekto. Ang mga klaseng kustom ay dapat gawin kapag ang mga klaseng utility ay hindi maaaring, o hindi dapat, gamitin sa elemento. Kustom ang klase sa elementong iyon.
Halimbawa, ang klase na mag-istilo ng partikular na elemento sa mga global na header para sa proyekto, header_background-layer.
Halimbawa, ang klase na mag-istilo ng partikular na elemento sa testimonial slide, testimonial-slide_headshot.
Sa Client-First, ang mga klaseng kustom ay gumagamit ng salungguhitan sa pangalan ng klase.
Klaseng global
Ang klasipikasyon ng klase. Ang klaseng global ay inilaan para magamit sa buong proyekto. Ang mga klaseng utility at kustom ay maaaring mga klaseng global.
Ang klaseng global ay naglalapat ng mga istilo na mananatiling pinag-isa sa buong proyekto. Ang klaseng global ay hindi para sa partikular na pagkakataon.
Ang ibig sabihin ng "Global" ay sa lahat at saanman sa proyekto.
Ang lahat ng mga klaseng utility ay mga klaseng global. Ang mga klaseng utility ay global.
Halimbawa, ang ating mga klase sa margin at padding ay mga klaseng global na utility. Ang margin-large ay may margin na 3rem ang halaga. Kapag binago natin ang halaga na iyon sa 4rem, ang bawat instansiya na gumagamit ng margin-large ay magiging 4rem.
Ang margin-large ay global na tagapamahala ng pagbabago sa halaga ng ating margin at padding sa buong proyekto. Makakagawa tayo ng maepektibo at global na pagbabago sa ating proyekto kapag ginamit natin nang tama ang mga klaseng global na utility.
Ang mga klaseng global ay hindi limitado sa mga klaseng utility. Ang mga klaseng global ay mas malinaw na ngayong tinukoy bilang anumang uri ng klase na naglalayong magkaroon ng pangkalahatan na global na pamamahala ng mga istilo.
Sa Client-First v2, mas mainam nating ipaliwanag at hinihikayat ang paggamit ng mga klaseng kustom bilang mga klaseng global.
Halimbawa, ang faq_item ay maaaring klaseng global na kustom. Marami tayong FAQ na seksyon sa buong websayt, at ang faq_item ang ginagamit upang pamahalaan ang mga FAQ na item sa buong proyekto.
Halimbawa, ang header_content ay maaaring klaseng global na kustom. Mayroon tayong component ng header sa bawat pahina ng proyekto. Pinamamahalaan ng klase na ito ang global na pag-kustom ng wrapper ng content na ito sa buong proyekto.
Klaseng kombo
Ang klaseng kombo ay baryante sa klaseng base. Ang klaseng kombo ay nagmamana ng mga istilo mula sa klaseng base at nagdaragdag ng higit pang mga istilo sa ibabaw nito.
Tinukoy natin ang "klaseng base" bilang ang unang klase sa ating listahan ng mga nakasalansan na klase sa klaseng kombo. Nagdaragdag tayo ng klase sa itaas ng batayang klase upang lumikha ng natatanging varyasyon.
Ang idinagdag na klase na nagbibigay ng natatanging varyasyon ay gumagamit ng klase na unlapi na is-.
Ang nakasalansan na klaseng kombo ay gagana lamang kapag pinagsama sa isa o maraming klaseng base bago nito. Sa bidyo sa ibaba, maunawaan na ang is-blue ay hindi gumagana nang mag-isa. Gumagana lamang ito bilang karagdagan sa klaseng base na button.
Maaaring malikha ang mga klaseng kombo mula sa kustom o utility na klaseng base. Ang halimbawa sa itaas na buttonis-blue ay nagpapakita ng klaseng utility bilang klaseng kombo.
Maaari din tayong gumawa ng klaseng kombo para sa klaseng kustom. Halimbawa, ang header_contentis-home. Isa itong baryante ng klaseng kustom ng header_content.
Unlapi na -is
Tinutukoy natin ang klaseng kombo sa Client-First na may is- na unlapi. Kapag nakita natin ang is- ay alam natin na ang klase na ito ay nilikha bilang klaseng kombo sa itaas ng klaseng base.
Huwag mag-deep stack ng mga klase
Ang Client-First ay may pangkalahatang tuntunin — huwag mag-deep stack.
Deep stack — maraming klase ang 'stacked’ sa ibabaw ng elemento.
Deep stacking — ang paggawa ng pagsasalansan ng maraming klase sa ibabaw ng elemento.
Ito ay terminong nilikha ng Client-First upang tugunan ang mga problemang kinakaharap natin sa mga nakasalansan na klase sa Webflow Designer.
Hindi inirerekomenda ng Client-First ang estratehiyang deep stacking sa Webflow.
Halimbawa:
Sa Client-First, gusto nating iwasan ang mga pag-deep stack ng klase na tulad nito. Babasahin natin ang tungkol sa pag-iwas sa pag-deep stack sa buong dokumentasyon.
Narito ang mabilis na listahan ng mga dahilan:
Mga dahilan kung bakit hindi kami nag-de-deep stack.
Kawalan ng kakayahang baguhin ang pagkakasunod-sunod ng mga istilo sa panig ng mga istilo ng Designer.
Wala tayong malayang pamamahala sa mga nakasalansan na klase sa Webflow. Hindi natin maiayos muli ang mga ito o maayos na pamahalaan ang mga ito sa loob ng Designer. Kung kailangan nating baguhin o alisin ang mga klase sa nakasalansan na listahan, kailangan nating alisin ang lahat ng klase sa listahan bago mapuntahan ang mga naunang klase.
Sa kaso sa ibaba, makikita natin na kailangan nating alisin ang ilang mga klase kung gusto nating baguhin ang bigat ng teksto mula sa text-weight-medium patungo sa text-weight-bold:
Labis itong nagiging problema kapag gumagawa ng mga pagbabago sa mas mababang antas ng breakpoint. Mayroon tayong mas kaunting pamamahala sa pagbago habang nagdidisenyo tayo sa mga breakpoint na labas sa baseng breakpoint.
Mas mabagal na daloy ng trabaho. Nangangailangan ng maraming hakbang para sa maliliit na pagbabago.
Ang daloy ng trabaho sa itaas ay nakakaubos ng oras. Kung ito ay palagiang kasanayan sa aming daloy ng trabaho, ito ay magpapahaba sa oras ng ating pagbuo at pagpapanatili.
Tumaas na kurba ng pagkatuto.
Naniniwala tayo na ang malalim na pagkakasalansan ay humahantong sa mas matarik na kurba ng pag-aaral. Mayroong mas malalim na pangangailangan para sa pag-unawa kung ano ang ginagawa ng mga klase at kung paano pamahalaan ang mga ito.
Mabilis ang pagsulat ng CSS sa Webflow.
Mabilis at mahusay ang pagsulat ng CSS sa pamamagitan ng panig ng mga istilo ng Webflow. Maaari tayong lumikha ng bagong klase at biswal na magdagdag ng mga katangian ng CSS sa klase. Napakabilis ng prosesong ito sa Webflow, at sinasamantala natin ito sa Client-First.
Ang laki ng nasasalba sa CSS ay hindi masyadong makabuluhan.
Kapag gumagamit tayo ng mga klaseng global sa proyekto, maaari nating bawasan ang laki ng ating CSS file. Hindi tayo naniniwala na ang maliit na nasasalba sa CSS ay mas malaki kaysa sa mga natutulong ng kustom na paggawa ng klase sa loob ng Webflow.
Matuto pa tungkol sa deep stack sa ibang pagkakataon:
Mayroong buong paliwanag sa bawat isa sa mga puntong ito sa Estratehiya sa Klase 2.
Gumamit ng mga klaseng kustom
Ang mga klaseng kustom ay mahusay at inirerekomendang pamamaraan sa loob ng Client-First.
Gumagamit tayo ng mga klaseng kustom para sa mga layuning ito
- Madaling pagbago para sa mga partikular na elemento. Kung gagamit tayo ng maayos na kustom na sistema ng klase, makakagawa tayo ng mabilis na natatanging pagbabago sa mga partikular na elemento at komponent sa ating proyekto.
- Upang maiwasan ang paggamit ng mga klaseng utility sa lahat ng dako sa ating proyekto. Ang mga sistema ng klaseng utility ay makapangyarihan ngunit hindi dapat gamitin para buuin ang buong proyekto. Kapag ang paggamit ng klaseng utility ay ginagawang mas kumplikado ang ating trabaho bilang mga developer ng Webflow, hinihikayat natin ang paglikha ng klaseng kustom. Dapat ay may malinaw na benepisyo sa paggamit ng klaseng utility.
- Upang maiwasan ang pag-deep stack. Ang malalim na pagsasalansan ay maaaring mapalitan ng klaseng kustom.
Halimbawa ng texture ng background
Halimbawa, gusto nating i-istilo ang texture ng background sa komponent.
Maaari nating i-istilo ang ating texture ng background na may tatlong nakasalansan na klase. Halimbawa, background-absolute + fit-size + opacity-low. Kapag pinagsama, ang tatlong klase na ito ay nagbibigay sa atin ng kumbinasyon ng istilo na kailangan natin.
Sa halip na magsalansan ng maraming klase para sa texture ng background na ito, maaari tayong lumikha ng klaseng kustom na tinatawag na services-item_background-texture. Malinaw na sinasabi ng klase na ang klase na ito ay para sa "Ang texture na nasa background na larawan ng item ng mga serbisyo."
Maaari na tayong mabilis at mas malayang gumawa ng mga pagbabago sa klaseng kustom na ito sa halip na muling ayusin ang mga stacked na klase. Kung kailangan natin ng kakaibang pagiistilo, mayroon tayong klaseng kustom na handang tanggapin ang kakaibang pagiistilo na iyon.
Tradisyunal na pagdibelop ng CSS
Sa tradisyunal na pagdibelop ng CSS, ang pagkakasalansan ng mga klase na solusyon ay maaaring ang mas mahusay na solusyon. Ang mga nakasalansan na klase ay magreresulta ng mas kaunting CSS sa pagsulat ng kowd, na hahantong sa mas mabilis na pagdibelop.
Gayunpaman, hindi ito tradisyonal na pagdibelop ng CSS. Ito ay Webflow. Ang Client-First ay koleksyon ng mga prinsipyong partikular na nilikha para sa Webflow.
Sa Webflow, naniniwala tayong mas kaunting oras at pagsisikap ang kailangan para gumawa at mamahala ng mga istilo ng klaseng kustom sa elemento kaysa sa pamamahala ng malalim na nakasalansan na listahan ng klase.
Mayroong buong paliwanag ng kustom na paggawa ng klase sa Estratehiya sa Klase 2.
Kumbensyon sa pagpapangalan
Lumikha ng malinaw at tiyak na mga pangalan para sa mga klase.
Dapat na maunawaan ng dibeloper ng Webflow, kliyente, o sinuman kung ano ang ginagawa ng klase batay sa pangalan ng klase, kahit na hindi pa nila narinig ang Client-First dati.
Pangalanang kaisipan
Mga Layunin ng kumbensyon sa pagpapangalan ng Client-First
- Bigyan ng kapangyarihan ang hindi teknikal na tao na pamahalaan ang ating websayt.
- Maging malinaw, nagbibigay-kaalaman, at naglalarawan sa ating pagpapangalan sa klase.
- Bigyan ang mambabasa ng maraming konteksto sa layunin ng klase na iyon.
- Basahin ang pangalan ng klase at alamin kung ano ang layunin nito.
- Walang mga pagdadaglat, walang takigrapya, walang kalituhan.
- Magbigay ng maraming konteksto sa kaugnayan ng klase na iyon sa websayt.
- Lumikha ng mga pangalan batay sa mga teknik sa organisasyon.
- Gumamit ng mga pangunahing salita upang maghanap ng mga magagamit na klase sa loob ng panel ng Estilo.
- Isipin kung ano ang layunin ng klase batay sa pangalan nito.
Mga itatanong sa ating sarili kapag pinangalanan ang mga klase
Dapat maipakita ng mga pangalan ng klase kung ano ang ginagawa nila. Kapag gumagawa ng pangalan para sa klase, maiisip natin ang mga tanong na ito:
- "Ano ang ginagawa ng klase na ito sa proyekto?"
- "Ano ang layunin ng klase na ito sa proyekto?"
- "Paano ko maibibigay ang pinakamaraming konteksto sa kung ano ang responsibilidad ng klase na ito sa proyekto?"
Dapat sagutin ng pangalan ng klase ang mga tanong na ito.
Dapat na maunawaan ng dibeloper, kliyente, o nagmemerkado ng Webflow kung ano ang ginagawa ng klase batay sa pangalan ng klase, kahit na hindi pa sila nakarinig ng Client-First dati.
Mga makabuluhang pangalan at pangunahing salita
Ang malakas na pangunahing salita ay nagbibigay sa atin ng konteksto sa kung ano ang ginagawa ng klase/elemento na ito. Ang pagiging mapaglarawan hangga't maaari sa ating pagbibigay ng pangalan ay makakatulong sa atin na manatiling organisado.
Ang mga pangunahing salita at malinaw na pagpapangalan ay malalim na pangunahing konsepto ng Client-First. Ang bawat pangalan ng klase ay dapat magkaroon ng makabuluhang layunin. Dapat nating bigyan ang susunod na tao na papasok sa proyekto ng maraming konteksto sa layunin ng klase.
Ang mga pangunahing salita ay mula sa pangkalahatang-paespesipiko sa loob ng pangalan ng klase
Tingnan natin ang text-size-large bilang halimbawa.
Ang pinaka-pangkalahatang pangunahing salita sa pangalan ng klase na ito ay text. Sinasabi sa atin ng salitang ito na ang klase na ito ay may kinalaman sa elemento ng teksto.
Sinasabi sa atin ng size na nagtatrabaho tayo sa pagbabago ng laki ng teksto. Ang salitang "size" ay mas tiyak dahil nauugnay ito sa partikular na katangian ng teksto ng CSS — font-size.
Sa huli, mayroon tayong large, na nagbibigay sa atin ng mas tiyak na impormasyon tungkol sa halaga ng laki ng teksto. Ito ay malaking sukat ng teksto.
Pansinin kung paano natin hindi tinatawag ang klase na ito na large-size-text. Bagama't ito ay maaaring kasing-linaw ng text-size-large, mayroon tayong mga makabuluhang benepisyo sa Client-First kapag sinusunod natin ang pangkalahatang-paespesipikong kombensiyon sa pagpapangalan ng klase. Pinapagana natin ang mas matalinong paghahanap sa klase at malinis na organisasyon ng Folders. Malalaman natin ang higit pa tungkol dito sa kabuuan ng dokyumentasyon.
Tingnan natin ang halimbawa gamit ang klaseng kustom, team-list_headshot-wrapper.
Ang pangalan ng polder ay team-list_, na nagsasabi sa atin na ang elementong ito ay may kinalaman sa pahina ng koponan o sa seksyon ng koponan at listahan. "Team list" ay ang pangalan ng pangkat na naglalaman ng mga partikular na elemento.
Nagiging mas tiyak ang headshot at sinasabi sa atin na may kinalaman ito sa elemento ng headshot sa loob ng listahan ng koponan.
Ang wrapper ay nagiging mas tiyak at sinasabi sa atin na ito ay bumabalot sa headshot.
Ang pagbabasa ng pangalan ng klase na team-list_headshot-wrapper ay malinaw at lohikal, kahit na hindi nauunawaan ng gumagamit ang CSS sa likod nito. Mauunawaan ng gumagamit na ang pagbabago sa klase na ito ay gagawa ng [pagbabago] sa mga headshot ng listahan ng koponan. Iyan ay mahusay na pahiwatig para sa susunod na taong papasok sa proyekto.
Ngayon isipin ang pagdaragdag ng higit pang mga elemento sa loob ng ating wrapper ng headshot. Maaari tayong manatiling napaka-organisado sa isang pangkalahatang-paespesipikong kombensiyon sa pagpapangalan.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Ang ating listahan ng mga klase para sa listahan ng koponan ay napaka-organisado at lohikal sa loob ng aming proyekto. Ang kombensyon ng pagpapangalan na ito ay napakahusay na pinagsama sa ating tampok na Folder.