Стратегия за класове 1

Видове класове

Служебен клас

Служебните класове са класове, създадени с определена комбинация от CSS свойства, които могат да бъдат прилагани за елементите глобално из целия проект.

Всички служебни класове по природата си са глобални класове. Концепцията за служебен клас е, че това е клас, който помага за прилагането на глобални CSS свойства в целия проект.

Например добавихме служебен клас background-color-gray в стартовия проект на Client-First, за да помогне да се организират и управляват често използваните цветове на фоновете в проекта.

Добавихме служебен клас font-size-large в стартовия проект на Client-First, за да помогне да организираме и управляваме унифицираните размери на типографията в проекта.

Служебните класове не използват долна черта в името си.

Персонализиран клас

Персонализираните класове са класове, създадени за определен компонент, страница, група от елементи или отделен елемент.

Наричаме го "персонализиран", защото настройките му са уникални и ги няма в служебните класове на проекта ни. Персонализираните класове трябва да се създават, когато трябва да се стилизира конкретен елемент. Персонализираният клас е специален за конкретен елемент.

Например клас за стилизиране на определен елемент в глобалните заглавия на проекта header_background-layer.

Например клас за стилизиране на определен елемент в слайдера с отзиви testimonial-slider_headshot.

В Client-First персонализираните класове използват долна черта в името си.

Глобален клас

Глобалните класове са класове, предназначени за използване в целия проект. И служебните, и персонализираните класове могат да бъдат глобални.

Глобалният клас прилага стилове, които остават унифицирани из целия проект. Глобалният клас не се използва за някакъв определен елемент.

"Глобален" означава навсякъде, във всяко място на проекта.

Всички служебни класове са глобални. Служебните класове са глобални по природата си.

Например нашите класове за външни и вътрешни отстояния са глобални служебни класове. margin-large има стойност за отстояние 3rem. Когато обновим стойността на 4rem, всеки елемент, който използва margin-large, ще се обнови до 4rem.

margin-large е глобален модификатор, който променя стойността на отстоянията в целия проект. Ние можем по-лесно да правим значителни, глобални промени в нашия проект, когато използваме правилно глобалните служебни класове.

Глобалните класове не се ограничават само от служебни класове. Глобалните класове вече са по-ясно определени като всякакъв тип клас, който е предназначен да управлява глобално стиловете на целия сайт.

В Client-First v2, ние по-добре обясняваме и насърчаваме използването на персонализирани класове като глобални класове.

Например faq_item cможе да бъде глобален персонализиран клас. Имаме много FAQ секции на уеб сайта и faq_item се използва за управление на FAQ елементите из целия проект.

Например header_content може да бъде глобален персонализиран клас. Имаме компонент заглавие на всяка страница на проекта. Този клас управлява глобалната настройка на този контейнер из целия проект.

Комбиниран клас

Комбинираните класове са класове, които са вариации на базовите класове. Комбинираните класове още се наричат Мултикласове. Комбинираният клас наследява стиловете от базовия клас и добавя към тях някои допълнителни стилове. 

Ние определяме "базовия клас" като първия клас в списъка от натрупаните класове, от които се състои комбинирания клас. Ние добавяме нов клас отгоре на базовия, за да създадем уникална промяна.

Добавеният клас, който създава уникалната промяна на базовия клас, използва представката на класа is-.

Добавените комбинирани класове ще работят само в комбинация с базовите класове преди него. От видеото по-надолу ще разберете, че класът is-blue не работи самостоятелно. Той работи само като добавка към базовия клас button.

Комбинирани класове могат да бъдат създадени от персонализиран или служебен базов клас. В примера button is-blue отгоре се вижда комбиниран клас, който се използва като служебен клас.
‍

Също така може да се създаде комбиниран клас за персонализиран клас. Например header_content is-home. Това е вариант на персонализирания header_content.

Представка -is

Определяме комбиниран клас в Client-First с представката is-. Когато виждаме is- знаем, че този клас е създаден като комбиниран клас отгоре на базовия клас.

Не създавайте излишно натрупване на класове

Client-First има универсално правило - не създавайте излишно натрупване на класове.

Deep stack — Излишно натрупана структура — много класове “натрупани” един върху друг.

Deep stacking — Излишно натрупване — действието, при което натрупваме много класове един върху друг.

Тези термини се използват от Client-First за означаване на проблем, с който можем да се сблъскаме при използване на комбинирани класове в Webflow Designer.

Client-First не препоръчва да се използва натрупването на класове в Webflow.

Например:

В Client-First препоръчваме да избягвате натрупването на класове както е показано тук. Ние ще напомняме за необходимостта да се избягва този проблем по време на цялата документация.

Ето кратък списък с причини:

Причини, поради които не създаваме прекалено сложни комбинирани класове

Неудобство на променяне на реда на стилове във Webflow Designer

Ние нямаме удобен контрол над комбинираните класове в Webflow. Не можем да ги пренареждаме или да ги управляваме правилно вътре в Designer. Например ако се наложи да променим или премахнем нещо от списъка с натрупаните класове, трябва да премахнем всички класове от него преди да получим достъп до по-ранните класове.

В примера по-надолу може да се види, че ни е нужно да изтрием някои класове, ако искаме да променим теглото на шрифта от text-weight-medium на text-weight-bold:

Този проблем става още по-сериозен, когато правим промени на мобилните резолюции. Ние имаме още по-малко контрол при редактиране, когато редактираме стиловете на мобилните резолюции.

Забавяне на работния процес

Ние трябва да направим много действия дори за малки промени. Горепосоченият работен процес отнема много време. Ако това е постоянна практика при работата ни, това ще увеличи времето за разработката.

Усложнение на обучението

Ние смятаме, че използването на сложни натрупани класове води до по-труден процес на обучение, защото се изисква по-задълбочено разбиране на това какво правят класовете и как да ги управляваме.

Бързото създаване на CSS във Webflow

Създаването на CSS е бързо и ефективно чрез панела за стилове на Webflow. Можем да създадем нов клас и визуално да му добавим трябващите ни CSS свойства. Този процес е много бърз във Webflow и ние го използваме в Client-First.

Пестенето на размера на CSS не е твърде важно

Когато използваме глобални класове в проекта, можем да намалим размера на нашия CSS файл. Обаче ние не смятаме, че тези малки спестявания на размера на CSS надхвърлят предимствата от създаването на персонализираните класове във Webflow.

По-подробно ще се спрем на проблема с прекаленото натрупване на класове по-късно. Пълното обяснение на всеки от тези пунктове е в Стратегия за класове 2.

Използване на персонализирани класове

Персонализираните класове са мощен и препоръчителен инструмент при използване на Client-First.

Използваме персонализирани класове за тези цели:

1. Лесни редакции на конкретни елементи. Ако използваме организирана система от персонализирани класове, можем бързо да правим уникални промени в конкретните елементи и компоненти от нашия проект.
2. За да избегнем използването на служебни класове навсякъде в нашия проект. Системите на служебните класове са мощни, но не трябва да се използват за изграждане на целия проект. Когато използването на служебен клас усложнява работата на Webflow разработчика, насърчаваме създаването на персонализиран клас. Когато използваме служебен клас трябва ясно да разбираме какви ще са преимуществата.
3. За да избегнем излишното натрупване на класове. Натрупването може да бъде заменено с персонализиран клас.

Пример за използване на текстура на фона

Например искаме да стилизираме текстурата на фона на елемент.

Ние можем да стилизираме текстурата на фона с три натрупани класа. Например background-absolute + fit-size + opacity-low. Когато се комбинират, тези три класа ни дават нужната комбинация от стилове.

Вместо да натрупваме няколко класове за текстурата на фона, можем да създадем персонализиран клас, наречен services-item_background-texture. Класът ясно показва, че този клас е за "текстура, която е върху фоновото изображение на елемент на услугите".

Сега можем бързо и свободно да правим промени в този персонализиран клас, вместо да пренареждаме натрупаните класове. Ако се нуждаем от уникално стилизиране, вече имаме готов персонализиран клас, с помощта на който да го направим.

Традиционна разработка на CSS

При традиционната разработка на CSS, решението с натрупани класове може да не бъде лошо. Натрупаните класове ще изискват по-малко CSS код, който да се пише на ръка, което ще доведе до по-бързо разработване.

Въпреки това, това не е традиционната разработка на CSS. Това е Webflow. Client-First е колекция от принципи, създадени специално за Webflow.

При разработка на Webflow смятаме, че отнема по-малко време и усилия да създадем и управляваме стиловете на персонализиран клас на елемент, отколкото да управляваме дълъг списък с натрупани класове. Създаването на персонализирани класове ни позволява по-лесно и по-бързо да правим промени в стиловете на елементите, което прави работния процес по-ефективен.

Подробното обяснение за създаване на персонализирани класове има по-надолу в Стратегия за класове 2.

Споразумение за именуване на класове

Създавайте ясни и конкретни имена за класовете.

Разработчик на Webflow, клиент или всеки друг човек трябва да могат да разберат какво прави класът от името му, дори ако никога не са чували за Client-First.

Подход за именуване на класове

Цели на споразумението за именуване в Client-First

• Да се предостави възможност сайтът да бъде обслужван от неспециалисти.
• Да се използват ясни, информативни и описателни имена на класове.
• Да се предостави на читателя възможно най-много контекст за целта на този клас.
• Да може да се определи предназначението на класа от името му.
• Да се избегват съкращения, кратки форми и обърквания.
• Да се предостави колкото се може повече контекст за връзката на този клас с уебсайта.
• Да се създават имена на класове с помощта на методики за по-добра структурираност и четимост.
• Да се използват ключови думи за търсене на достъпни класове в панела на стиловете.
• Да се визуализира каква е целта на класа от името му.

Въпроси, които ние си задаваме при именуване на класове

Имената на класовете трябва да показват какво те правят. Когато създаваме име за клас може да се замислим над въпросите:

• "Какво прави този клас в проекта?"
• "Каква е целта на този клас в проекта?"
• "Как мога да предоставя най-много контекст за какво е отговорен този клас в проекта?"

Името на класа трябва да отговаря на тези въпроси.

Разработчик на Webflow, клиент или маркетолог трябва да имат възможност да разберат какво прави класът на от името му, дори ако никога не са чували за Client-First.

Осмислени имена и ключови думи

Правилната ключова дума ни дава контекст за това какво прави този клас/елемент. По-точните наименования ни позволяват да останем организирани.

Ключовите думи и ясното именуване са основните важни концепции на Client-First. Всяко име на клас трябва да има значима цел. Трябва да предоставим на следващия човек, който влиза в проекта, възможно най-много контекст за целта на дадения клас.

Ключовите думи в името на класа преминават от общи към специфични

Нека разгледаме примера text-size-large.

Основната ключова дума в това име е text. Тя ни подсказва, че този клас има отношение към текстов елемент.

size ни казва, че работим с настройка на размера на текста. Думата "size" е по-специфична, тъй като се отнася към конкретно свойство на CSS на текста — ^font-size.

Накрая имаме large, което ни дава по-специфична информация за стойността на размера на текста. В нашия случай това е голям размер на текста.

Забележете, че не наричаме този клас large-size-text. Въпреки че това може да бъде също толкова ясно като text-size-large, имаме значителни предимства в Client-First, когато следваме споразумението за именуване на класове. По този начин гарантираме по-лесно търсене на класове и по-разбираема организация на папките. Ще научим повече по-късно в тази документация.

Нека разгледаме пример с персонализирания клас, team-list_headshot-wrapper.

Името на папката team-list_, ни подсказва, че този елемент има нещо общо със страницата или секцията на екипа и е списък. "Team list" е името на групата, която съдържа специфичните елементи.

headshot става по-конкретен и ни казва, че класът има нещо общо с елемента за портретна снимка на лице в в списъка с екипи.

wrapper става още по-конкретен и ни показва, че това е контейнер за портретната снимка.

Четене на име на класа team-list_headshot-wrapper е ясно и логично, дори ако потребителят не разбира CSS, който стои зад него. Човекът ще разбере, че редактирането на този клас ще направи нещо на портретните снимки на лицата в списъка на екипа. Това е прекрасна подсказка за следващия човек, който ще влезе в проекта.

Сега си представете, че добавяме повече елементи в контейнера headshot. Можем да оставаме много организирани с помощта на споразумението за именуване на класове от общи към специфични.

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

Такъв списък от класове за екипния списък е много структуриран и логичен в нашия проект. Тази споразумение за именуване много добре си пасва със нашата Системата на папки.

‍