.jpg)
Въведение
Стратегия за работа с отстояния
Тази страница обяснява как да прилагате всичките методи за отстояния, препоръчвани от системата на Client-First.
Стратегията за отстоянията на Client-First трябва да подобри последователността на нашия проект. Ние искаме да създаваме по-малко хаос. Нашата работа ще стане по-лесна, а качеството на проекта ще се подобри, ако използваме стратегиите за работа с отстояния на Client-First разумно.
Ние разделихме тази страница с документация в две части:
- Част 1: Служебни класове
- Част 2: Персонализирани класове
Промени във версията V2 спрямо V1
Стратегиите за отстоянията V1 и V2 следват една идеология. V2 предлага повече стратегии за работа с отстояния като се вземат предвид различните вариации за използването им.
Обновената версия V2 е съвместима с предишната версия V1. Всички стратегии за работа с отстояния, използвани в V1, се използват също така и във V2.
Отстояния V1
Предложихме 2 стратегии за създаване на пространство между елементите:
- Контейнери за създаване на отстояния
- Персонализирани класове
Отстояния V2
Ние предлагаме 2 подхода с няколко стратегии за създаване на пространства между елементите:
- Служебни класове
- Персонализирани класове
Защо системата ни за отстояния беше обновена?
- Системата за отстояния на Client-First стана по-удобна след въвеждане на новите методи.
- "Контейнери за създаване на отстояния" не винаги са удобни за употреба. Добавянето на допълнителна стратегия ни дава повече гъвкавост при използване на глобалната служебна система.
- Разработчиците в Finsweet експериментираха с уникални и алтернативни методи за създаване на отстояния базирани на V1. В резултат на експериментите ние можахме да подобрим работния процес и да направим процеса на приемане на решения за организиране на отстоянията в проекта по-лек.
- Наличието на няколко метода за създаване на отстояния в рамките на едни и същи принципи на системата за отстояния може да ни помогне да взимаме по-добри решения за работния процес.
Част 1: Служебни класове
Част 1 обяснява принципите на работа с отстоянията при използване на глобалните служебни класове в системата Client-first. Това са класовете margin- и padding- които се намират в служебните класове на Client-First.
[margin/padding direction class] + [margin/padding size class]
В контекста на работа със служебни класове, представяме 2 стратегии за отстояния:
- Стратегия на блок за създаване на отстояние
- Стратегия на контейнер за създаване на отстояние
И блоковете, и контейнерите са базирани на едни и същи служебни класове за отстояния.
Блоковете и контейнерите се различават един от друг според това как са приложени към страницата.
Стратегия на блока за създаване на отстояние
В Client-First, "блок за създаване на отстояние" е празен Div блок, който създава пространство между два съседни елемента.
1. Добавете на страницата си "блок за създаване на отстояние" — Div блок блок с два класа [padding-bottom] + [padding-size]
2. Добавете елементи на съдържанието към страницата между които трябва да се създаде отстояние.
3. Блокът за създаване на отстояние създава пространство (вътрешно отстояние - padding) между елементите.
Добавяме Div блок към страницата и прилагаме класа padding-bottom (посока), а след това добавяме нашия клас padding-medium cкъм него. Заедно, двата класа прилагат padding-bottom: 2rem към елемента.
Този Div блок създава "блок" от пространство между двата съседни елемента. Можем да продължим да добавяме Div блокове на страницата, за да създаваме пространство между елементите.
Винаги използваме padding-bottom padding-[size] за блокове за създаване на отстояние.
Използването на вътрешно отстояние за блоковете за създаване на отстояние ще покаже точния размер на елемента в Designer. Получаваме визуално представяне на желания размер на блока за отстояние в работния прозорец на Designer. Няма да има празно или свито пространство при използване на вътрешните отстояния.
Използването на външно отстояние (margin) за блокове за създаване на отстояние ще остави Div блока визуално 'празен' и размерът на блока няма да се да покаже правилно.
Можем да използваме padding-top или padding-bottom за блокове за създаване на отстояние. Обаче ние решихме да дефинираме padding-bottom като основен начин да създадем блокове за отстояния в Client-First.
Стратегия на контейнера за създаване на отстояние
В Client-First, "контейнер за създаване на отстояние" е Div блок, който обвива дъщерния елемент и създава пространство между него и съседен елемент.
1. Добавете към страницата Div Block "контейнер за създаване на отстояние" с два класа —
[margin/padding-direction] + [margin/padding-size]
2. Вложете елемент със съдържанието вътре в контейнера за създаване на отстояние.
3. Контейнерът за създаване на отстояние създава пространство (външно или вътрешно отстояние) между себе си и съседен елемент.
Добавяме Div блок към страницата и прилагаме класа margin-bottom (посока), а след това добавяме нашия клас margin-medium (размер) допълнително. Заедно, двете класа прилагат margin-bottom: 2rem към елемента.
Ние влагаме елемент в “контейнера за създаване на отстояния”, за да създадем пространство между вложения елемент и нещо друго.
Начин: Общи принципи за създаване на отстояния
1. Използване на глобални стойности за отстояния по подразбиране
Предимство: Поддържаме единни консистентни стойности за отстояния в целия проект.
Ние искаме да унифицираме отстоянията на нашия уебсайт във всички секции и страници. Ако използваме стойности за отстояния 4rem, 8rem, 12rem в проекта, искаме тези стойности да са съгласувани навсякъде.
Колкото повече използваме системата за служебните класове на отстояния на Client-First, толкова по-съгласувани ще бъдат нашите отстояния в целия проект.
Предимство: Имаме стойности на отстояния по подразбиране и автоматични актуализации на отстоянията на таблет и мобилни резолюции.
С помощта на блокове или контейнери за създаване на отстояния автоматично прилагаме унифицирани корекции на отстоянията в сайта през всички резолюции.
Ако приложим блокове и контейнери за създаване на отстояние към 100 елемента из целия проект, това ще означава, че ще трябва да променим на 99 стила по-малко за мобилните резолюции.
За всяка резолюция елементите с блокове и контейнери ще получат стойностите си за отстояние по подразбиране, които използваме в целия проект.
Предимство: Можем да правим по-бързо глобални промени на отстоянията в сайта през целия проект.
Можем да променим много стойности за отстояние през целия проект с промяна на само една стойност на CSS свойство. Промяната влияе върху всеки елемент, който използва контейнер или блок за създаване на отстояние. Например, ако клиент каже: "Искам по-малко отстояние между всички блокове на съдържанието", тази промяна може да бъде направена сравнително бързо, като се коригират глобалните стойности за служебните класове за отстояния.
2. Предимства за работния процес и мащабирането
Предимство: Ако използваме стратегията с блока за създаване на отстояние, можем да намалим броя на персонализираните класове, използвани за CSS свойства на отстояния и вътрешни отстояния.
Искаме да намалим броя на персонализираните класове, създадени специално за отстояния. Блоковете и контейнерите за създаване на отстояние могат да ни помогнат да създаваме по-малко класове за нашия проект.
Можем да разчитаме на вече създадените служебни класове за отстояние. Колкото повече използваме системата на служебните отстояния, толкова по-малко ще разчитаме на създаване на персонализирани класове за отстояние.
Предимство: Избягваме излишното натрупване на класове върху елемент.
Client-First е против излишното натрупване в проекти на Webflow. Искаме да избягваме излишното натрупване във всички случаи. Контейнерите и блоковете за създаване на отстояние ни помагат да избегнем излишното натрупване на класове върху нашите елементи. Научете повече за излишното натрупване в Стратегията за класове 2.
Предимство: Ако се използват правилно, контейнерите за създаване на отстояния могат да ни помогнат да работим по-бързо.
Блоковете и контейнерите за създаване на отстояние в Client-First съществуват, за да ни помогнат да работим по-бързо и да поддържаме нашия проект по-лесно.
Ако използваме контейнери (блокове) за отстояния, но това води до по-бавен работен процес или затруднения при управление на проекта, възможно не ги използваме правилно.
Не е задължително и дори не е препоръчително да използваме блокове и контейнери за създаване на отстояние навсякъде.
Прилагането на CSS свойства margin и padding директно към персонализирани класове е приемливо. Има случаи, при които е по-ефективно е да приложим отстояние на персонализиран клас. Ние обсъждаме използването на персонализирани класове във втората част на тази статия.
3. Отстояния за типография и бутони
В този пример имаме H3, Paragraph, и Button. Можем да създадем отстояние за тези елементи без да създаваме нов клас.
Използваме блокове за създаване на отстояние между всички текстови елементи, което ни помага да избегнем създаването на персонализирани класове.
Нашата Стратегия за типография насърчава използването на малко или изобщо никакви персонализирани класове върху нашите елементи от типографията. Искаме да избегнем създаването на нови персонализирани класове специално за управляване на отстоянията на елементите от типографията.
Вместо това можем да комбинираме нашата глобална стратегия за типография с нашата глобална стратегия за отстояния, за да създадем оформление на текстово съдържание без персонализирани класове.
Предимство: Избягваме излишното натрупване на служебни класове върху текстови елементи.
В Client-First, искаме да поддържаме нашите заглавия и абзаци свободни от не типографски класове.
Идеално е да няма приложени класове към нашите типографски елементи. Използването на стандартните стилове за тагове е най-добрия вариант. Ако типографията се отличава от тази по подразбиране, можем да поставим text- или heading- класове върху нея.
Искаме да избегнем прилагането на класове margin- или padding- директно към текстовите елементи. Така е, защото ние можем да се сблъскаме с проблема с излишното натрупване на класове ако използваме класове за типография и отстояния за текстовите елементи.
Блоковете и контейнерите за създаване на отстояние ни помагат да избегнем излишно натрупване.
Ние не искаме да правим така:
Блокът за създаване на отстояние намалява количеството класове за отстояния върху текстовия елемент.
С класовете за отстояние, отделени от класовете за типография, можем да управляваме всеки от тях отделно без проблема със излишното натрупване.
4. Отстояния за повторно използвани елементи (Symbols) и компоненти
Предимство: За повторно използваните елементи и компоненти ние можем да създадем специфични за конкретните елементи отстояния.
Когато искаме да приложим отстояния към повторно използваните елементи, същите отстояния ще бъдат приложени към всички копии на елемента.
Еднаквите отстояния на повторно използващите се елементи могат да бъдат проблем, ако копиите изискват различни стойности за отстояния.
Използвайки блокове или контейнери за създаване на отстояние, можем да имаме различно отстояние за различни копии на елементите.
Не е необходим комбиниран клас, не се създават нови класове, не е нужен персонализиран CSS. Нашата система за отстояния ни позволява да създаваме специфични отстояния за повторно използваните елементи като използваме основното съдържание.
Начин: блок за създаване на отстояние
1. Създаване на пространство между два елемента
Блоковете за създаване на отстояние са много полезни, когато създаваме пространство между два елемента. Те се създават бързо, имат по-малко вложени нива и разположението на елементите се вижда по-добре.
2. Виждане на дъщерните елементи в Navigator
Когато използваме блокове за създаване на отстояние, ние създаваме лесно разбираем изглед в Navigator. Можем да видим всички елементи на компонента.
Използването на прекалено много контейнери за създаване на отстояния може да "скрие" твърде много от нашите важни елементи във вложени папки. Блоковете за създаване на отстояния ще намалят вложеността вътре в Navigator.
Блоковете за създаване на отстояния по-видимо показват елементите на проекта в Navigator.
3. Уникални отстояния за горните и долните части на секции
Когато padding-top и padding-bottom на секцията трябва да са различни, и искаме да поддържаме глобалната система на служебни класове, можем да използваме блокове за създаване на отстояние.
Можем да добавим блок за създаване на отстояние с класа padding-large към горната част на секцията и блок за създаване на отстояние padding-small към долната част на секцията.
Начин: Контейнер за създаване на отстояние
1. Използване на стратегия за отстояния със CSS Grid
Използвайки Стратегията за отстояния със CSS Grid, можем бързо да създадем равни пространства между дъщерните елементи.
Можем да използваме контейнери за създаване на отстояние, за да създадем уникални отстояния за един елемент от списъка. Когато контейнерите за създаване на отстояние се използват заедно със стратегията CSS Grid, можем по-бързо и лесно да добавим персонализирани отстояния.
Например съдържанието на елемент има 1rem между всички дъщерни елементи - с изключение на последния елемент от списъка.
Можем да приложим margin-top margin-small като контейнер за създаване на отстояние за последния елемент в списъка.
Контейнерите за създаване на отстояния ни позволяват да използваме отстоянието на CSS Grid без да създаваме няколко персонализирани класове.
Част 2: Персонализирани класове
Служебните класове за разположение на Client-First не са единственият начин за създаване на отстояния на нашия сайт.
Можем да приложим свойствата на CSS margin и padding директно към персонализирания клас.
В рамките на подхода, използващ персонализирани класове, ние предлагаме 2 стратегии за създаване на отстояния:
- Персонализиран клас на елемент
- Отстояния с помощта на родителския CSS Grid
И двете стратегии използват персонализиран клас за създаване на отстояние между елементите.
Когато използваме персонализирани класове за отстояния, трябва добре да разбираме защо го правим. По-малкото количество персонализирани класове в проекта води до по-голяма консистентност в отстоянията.
Стратегия на персонализиран клас на елемента
"Персонализиран клас на елемент" прилага стойностите на margin и padding директно към елемента, на който му трябва отстоянието.
Например прилагаме faq_title на заглавие, което изисква уникално отстояние, но ние не можем да го постигнем с помощта на служебните класове. В този случай CSS свойството margin-bottom: 0.75rem се прилага директно към класа faq_title class.
Тук се използва персонализиран клас и персонализирано отстояние на самия елемент.
Тази стратегия е най-гъвкавата. Имаме пълен контрол върху конкретен елемент във всички резолюции. Обаче трябва да използваме тази възможност внимателно.
Ако прекалим с използването на тази стратегия можем да създадем твърде много персонализирани класове за отстояния. Това може да доведе до хаотична система за отстояния в проекта и ще изисква много повече ръчни промени при работа с различните на резолюции.
Стратегия на CSS Grid
Използвайки стратегията на отстоянията на CSS Grid, ние прилагаме CSS Grid към родителския контейнер, който създава отстояния между дъщерните си елементи.
Можем да създадем вертикални и хоризонтални отстояния между дъщерните елементи, използвайки CSS grid.
Вместо да създаваме много блокове, контейнери или персонализирани класове за елементи от списък, можем да използваме CSS Grid стратегията, за да управляваме всичките дъщерни елементи с помощта на един модификатор - родителския контейнер.
Начин: Персонализиран клас на елемента
1. Глобално управление на отстояния на конкретен елемент
Ключовите думи тук са - "на конкретен елемент".
Когато имаме повтарящи се елементи, които трябва да имат същата стойност за отстояние в целия проект, може да е най-добре да използваме персонализиран клас за управление на отстоянията. Персонализираният клас ни позволява да актуализираме отстоянието за този повтарящ се елемент.
Използването на глобални контейнери за създаване на отстояния за повтарящи се елементи може да забави работата и да усложни управлението на проекта.
Можем да си зададем два важни въпроса, за да разберем дали трябва да използваме служебен клас или персонализиран клас за създаване на отстояние за конкретен елемент.
Колко копии на [този елемент] има в проекта?
Ако има много копии на този конкретен елемент, той е повтарящ се елемент в проекта. Можем да управляваме всичките копии едновременно, като използваме персонализиран клас.
Например, ако има 25 копии на този елемент в проекта, можем да използваме един персонализиран клас, за да управляваме всичките 25 копии.
Как искаме да управляваме всяка копия на [този елемент]?
Ако искаме да променяме еднакво всички копии на [този повтарящ се елемент], персонализираният клас ще ни помогне ги управляваме едновременно и да правим промени на глобално ниво.
Пример за персонализиран клас на поле за въвеждане
Нека разгледаме пример за употреба на form input в нашия проект. Такива полета се използват в 4 страници от проекта ни.
Настройката по-долу показва, че всяко поле form_input е разделено с блок за създаване на отстояние. Тази стратегия се използва в целия проект.
Ако искаме да намалим отстоянието между всички form_input, ще трябва да променим всеки блок за отстояние индивидуално.
Примерът по-горе не е перфектен, тъй като тази промяна може да изисква излишни усилия за актуализиране на всеки формуляр в проекта. Трябва да променим всяко поле, за да променим изцяло стойностите на отстоянията на блоковете.
Промяна на всички полета от формата в проекта може да отнеме секунди и да изисква минимум усилия ако се направи правилно настройката.
Персонализиран клас form_input ще ни позволи да управляваме всички елементи от тип form_input едновременно.
Тази снимка показва, че към всяко form_input се прилага margin-bottom: 1rem.
Ако искаме да променим отстоянията между всички полета за въвеждане, можем да направим една промяна в класа form_input. Промяната на отстоянието ще промени стойността за всички такива полета в целия проекта.
Този пример е перфектен, ако искаме всички полета за въвеждане във формата в проекта да имат обща стойност на margin-bottom: 1rem.
Ние имаме пълен контрол върху отстоянието на този конкретен елемент. Можем да променим всеки формулярен вход на тази страница и в целия проект с една промяна на CSS свойството margin-bottom на form_input.
2. Уникални размери на отстоянията за таблет и мобилни устройства
Блоковете и контейнерите за отстояния имат мощното предимство - могат да поддържат стандартно отстояние за всички резолюции. Обаче на нас може да ни потрябва да променяме стойностите на отстоянията на различните резолюции.
Понякога може да имаме елементи, които изискват уникални отстояния за таблет, мобилни устройства или на няколко резолюции. В този случай, контейнерите и блоковете за отстояния могат да ни затруднят настройката.
Системата служебни класове на Client-First е предназначена да унифицира отстоянията за всички резолюции. Системата не позволява да се правят индивидуални промени за различните резолюции.
Можем да приложим отстоянията директно към персонализирания клас, ако ни е нужно да ги променяме при различни резолюции. Персонализираният клас ще ни позволи да контролираме отстоянията отделно за всяка резолюция.
3. Еднократно използвани отстояния
Понякога може да имаме елемент, който да изисква уникално отстояние. Той не е част от група други елементи и да няма специфични настройки за мобилни устройства. Това е елемент, на който му трябва уникално отстояние, което се използва веднъж.
Например клиент смята, че padding-small е твърде малък, а padding-medium е твърде голям. Той иска нещо по средата.
Вместо да включваме това уникално, използвано само веднъж, отстояние в системата от служебните класове, можем да създадем персонализиран клас за елемента и да продължим работата си. Например, можем да използваме класа about-testimonial-title с margin-bottom: 2.25rem за да създадем отстояние, което да се използва само веднъж.
Когато не сме сигурни, че е необходимо да допълваме системата от служебни класове за отстояния, можем да създадем еднократно използвано отстояние за този конкретен елемент.
Важно е да разберем, че колкото повече еднократни персонализирани класове за отстояния създаваме, толкова по-малко спазваме глобалната единна система. Това не трябва да бъде често използвана практика и не трябва да се използва за всеки елемент.
Начин: Отстояния с помощта на CSS Grid
1. Отстояния между дъщерни елементи в списъка
Основното приложение на CSS Grid е за създаване на отстояния между елементи в списък. Когато имаме ред от съседни елементи, между които трябва да има еднакво отстояние, прилагането на CSS Grid към родителския контейнер е ефективен начин да подредим тези елементи.
Пример на използване CSS Grid за отстояния за линкове във футъра
Нека разгледаме пример с линкове във футъра.
Имаме родителски контейнер, наречен footer_links-column в който се намират линковете във футъра. Можем да приложим display: grid с редове, за да създадем равно отстояние между всички тези линкове.
Ако искаме да променим отстоянието между всички линкове във футъра, можем да направим една промяна в класа footer_links-column. Промяната на разстоянието между редовете ще промени отстоянието между всички линкове във футъра.
Това е перфектна стратегия за списък от елементи, които изискват отстояния. Една промяна ни дава възможност да променим всички отстояния между елементите.
Пример на CSS Grid за картички със съдържание
CSS Grid работи и с дъщерните елементи на съдържанието.
Имаме "картички със съдържание", вложени в списък. Всяка картичка със съдържание има вложени в нея елементи. Можем да приложим CSS Grid директно на картичката, за да създадем отстояния между иконката, заглавието и параграфа вътре в нея.
CSS Grid се прилага към класа benefits_item, и засяга елементите вътре в него.
Можем да променяме стойностите на редовете в CSS Grid и да влияем на съдържанието на всички елементи в benefits_item с помощта на един модификатор.
Тази стратегия работи много добре, когато отстоянието между всички дъщерни елементи е еднакво. В нашия пример отстоянието между всички дъщерни елементи benefits_item e 1rem. Този вариант е перфектен за използване на CSS Grid.
За да добавим дъщерен елемент с различни стойности за отстоянията в CSS Grid, можем да използваме нашия метод на контейнера за създаване на отстояние заедно с метода на CSS Grid.
В следващия пример добавяме бутон към картата със съдържание. За този бутон искаме да имаме отстояние 3rem от текста. Но това няма да проработи със стойностите на Grid, приложени към benefits_item.
Можем да добавим служебен клас за отстояние под параграфа, в който да сложим новия бутон.
Сега служебният клас за създаване на отстояние padding-top padding-medium създава допълнително отстояние в системата от CSS Grid на benefits_item.
Контейнерите за създаване на отстояния са перфектни, когато използваме стратегията за отстояния CSS Grid и ни трябва и гъвкавост и вариативност.
Това работи добре за създаване на глобално контролирани отстояния за съдържанието.
The benefits_item може да бъде повтарящ се компонент в целия сайт.
Някои картички на benefits_item имат CTA, други нямат CTA, а някои могат да имат напълно нови елементи.
Можем да запазим единните глобални отстояния на benefits_item с помощта на модификаторите на CSS Grid, като в същото време да имаме възможността да създаваме специфични отстояния за конкретни елементи.
Съвети за използване на отстояния
padding-section-[size]
padding-section-[size] са набор от служебни класове, които ни помагат да управляваме отстоянията отгоре и отдолу на секциите глобално из целия проект.
Това е хибриден подход между персонализиран и служебн клас. Ние можем да управляваме всичките отстояния на секциите ни като един глобален служебен клас.
Към папката със служебните класове padding- трябва да добавим нова папка, наречена section-.
padding-section-small
padding-section-medium
padding-section-large
Ако вертикалното отстояние на секцията е персонализирано или уникално, ние можем да:
- Препоръка: Да използваме блокове за отстояние, за да създадем уникално отстояние отгоре и отдолу на секцията. Този метод съответства със системата на служебните класове.
- Приложим уникалното отстояние към външния слой на секцията, section_[section-identifier]
По желание добавяне на отстояния на таговете на заглавията
Може да искаме всеки таг на заглавие да има еднакви отстояния отгоре и отдолу. Ние искаме да унифицираме отстоянието в нашата система на типографията.
Например всеки H2 в проекта има margin-bottom: 2rem и всеки H3 в проекта има margin-bottom: 1.5rem.
Прилагането на отстояние към таговете на заглавията е опит да унифицираме отстоянията отгоре и отдолу на нашите тагове на заглавията. Това е начин, по който създаваме глобални правила за отстояния за нашата типография.
Отстоянието на таговете на заглавията работи добре, ако имаме контрол върху дизайна на проекта. В този случай ние можем да използваме много формализираната система от отстоянията. Това е метод за допълнително унифициране на типографията в проекта.
Ако работим по уебсайт с много вариации в заглавията и различни вариации на дизайна на заглавията, създаването на отстояния на таговете на заглавията може да не е добра стратегия.
Ако продължаваме да променяме стойностите на отстояния по подразбиране за заглавията, ние ще създадем повече работа за себе си.
Ако всички или повечето заглавия трябва да имат същите отстояния в целия проект, това може да бъде ефективна стратегия.
Имаме пълно обяснение на този метод за отстояния на типографията в Стратегия за типографията.
Flex или grid за бутони и редове с бутони
Използвайте CSS flex или grid, за да създадете прости бутони.
Пример с бутон с иконка
Създайте бутон с текст и иконка. Приложете flex или grid към елемента на бутона, за да създадете пространство между текста и иконката.
Това е бърз и лесен начин за създаване на бутон с няколко вложени елементи.
Пример за ред с бутони
Създайте хоризонтално отстояние между два бутона. Задайте хоризонталните отстояния между бутоните чрез родителския контейнер.
Използвайки flex или grid върху родителския контейнер, ние можем да създадем хоризонтални отстояния между бутоните.
Прилагането на margin-right директно към класа button ще ограничи начините, по които можем да използваме нашия button. Искаме нашият бутон да работи във всички случаи, не само в ред с бутони.
Прилагането на блокове за отстояние за хоризонтално отстояние може да не работи добре за мобилни устройства. Много мобилни дизайни изискват конкретно хоризонтално разстояние. Блоковете за отстояния не ни позволяват да направим промени за мобилните резолюции.
Ние смятаме, че използването на flex или grid за създаване на пространство в ред от бутони е перфектно.
Избягвайте използването на служебни класове за задаване на размер за вътрешните елементи
Не препоръчваме използването на служебни класове за създаване на отстояния около съдържанието на елемента. Тази стратегия не противоречи на правилата на CSS и ние можем да постигнем желания резултат, но ние бихме искали да избегваме подобна практика. Тя насърчава излишното натрупване на класове и води до конфликти в стилизирането за мобилни устройства.
Обикновено отстоянията за вътрешните елементи ще изискват специфични настройки за размерите за всяка резолюция. Системата за отстоянията Client-First няма контрол върху стойностите на отстоянието в различните резолюции.
Вместо това, прилагайте отстояния на вътрешния елемент директно с помощта на персонализирания клас.