.jpg)
Създаване на персонализирани класове
Уверете се, че разбирате дефиницията на персонализиран клас в Client-First. Вижте я в Стратегия за класове 1.
Client-First препоръчва създаването и използването на персонализирани класове за различни елементи в проекта.
Въпреки че в проектите се използват както персонализирани, така и служебни класове, в по-голямата част от проектите персонализираните класове са повече.
Предимства на персонализираните класове
1. Бързо създаване
Webflow като платформа е проектиран около визуалното стилизиране на уеб страниците с помощта на панела Styles. Панелът Styles е нашето голямо предимство във Webflow. Ние можем бързо да създаваме нови класове и да прилагаме стилове към тях.
Ние смятаме, че работата с класове чрез панела Styles трябва да бъде удобна и често да се използва по време на нашия работен процес.
В традиционната разработка на уеб сайтове, създаването на персонализирани класове за много елементи отнема време. Класовете и стиловете се пишат на ръка, а писането на CSS свойства по този начин отнема време. Затова в традиционната уеб разработка се препоръчва да се използват системите от класове, базирани на служебни класове.
Във Webflow имаме предимството на панела Styles и трябва да го използваме.
В това видео записваме стиловете за team-list_ на ръка.
В това видео ние визуално създаваме стиловете за team-list_ във Webflow.
2. По-лесно за персонализация и по-безопасно за редактиране
Редактирането на стиловете на персонализиран клас и на служебен клас са много различни неща.
Настройката на елемент с персонализиран клас може да е много очевидна и бърза. В нашия пример с team-list_ трябва да добавим допълнителен стил към настройките display: flex.
Ние влияем конкретно на този елемент и не трябва да се притесняваме, че ще създадем глобална грешка в сайта. Докато редактираме глобалните класове, ние можем случайно да променим елементи в проекта, които не искаме да редактираме. Редактирането на глобалните служебни класове изисква повече внимателности предпазливост.
3. Работа с таблети и мобилни устройства
Дизайнът за десктоп може да се различава много от този за таблети и мобилни устройства. Вероятно настройките при много елементи в нашия проект се различават при различните резолюции.
Използвайки персонализирани класове, можем свободно да правим промени в различните резолюции. Елементите с отделен персонализиран клас е по-лесно да бъдат стилизирани с уникален стил на таблет или мобилно устройство.
В този пример променяме team-list_, за да изглежда по по-различен начин на таблети и мобилни устройства. Персонализираният клас ни позволява да направим тази промяна с помощта на панела Styles.
Ако ни трябва да променим настройките на мобилни резолюции, когато използваме служебни класове, ще ни потрябват допълнителни служебни класове, които да дадат възможност да персонализираме тези резолюции.
4. Работа с клиенти
Клиентите често имат корекции и искания, които не съответстват на стандартите на системата служебни класове.
"Направете това отстояние по-малко", "Направете този блок по-голям", "Променете цвета от син на червен", "Променете реда на тези елементи на мобилни устройства" и т.н.
Корекциите от клиентите могат да бъдат "произволни", в смисъла, че не винаги следват стандартите на системата на служебните класове. Използването на персонализирани класове може да ни помогне да се оправяме по-лесно с тези произволни корекции.
Клиентите молят да се правят корекции както по време на разработката, така и след стартирането. Ние се чувстваме по-комфортно, когато променяме конкретен елемент с персонализиран клас, а не системата на служебни класове.
Ако корекциите на клиента не се вписват в системата на служебните класове в проекта, те стават още по-трудни. Ще ни потрябва нов клас, за да направим тези промени.
Ние можем да правим промени по стиловете по-бързо като използваме персонализирани класове.
Използване на глобални класове
Уверете се, че разбирате дефиницията за глобален клас в Client-First. Вижте дефиницията в Стратегия за класове 1.
Глобалният клас трябва да е несложен, мощен и значим.
Предимства на глобалните класове
1. Управление на стиловете глобално из целия уеб сайт.
Глобалният клас трябва да е значим - той може да съдържа стойности за важен набор от стилове, които се управляват на глобално ниво.
Например класове на контейнери в Client-First. container-large има стойност max-width от 80rem (1280px). Ако искаме max-width на нашия контейнер да се намали из целия уеб сайт, можем да актуализираме container-large до 75rem (1200px) с една промяна на стила.
Това е глобална промяна, която актуализира всичките копии на container-large в проекта.
container-large е мощен глобален модификатор в нашия проект.
2. По-малко време за изграждане, ефективно използване на общи стилове, удобство за клиентите.
Ние можем да поискаме да използваме стил CSS като служебен клас, за да работим по-бързо. Например hide-tablet или hide-mobile-portrait.
Тези класове ще ни позволят да променяме видимостта на елементи в целия уебсайт, докато работим, без да създаваме допълнителни класове и комбинирани класове специфично за скриване на елемент. Този служебен клас може да ни помогне да работим по-бързо в Designer.
В примера по-долу искаме да скрием последните два елемента в списъка само за мобилни устройства. За да го направим използваме hide-mobile-portrait без да създаваме нов клас.
Обърнете внимание, че това не е свойство на CSS, което трябва да се актуализира глобално. Най-вероятно не бихме искали да покажем всички копии на скрити мобилни елементи в проекта. Целта на този служебен клас е да оптимизира работния процес, като намали количеството допълнителни персонализирани класове.
Смислено използване на глобални класове
Ако глобалният клас не дава едно от следните две предимства, използването му може да бъде безсмислено.
Можем да си зададем следните въпроси:
Ще има ли този стил някакво предимство ако се управлява на глобалното ниво?
Води ли това до по-малко време за изграждане, ефективно използване на повтарящи се стилове или удобство за клиента?
Ние искаме да създаваме и управляваме глобален клас само ако попада в един от тези случаи.
Пример с абсолютно позициониране
Например нека разгледаме глобален служебен клас, наречен position-absolute, който добавя CSS свойството position: absolute към елемент.
Няма причини да променяме стиловете на този клас глобално. Какви CSS свойства ще актуализираме в position-absolute? Няма смисъл да актуализираме този клас глобално в целия проект.
position: absolute обикновено не е CSS свойство, което може да съществува самостоятелно. Вероятно ще са необходими допълнителни CSS свойства за създаване на желаното разположение на елемента.
Едва ли стилът position-absolute ще подобри скоростта на изглаждането, тъй като се нуждае от допълнителни класове. Вероятно ще потрябват допълнителни класове за работа с мобилните резолюции.
Затова предлагаме да прилагате CSS свойства като position директно към персонализирания клас.
Не препоръчваме да се използва клас като position-absolute като глобален клас.
Пример на тъмна секция
Глобалните класове трябва да имат за цел глобални промени. Направените промени в глобалния клас трябва да засягат целия сайт.
Например можем да използваме класа section-dark за прилагане на color: #ffffff и background-color: #000000 към секция. Ако. If section-dark iсе прилага към много секции в целия проект, можем да правим глобални промени на тъмните секции.
Например промяната от background-color: #000000 на background-color: #111111 може да бъде направена за един клас, section-dark, и тя ще се отрази в целия проект.
Натрупване на глобални класове
Натрупаните глобални класове могат да ни помогнат да приложим няколко глобални стила към един елемент.
Ние трябва да подходим към натрупването на класове разумно. Нашето изграждане на уеб сайта може да стане неконтролируемо, ако натрупаме твърде много класове върху един елемент.
Натрупване на подобни класове
Препоръчваме натрупването на глобални класове със същото CSS свойство или тип на категория. Например искаме да натрупаме:
- Класове за външно отстояние с класове за външно отстояние
- Класове за вътрешно отстояние с класове за вътрешно отстояние
- Класове за ширина с класове за ширина
- Класове за типография с класове за типография
Натрупването на подобни класове не е стриктно правило. Това е практика, която ни помага да останем по-организирани и гъвкави в проекта. С използването на този метод, ние отстраняваме много случаи на излишно натрупване.
Ако се получава смесица от свойства на класове върху един елемент, нашият списък с класове расте и се появява проблемът с излишното натрупване.
Примери
Нека разгледаме два примера — външно отстояние и типография.
Външно отстояние (Margin)
Системата на Client-First за отстояния използва подход с натрупани глобални класове. Първо, прилагаме класа за посока, margin-top. След това прилагаме класа за размер, margin-large.
Не искаме да добавяме повече класове отгоре на това.
Например, ние не бихме добавили клас max-width върху тези класове за създаване на отстояние.
Ние ще се доближим до излишното натрупване, ако добавим допълнителни класове върху margin-top margin-large. Ако поставим max-width-small допълнително към вече съществуващите класове, ще ни бъде по-трудно да правим бързи промени на margin-large class. Ще потрябва да премахнем max-width-small преди да променим margin-large.
Този концепт се прилага към всички други категории класове. Искаме Div блокът с класове за отстояние да има само такива класове.
Типография
Един текстов елемент може да изисква множество глобални типографски класове. В този случай можем да добавим няколко класа към текстовия елемент.
Например голям текст, който е сив. Текстовият елемент може да получи класовете text-size-large и text-color-gray за да приложи тези стилове.
Както и при отстоянията, тук ние не искаме да добавяме повече класове.
Ние искаме нашите класове за типография да бъдат лесно достъпни в панела Styles. Ако искаме да актуализираме text-size-large, няма да искаме да премахваме много класове след него, за да получим достъп до основния клас.
Не добавяйте нови стилове към натрупани глобални класове
Не искаме да добавяме нови стилове към натрупани глобални класове, защото това ще създаде нов клас (комбиниран клас) в CSS на проекта.
Създаването на специфични за елемент комбинирани класове от глобални служебни класове, противоречи на целта на истинските глобални служебни класове. Тази практика може да доведе до объркване с класовете, когато уебсайтът се развива.
Продължаваме с горепосочените примери - външно отстояние и типография.
Пример с външно отстояние
Ние никога не искаме да създаваме нов клас с нашите натрупани класове за външно отстояние. Ако имаме margin-top и margin-large, не трябва да прилагаме никакви други стилове към тази натрупана комбинация.
Прилагането на стилове по този начин ще създаде нов клас с нов набор от стилове в CSS файла.
Пример с типографията
Ние никога не искаме да създаваме нов персонализиран клас с натрупани класове за типография. Ако имаме text-size-large и text-color-gray, не трябва да прилагаме нов персонализиран стил към натрупаните класове.
Това също води до създаването на нов комбиниран клас.
Решение
Вместо да създаваме нов клас от натрупани глобални класове, ние предлагаме използването на тези два други метода.
1. Започнете с персонализиран клас от началото.
Вместо да създавате комбиниран клас text-size-large text-color-gray, създайте персонализиран клас home-header_text с размер, цвят и допълнителен CSS стил. Това ще даде пълна гъвкавост на стила за добавяне на персонализирани стилове към елемента.
Въпреки това, няма да наследяваме никакви глобални стилове. Ако прекалено често използваме този метод, ще изгубим предимството на използване на глобално управляема типографика.
2. Използвайте нов глобален служебен клас за създаване на комбинирания клас.
Ние създаваме нашия комбиниран клас като добавяме нов клас към нашите служебни класове. Класът се нарич is-home-header и се създава комбиниран клас за всичките три класа.
Този метод запазва стила на text-size-large text-color-gray, а настройката на елемента се прави с помощта на is-home-header. is-home-header съдържа всички необходими персонализирани стилове за този елемент.
Този метод е най-удобен, когато искаме определени CSS свойства да останат глобални в проекта. В този пример свойствата на CSS font-size (text-size-large) и color (text-color-gray) остават глобално контролирани.
Комбинирани класове
Какво е комбиниран клас?
Комбинираният клас е вариант на базовия клас. Комбинираният клас наследява стиловете от базовия клас и добавя повече стилове отгоре на него.
Дефинираме "базов клас" като първия клас в нашия списък от натрупани комбинирани класове в комбиниран клас. Добавяме клас върху базовия клас, за да създадем уникален вариант.
Комбинираният клас ще работи само заедно с базов(ите) клас(ове) преди него. Във видеото по-долу можете да видите, че is-blue не работи самостоятелно. Той работи само като допълнение към базовия клас button.
Основната разлика между глобален натрупан служебен клас и комбиниран клас:
- Комбинираният клас създава нов клас и добавя ново описание на стил към CSS файла на проекта.
- Натрупаните глобални класове не създават нов клас и не променят CSS файла.
Представка is-
За да запазим яснота и ред при използване на комбинирани класове, ние използваме is- като представка в името на класа. Когато виждаме is-, знаем, че този клас е създаден като комбиниран клас върху друг клас.
Наследяване на стиловете от базовия клас
Комбинираните класове имат едно основно изискване за създаване - комбинираният клас трябва да има ясно предимство при наследяването на стиловете от базовия клас.
В комбиниран клас дефинираме "базов клас" като първия клас в нашия списък от натрупани комбинирани класове. Базовият клас трябва да съдържа стиловете по подразбиране, които се допълват от всичките персонализирани вариации.
Класът, добавен отгоре, който създава комбинирания клас, е вариация. Всяка такава вариации трябва да има смисъл при наследяването на стиловете от базовия клас.
Пример с бутон
Нека разгледаме пример за система от комбинирани класове за бутон.
Класът button е нашият базов клас. Всички варианти на стилове по-долу са върху класа button.
is-primary, is-alternative, is-inactive, is-black
Можем да добавим тези стилове към button, за да създадем вариация на бутона. Важно е да разберем, че класовете is- няма да работят самостоятелно. Те ще работят само като допълнение към класа button.
Класът button е важен базов клас в този пример.
Искаме всичките ни бутони, независимо от варианта, да имат еднакво padding и font-size. Дефинираме тези свойства в нашия базов клас.
Всеки от вариантите is- наследява тези важни глобални стилове от button.
Тази система на комбинирани класове за бутони ни позволява глобално да актуализираме CSS свойствата padding и font-size за всички бутони в проекта. Всички бутони по подразбиране, и всички вариации на бутона, ще получат актуализацията на глобалния стил.
Ясно предимство е и възможността да управляваме тези стилове глобално. Можем да направим значителни промени в целия сайт с едно обновяване на клас.
Тази стратегия на комбинирани класове за бутони е отличен пример за мощна и ефективна употреба на комбинирани класове.
Използване на комбинирани класове с цел
Комбинираните класове са мощни. Те трябва да са използвани внимателно и с цел. Слабо омислената система от комбинирани класове може да създаде проблеми при мащабирането и организацията в проекта.
Трябва да има някаква причина за наследяване на стиловете от базовия клас. Ако няма такава, може да няма смисъл да се използва система от комбинирани класове. Възможно да е по-добре да се създаде един персонализиран клас, който съдържа всички натрупани стилове.
Пример с контейнер — Система от комбинирани класове, която не трябва
Ще разгледаме пример за система от комбинирани класове за container, която няма ясна цел.
Нашият клас container модифицира няколко настройки: margin: 0 auto, width: 100% и променлива стойност за max-width.
Изкушаващо е да създадем комбо container is-large, is-medium, is-small. Изглежда като перфектен случай за комбиниран клас, защото имаме две общи CSS свойства и едно променливо свойство за размер.
Въпреки това двата общи CSS свойства — margin и width — не са CSS свойства, които трябва да управляваме глобално в базовия клас. Не е добра практика да слагаме на тези свойства други стойности. Например не бихме искали да променим width: 100% на width: 90%. Освен това, не бихме искали да променяме стойностите на margin: 0 auto.
Тъй като не е нужно да управляваме margin или width в базовия клас на container, няма предимство в системата за управление на комбинирани класове. Единственото свойство, която трябва да променяме е max-width.
Вместо комбинирания клас container is-large ние прилагаме всички стилове директно към един клас — container-large. Винаги предпочитаме да работим с един клас, вместо с комбиниран клас. Ако комбинацията не е нужна, не искаме да я използваме.
Освен това когато посочим размера в името на класа, подобряваме четливостта на имената на класовете в панела Navigator. Ще видим container-large като име на класа, а не само container.
Пример с типография — Наследяване на десктопната резолюция и настройка за мобилни устройства
Трябва да персонализираме текстов елемент, защото е уникален за мобилни устройства. На десктоп и таблет, този елемент съответства на стандартния стил text-size-large. На мобилни устройства, той изисква уникални промени, които по подразбиране не се включват в нашия глобален служебен клас.
1. Започнете с персонализиран клас от самото начало.
Имаме възможността да създадем нов персонализиран клас за управление на типографията през всички резолюции. Например home-header_text-subtitle. С тази стратегия, не използваме системата от служебни класове. Недостатъкът тук е, че вече не поддържаме глобалните стойности за размери за десктоп и таблет. Ако искаме да направим глобална промяна на нашия text-size-large на десктоп, персонализираният клас няма да получи тази промяна.
2. Използвайте допълнителен клас за създаване на комбиниран клас.
Ако глобално управляваната типография е важна в нашия проект, можем да създадем нов комбиниран клас. Например text-size-large is-home-header. Предимството от тази реализация е, че можем да поддържаме нашите глобални стилове на десктоп и таблет, след това да ги персонализираме само за мобилни устройства. Когато правим глобална промяна на нашия клас text-size-large на десктоп, този елемент ще получи тези промени чрез глобалната система.
Използване на тази стратегия с други служебни класове
Тази концепция работи за други системи от служебни класове в проекта. Например:
icon-medium is-footer
button-primary is-nav
heading-medium is-mobile-effect
Трябва да има цел при създаването на комбиниран клас от глобален служебен клас. Трябва да има ясно разбиране на необходимостта да се поддържат глобалните стилове и след това да добавят допълнителни стилове към тях.
Не натрупвайте излишно! Стратегията на комбинирания клас is- става по-малко ефективна, когато има няколко натрупани глобални класове. Например text-size-large text-color-black text-style-underline is-testimonials-title са твърде много натрупани класове.
Искаме да избягваме излишното натрупване по всяко време.
Не натрупвайте излишно
Причини да не натрупваме излишно
1. Проблеми с работния процес в панела Styles на Webflow
Нямаме пълен контрол над комбинираните класове в Webflow.
- Не можем да пренареждаме натрупаните класове в панела Styles.
- Не можем да правим промени по силно натрупаните класове на мобилни резолюции.
- Нямаме пълен контрол за управление на натрупаните класове визуално в Designer.
Премахването на всички по-късни класове в дълъг списък с глубоко натрупани класове е сложен процес. Когато списъкът с класове става по-дълъг, вероятността за грешки и разочарование при правене на промени също става по-висока.
Смятаме, че това е неефективен работен процес и вътрешен проблем с UX на Webflow.
Създали сме този принцип на Client-First специално, за да бъде по-лесно да взаимодействаме с натрупаните класове на Webflow Designer.
2. Множество стъпки за малки промени
Ограниченията описани по-нагоре водят до трудоемък процес при редактиране на излишно натрупаните класове.
Изтриването на множество класове, за да премахнем един клас в началото на списъка с излишно натрупани класове не е много добра практика. Тези допълнителни стъпки могат да бъдат дразнещи, ако те са постоянна практика в работния ни процес.
Освен това имаме проблеми с работния процес при редактиране на класове за мобилни резолюции. Когато трябва да направим специфични промени за мобилни устройства, можем да имаме конфликти в стиловете от по-рано натрупани елементи.
3. По-трудно обучение
Смятаме, че излишното натрупване води до по-трудно обучение, тъй като се иска по-дълбоко разбиране какво правят класовете.
Потребител, който влиза в проекта, трябва:
- Да разбира добре CSS
- Да разбира какво прави всеки клас в списъка с натрупани класове
- Да разбира нюансите на натрупването на класове в Webflow
Ние смятаме, че това прави по-трудно разбирането на нашия проект.
Когато използваме Client-First, искаме постоянно да опростяваме разбирането за това как работи проектът. Трябва да се стремим да създаваме елементи, използваме класове и прилагаме стратегии, които са лесни за разбиране, управление и мащабиране. Това прави проекта в Webflow мощен.
4. Писането на CSS в Webflow е бързо
Не е нужно да спестяваме време при писането на CSS в Webflow.
Обяснено е по-подробно по-горе в Създаване на персонализиран клас > Предимства на персонализираните класове > 1. Бързо създаване.
5. Малко се пести CSS
За пример за малко спестяване на CSS нека сравним времето за зареждане на 52kb CSS файл срещу 65kb CSS файл. Разликата е незначителна.
Не вярваме, че относително малките спестявания в CSS стиловата таблица са по-добри пред предимствата на създаването на персонализирани класове.
Лимити при излишно натрупване
В Client-First натрупваме класове, но не искаме да ги натрупваме излишно. По-долу разглеждаме броя на класовете, натрупани на един елемент.
1 или 2 класа на един елемент
Страхотно. Това е обичайната практика.
3 класа на един елемент
Добре, но защо ни трябват 3 натрупани класа? Необходимо ли е?
4 класа на един елемент
Абсолютен максимум при натрупване. Наистина ли ни трябват 4 натрупани класа?
5 класа на един елемент
Твърде много. Ще бъде трудно за управление. Създайте персонализиран клас.
Как да избегнем излишно натрупване
1. Използвайте един персонализиран клас
Вместо да натрупваме множество класове, можем да започнем с един единствен персонализиран клас. Можем да стилизираме елемента с един клас без никакво натрупване на класове. Натрупаните стилове ще се прилагат към един персонализиран клас.
2. Използвайте допълнителен Div блок
Когато класовете ни се натрупат прекалено, можем да създадем вложен Div блок, който да управлява стила.
Основната структура, използвана в Client-First, следва този подход. Вместо да натрупваме много класове на един елемент, разделяме класовете по вид и използваме няколко вложени слоя от елементи.
Вложеният слой разделя стиловете, които имат различни функции. Поддържаме нашата система за глобални служебни класове, докато избягваме излишно натрупване.
Същият принцип важи и за системата за отстояния Client-First. Например когато прилагаме контейнер за създаване на отстояния, ние отделяме margin-top и margin-large от другите елементи.
3. Създайте комбиниран клас
Например:
section_header + is-mobile-reverse + background-blue + text-color-white
Може да се превърне в:
section_header + is-home-header
Ние наследяваме важните глобални стилове от section_header, например padding, z-index и transition.
Нашият is-home-header е комбиниран клас, който добавя background-color, текст color, и промени на елемента при различните мобилни резолюции.
Вместо да натрупваме четири класа, намалихме количеството до два класа. Така е по-лесно за управление и можем да правим промени по-гъвкаво.
Без позициониране
Няма flex, grid, column или други класове за позициониране на елементи на страница
Flex, grid, column или други класове за позициониране на елементи не са включени в Client-First.
Ние не препоръчваме да създавате глобална управлявана flex или grid клас система във Webflow. Ние препоръчваме създаването на персонализирани класове използвайки flex, grid, или всякакви други варианти.
Първи пример за нещо, което не ни харесва
Нека сложим елементи под формата на таблица с помощта на служебни класове. Този пример не е в практиката на Client-First. Освен това, това е пример защо Client-First не включва системи за разположение на елементи.
grid-3-col gap-large tablet-grid-2 mobile-grid-1
Сега си представете клиентът иска да се намалят отстоянията между елементите на таблета. Външното отстояние gap-large, което ни трябваше на десктопа, вече не е нужно на таблета. На нас ни е нужно много по-малко отстояние. Въпреки това, ние наследяваме нашия gap-large от десктопа.
Списъкът ни с класове може да стане дълъг, когато добавим персонализирани резолюции на таблет и телефон към нашата система за служебни класове. Настройката на резолюциите за таблети и мобилни устройства може да доведе до излишно натрупване.
За да персонализираме разположението на елементите при всички резолюции, ние се нуждаем от голяма и сложна система от класове. Ще трябва да създаваме нов служебен клас всеки път, за да направим настройката за мобилни резолюции, ако я няма във вече съществуващ клас.
Необходими са много стъпки, за да се премине от празен Div блок до завършен адаптивен елемент.
Втори пример за нещо, което не ни харесва
Възможно е да намалим броя на класовете в системата за служебни класове, групирайки множество CSS свойства в един клас.
Например flex-a-l-j-c + flex-mobile-a-c установява настройките на flex на основната резолюция и на мобилната.
Такова именуване на класове няма да бъде ясно за тези, които не са запознати с тази система за именуване. Може би, като първоначален разработчик, ние можем лесно да се ориентираме в тези имена, но това не означава, че други разработчици или нашите клиенти също ще разберат всичко.
Не искаме да виждаме col-2-d + col-5-t + col-12m също.
Въпреки че това споразумение за именуване може да е по-ясно, все още трябва да разбираме как работи тази система. Не е ясно кои са нашите опции, за да продължим изграждането на проекта.
Какво означават числата? Какво означават буквите? Какви са колоните? Как работи на други резолюции? Какво да правя, когато имам нужда от уникална промяна?
Пример за това какво може да работи с Client-First
Можем да използваме възможностите на глобалните класове, за позициониране на елементи в Client-First. Глобалните системи за позициониране на елементи също могат да бъдат съвместими с Client-First. Ако това е най-доброто за вашата задача в момента, правете така.
Например grid_col-2 и grid_col-3 могат да бъдат използвани за позициониране на елементи с 2 и 3 колони. На десктоп те всички ще са еднакви, но може да създадем комбиниран клас is-specific-instance за таблет и мобилни резолюции.
Не искаме да ограничим всеки с използване на глобалната система от класове за позициониране на всеки елемент, секция или страница. Използването на система за комбинирани класове доста съответства на Client-First.
Персонализирайте позиционирането на елемента с персонализирани класове
Ние можем да създадем прости и сложни вариации на разположение на елементи с използването на персонализирани класове. Можем да използваме персонализирани класове за всички вариации на разположения на елементи в нашите проекти ако така ще ни бъде по-удобно.
Персонализираните класове са перфектни за позициониране на елементи. Персонализираните класове ни позволяват:
- Бързо да изградим структура на страницата
- Бързо да правим промени в бъдеще
- Правим промени на мобилните резолюции
- Предотвратяваме случайно нарушаване на позиционирането в целия сайт
- Предаваме нашия проект на други разработчици с минимална трудност на обучение