Typy klas
Klasa użytkowa
Klasa utworzona z określoną kombinacją właściwości CSS, która może być stosowana do elementów globalnie w całym projekcie.
Wszystkie klasy użytkowe są z natury klasami globalnymi. Koncepcja klasy użytkowej to klasa, która pomaga zastosować globalne właściwości CSS wewnątrz projektu.
Na przykład, dodaliśmy klasę użytkową background-color-gray w projekcie startowym Client-FIrst, aby pomóc nam zorganizować i zarządzać powszechnie używanymi kolorami tła w całym projekcie.
Dodaliśmy klasę użytkową font-size-large w projekcie startowym Client-First, aby pomóc nam zorganizować i zarządzać spójnymi wielkościami typografii w całym projekcie.
Klasy użytkowe nie zawierają znaku podkreślenia w swojej nazwie.
Klasa niestandardowa
Klasa niestandardowa jest tworzona dla konkretnego komponentu, strony, grupy elementów lub pojedynczego elementu.
Nazywamy to klasą "niestandardową", ponieważ jest ona niestandardowa poza klasami użytkowymi naszego projektu. Klasy niestandardowe powinny być tworzone, gdy klasy użytkowe nie mogą lub nie powinny być używane dla danego elementu. Klasa ta jest niestandardowa dla danego elementu.
Na przykład klasa do stylizacji określonego elementu w globalnych headerach projektu, header_background-layer.
Na przykład klasa do stylizacji konkretnego elementu testimonial slide, testimonial-slider_headshot.
W Client-First klasy niestandardowe zawierają znak podkreślenia w swojej nazwie.
Klasa globalna
Klasyfikacja klasy. Klasa globalna jest przeznaczona do globalnego użycia w całym projekcie. Zarówno klasy użytkowe jak i klasy własne mogą być klasami globalnymi.
Klasa globalna stosuje style, które pozostaną ujednolicone w całym projekcie. Klasa globalna nie jest przeznaczona dla konkretnej instancji.
"Globalnie" oznacza wszędzie i w dowolnym miejscu projektu.
Wszystkie klasy użytkowe są klasami globalnymi. Klasy użytkowe są z natury klasami globalnymi.
Na przykład nasze klasy margin i padding są globalnymi klasami użytkowymi. margin-large ma wielkość marginesu 3rem. Kiedy zaktualizujemy tę wartość do 4rem, każda instancja, która używa margin-large, zaktualizuje się do 4rem.
margin-large jest globalnym kontrolerem, który zmienia wartość naszego marginesu w całym projekcie. Możemy dokonać wpływowych, globalnych zmian w naszym projekcie, gdy prawidłowo używamy globalnych klas użytkowych.
Klasy globalne nie są ograniczone do klas użytkowych. Klasy globalne są teraz wyraźniej zdefiniowane jako każdy typ klasy, który zamierza mieć pełne globalne zarządzanie stylami.
W Client-First v2, lepiej wyjaśniamy i zachęcamy do używania klas niestandardowych jako klas globalnych.
Na przykład, faq_item może być globalną klasą niestandardową. Mamy wiele sekcji FAQ w projekcie, a faq_item służy do zarządzania FAQ items na różnych podstronach w całym projekcie.
Na przykład header_content może być globalną klasą niestandardową. Mamy komponent header na każdej podstronie projektu. Ta klasa zarządza dostosowaniem content wrappera globalnie w całym projekcie.
Combo klasa
Combo klasa jest wariantem dodanym do klasy bazowej. Combo klasa dziedziczy style z klasy bazowej i dodaje do niej kolejne style.
Definiujemy "klasę bazową" jako pierwszą klasę na naszej liście combo klas. Dodajemy do niej klasę aby stworzyć unikalny wariant.
Klasa dodana jako combo klasa, która daje unikalną odmianę, używa prefiksu is-.
Klasa dodana jako combo klasa będzie działać tylko w połączeniu z klasą (klasami) bazową będącą przed nią. W poniższym filmie zauważ, że is-blue nie działa samodzielnie. Działa tylko jako dodatek do klasy bazowej button.
Klasy combo mogą być tworzone z niestandardowej lub użytkowej klasy bazowej. Przykład powyżej button is-blue pokazuje klasę użytkową jako klasę combo.
Możemy również stworzyć combo klasę dla klasy niestandardowej. Na przykład, header_content is-home. Jest to wariant klasy niestandardowej header_content.
prefiks -is
Definiujemy combo klasę w Client-First za pomocą prefiksu is-. Widząc is- wiemy, że ta klasa jest tworzona jako combo klasa dodana do klasy bazowej.
Unikaj głębokiego zagnieżdżania klas
Client-First ma uniwersalną zasadę - unikaj głębokiego zagnieżdżenia.
Głębokie zagnieżdżenie - wiele klas zagnieżdżonych jedna na drugiej
Głębokie zagnieżdżanie - czynność dodawania wielu klas do elementu
Jest to termin stworzony przez Client-First, aby rozwiązać problemy, które napotykamy z zagnieżdżonymi klasami w Webflow Designerze.
Client-First nie zaleca strategii głębokiego zagnieżdżania w Webflow.
For example:
W Client-First chcemy uniknąć głębokiego zagnieżdżania klas, jak to ma miejsce w przykładzie powyżej. Będziemy czytać o tym w wielu miejscach w dokumentacji.
Oto krótka lista powodów:
Czemu nie zagnieżdżamy?
Nie możemy zmienić kolejności klas w panelu styli
W Webflow nie mamy swobodnej kontroli nad zagnieżdżonymi klasami. Nie jesteśmy w stanie zmienić ich kolejności lub odpowiednio zarządzać nimi wewnątrz Designera. Jeśli potrzebujemy zmienić lub usunąć klasy na liście zagnieżdżonych klas, musimy usunąć wszystkie klasy z listy przed uzyskaniem dostępu do wcześniejszych klas.
W poniższym przypadku widać, że musimy usunąć niektóre klasy, jeśli chcemy zmienić grubość tekstu z text-weight-medium na text-weight-bold
Ten problem staje się ekstremalny, gdy dokonujemy edycji na niższych breakpointach. Mamy jeszcze mniejszą kontrolę nad edycją, gdy edytujemy inne breakpointy niż bazowy.
Wolniejsze tempo pracy. Wymaga wielu kroków dla małych zmian
Powyższy sposób pracy jest czasochłonny. Jeśli jest to stała praktyka w projekcie, sprawi, że nasz czas budowy i zarządzania projektem będzie dłuższy.
Wyższy poziom trudności
Uważamy, że zagnieżdżanie klas stwarza wysoki poziom trudności. Ciężej jest zrozumieć co robią klasy i jak nimi zarządzać.
Tworzenie CSS w Webflow jest szybkie
Tworzenie CSS jest szybkie i efektywne dzięki panelowi stylów w Webflow. Możemy stworzyć nową klasę i wizualnie dodać do niej właściwości CSS. Ten proces jest w Webflow bardzo szybki , a my wykorzystujemy go w Client-First.
Oszczędność rozmiaru pliku CSS nie jest znacząca
Kiedy używamy klas globalnych w projekcie, możemy zmniejszyć rozmiar naszego pliku CSS. Nie sądzimy, aby te niewielkie oszczędności CSS przeważyły nad korzyściami płynącymi z tworzenia klas niestandardowych wewnątrz Webflow.
Więcej o zagnieżdżaniu klas dowiesz się później:
Wyjaśnienie każdego z tych punktów znajduje się w Strategii klas 2
Używaj klas niestandardowych
Klasy niestandardowe są potężną i zalecaną metodą wewnątrz Client-First.
Używamy klas niestandardowych dla poniższych celów:
- Łatwe edycje dla konkretnych elementów. Jeśli używamy spójnego systemu klas niestandardowych, możemy dokonywać szybkich unikalnych zmian w konkretnych elementach i komponentach w naszym projekcie.
- Aby uniknąć używania klas użytkowych wszędzie w naszym projekcie. Systemy klas użytkowych są potężne, ale nie powinny być używane do budowania całego projektu. Gdy użycie klasy użytkowej komplikuje naszą pracę jako programistów Webflow, zachęcamy do stworzenia klasy niestandardowej. Powinna istnieć wyraźna korzyść z użycia klasy użytkowej.
- Aby uniknąć głębokiego zagnieżdżania klas. Głębokie zagnieżdżanie może być zastąpione klasą niestandardową.
Przykład z teksturą tła
Na przykład, chcemy stylizować teksturę tła dla komponentu.
Możemy stylizować naszą teksturę tła za pomocą trzech zagnieżdżonych klas. Na przykład, background-absolute + fit-size + opacity-low. Po połączeniu, te trzy klasy dają nam kombinację stylów, której potrzebujemy.
Zamiast zagnieżdżać wiele klas dla tej tekstury tła, możemy stworzyć niestandardową klasę o nazwie services-item_background-texture. Klasa wyraźnie określa, że ta klasa jest dla "tekstury, która jest na background image dla elementu services-item.”
Możemy teraz szybko i bardziej swobodnie dokonywać edycji tej klasy niestandardowej zamiast reorganizować zagnieżdżone klasy. Jeśli potrzebujemy unikalnej stylizacji, mamy klasę niestandardową gotową do przyjęcia tej unikalnej stylizacji.
Tradycyjne tworzenie CSS
W tradycyjnym tworzeniu CSS, zagnieżdżanie klas może być lepszym rozwiązaniem. Klasy zagnieżdżone będą wymagały mniej CSS do napisania ręcznie, co przyspieszy pracę.
Nie jest to jednak tradycyjne tworzenie CSS. To jest Webflow. Client-First to zbiór zasad stworzonych specjalnie dla Webflow.
W Webflow uważamy, że tworzenie i zarządzanie stylami niestandardowej klasy na elemencie zajmuje mniej czasu i wysiłku niż zarządzanie listą głęboko zagnieżdżonych klas.
Pełne wyjaśnienie tworzenia klas niestandardowych znajduje się w Strategii klas 2
Nazewnictwo
Twórz jasne i konkretne nazwy dla klas.
Programista Webflow, klient lub ktokolwiek powinien zrozumieć, co robi klasa na podstawie nazwy klasy, nawet jeśli nigdy wcześniej nie słyszał o Client-First.
Podejście do nazewnictwa
Cele nazewnictwa w Client-First:
- Umożliwić osobie nietechnicznej zarządzanie naszą stroną internetową.
- Być jasnym, informacyjnym i opisowym w sposobie nazywania klas.
- Dać czytelnikowi jak najwięcej kontekstu co do celu danej klasy.
- Znać cel danej klasy po jej przeczytaniu.
- Żadnych skrótów, żadnego zamieszania.
- Dać jak najwięcej kontekstu co do relacji tej klasy z resztą strony internetowej.
- Tworzenie nazw klas na podstawie zorganizowanego systemu.
- Możliwość wyszukiwania dostępnych klas w panelu stylów przy użyciu słów kluczowych.
- Wizualizacja celu klasy na podstawie jej nazwy
Pytania, które powinniśmy sobie zadać przy nazywaniu klas
Nazwy klas powinny mówić, co te klasy robią. Tworząc nazwę dla klasy, możemy pomyśleć o tych pytaniach:
- Za co ta klasa odpowiada w projekcie?
- Jaki jest cel tej klasy w projekcie?
- Jak mogę dać najwięcej kontekstu do tego, za co ta klasa jest odpowiedzialna w projekcie?
Nazwa klasy powinna być odpowiedzią na te pytania.
Programista Webflow, klient lub marketer powinni być w stanie zrozumieć, co robi klasa na podstawie jej nazwy, nawet jeśli nigdy wcześniej nie słyszeli o Client-First.
Istotne nazwy i słowa kluczowe
Silne słowo kluczowe daje nam kontekst do tego, co dana klasa/element robi. Bycie tak opisowym jak to tylko możliwe w naszym nazewnictwie pomoże nam pozostać zorganizowanym.
Słowa kluczowe i przejrzyste nazewnictwo są głównymi koncepcjami Client-First. Każda nazwa klasy powinna służyć określonemu celowi. Powinniśmy dać następnej osobie, która wchodzi do projektu, tyle kontekstu ile to możliwe do celu danej klasy.
Słowa kluczowe przechodzą od ogólnych do szczegółowych w obrębie nazwy klasy
Spójrzmy na text-size-large jako przykład.
Najbardziej ogólnym słowem kluczowym w nazwie tej klasy jest text. Słowo to mówi nam, że klasa ta ma do czynienia z elementem tekstowym.
size mówi nam, że pracujemy nad dostosowaniem rozmiaru tekstu. Słowo "size" jest bardziej szczegółowe, ponieważ odnosi się do konkretnej właściwości CSS tekstu — font-size.
Na koniec mamy large, który daje nam bardziej konkretną informację o wartości rozmiaru tekstu. Jest to duży rozmiar tekstu.
Zauważ, że nie nazywamy tej klasy large-size-text. Chociaż może to być równie jasne jak text-size-large, mamy znaczące korzyści w Client-First, gdy podążamy za konwencją nazewnictwa klas od ogólnych do specyficznych. Umożliwiamy bardziej inteligentne wyszukiwanie klas i czystą organizację Folderów. Dowiemy się więcej na ten temat w całym dokumencie.
Przyjrzyjmy się przykładowi z wykorzystaniem klasy niestandardowej, team-list_headshot-wrapper.
Nazwa folderu to team-list_, co mówi nam, że ten element ma coś wspólnego z podstroną team lub sekcją team oraz jest listą. "Team list" to nazwa grupy zawierającej konkretne elementy.
headshot staje się bardziej szczegółowy i mówi nam, że ma to coś wspólnego z elementem headshot w ramach team-list.
wrapper staje się jeszcze bardziej szczegółowy i mówi nam, że to jest element zawierający headshot.
Czytanie nazwy klasy team-list_headshot-wrapper jest jasne i logiczne, nawet jeśli użytkownik nie rozumie stojącego za nią CSS. Użytkownik zrozumiałby, że edycja tej klasy zrobi [coś] z headshotami team list. To doskonała podpowiedź dla następnej osoby, która wchodzi do projektu.
Teraz wyobraź sobie, że dodajemy kolejne elementy wewnątrz naszego headshot wrappera. Możemy pozostać bardzo zorganizowani dzięki konwencji nazewnictwa od ogólnego do szczegółowego.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Nasza lista klas dla listy zespołu jest bardzo zorganizowana i logiczna wewnątrz naszego projektu. Ta konwencja nazewnictwa bardzo dobrze integruje się z Folderami.