Стратегија на класи-1

Типови на класи

Помошна класа

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

Сите помошни класи се глобални класи по природа. Концептот на помошна класа е класа која помага да се применат глобалните CSS својства во рамките на проектот.

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

Додадовме помошна класа font-size-large во проектот Client-First стартер за да ни помогне да организираме и управуваме со унифицирана големина на типографијата низ целиот проект.

Помошните класи нема да користат долна црта во името на класата.

Прилагодлива класа

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

Ова го нарекуваме „прилагодлива“ класа затоа што е прилагодлива надвор од помошните класи на нашиот проект. Прилагодливите класи треба да се креираат кога помошните класи не можат или не треба да се користат на некој елемент. Класата е прилагодена на тој елемент.

На пример, класа за стилизирање на специфичен елемент во глобалните заглавија за проектот, header_background-layer.

На пример, класа за стилизирање на специфичен елемент во слајдот со препораки, testimonial-slider_headshot.

Во Client-First, прилагодливите класи користат долна црта во името на класата.

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

Класификација на класа. Глобална класа е наменета за употреба преку целиот проект. И помошните класи и прилагодливите класи можат да бидат глобални класи.

Глобалната класа применува стилови кои ќе останат унифицирани низ целиот проект. Глобална класа не е за конкретен пример.

„Global“ значи секаде и каде било во проектот.

Сите помошни класи се глобални класи. Помошните класи се глобални по природа.

На пример, нашите класи margin и padding се глобални помошни класи. margin-large има вредност на маргина од 3rem. Кога ќе ја ажурираме таа вредност на 4rem, секоја инстанца која користи margin-large ќе се ажурира на 4rem.

margin-large е глобален контролер што ја менува вредноста на нашата margin и padding низ проектот. Можеме да направиме влијателни, глобални промени во нашиот проект кога правилно ги користиме глобалните помошни класи.

Глобалните класи не се ограничени само на помошните класи. Глобалните класи сега се појасно дефинирани како било кој тип на класа што има намера да има глобално управување со стилови врз целиот сајт.

Во Client-First v2, подобро ја објаснуваме и поттикнуваме употребата на сопствени класи како глобални класи.

На пример, faq_item може да биде глобална прилагодлива класа. Имаме многу FAQ низ вебсајтот, и faq_item се користи за управување со FAQ елементите низ целиот проект.

На пример, header_content може да биде глобална прилагодлива класа. Имаме header компонента на секоја страница од проектот. Оваа класа управува со ова прилагодување на обвивката за содржина глобално низ целиот проект.

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

Комбо класата е варијанта на основната класа. Комбо класата наследува стилови од основната класа и додава повеќе стилови врз неа.

Ја дефинираме „основната класа“ како прва класа во нашата листа на наредени комбинирани класи во комбо класа. Додаваме класа врз основната класа за да создадеме единствена варијација.

Додадената класа што ја дава единствената варијација го користи класниот префикс на 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 Дизајнерот.

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

На пример:

Во Client-First, сакаме да избегнеме вакво длабоко натрупување класи. Ќе читаме за избегнување на длабоко натрупување низ документацијата.

Еве брза листа на причини:

Причини зошто не натрупуваме.

Неможност за прередување стилови во панелот за стилови во Webflow Дизајнерот.

Немаме бесплатна контрола врз натрупаните класи во Webflow. Не можеме да ги реорганизираме или правилно да ги управуваме во Дизајнерот. Ако треба да ги промениме или отстраниме класите во натрупаната листа, мора да ги отстраниме сите класи од листата пред да пристапиме до претходните класи.

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

Овој проблем станува екстремен кога правите уредувања за помали големини на екран. Имаме уште помалку контрола на уредување бидејќи уредуваме големини на екран надвор од основната големина.

Побавен работен тек. Потребни се многу чекори за мали промени.

Работниот тек погоре одзема многу време. Ако ова е постојана практика во нашиот работен тек, тоа ќе го зголеми времето на изградба и одржување.

Зголемена крива на учење.

Веруваме дека натрупувањето класи води до поостра крива на учење. Има потреба за подлабоко разбирање што прават класите и како да се управува со нив.

Пишувањето CSS во Webflow е брзо

Пишувањето CSS е брзо и ефикасно преку панелот за стилови на Webflow. Можеме да создадеме нова класа и визуелно да додадеме CSS својства во класата. Овој процес е многу брз во Webflow, а ние го користиме во Client-First.

Заштедата на големината на CSS не е премногу значајна

Кога користиме глобални класи во проект, можеме да ја намалиме големината на нашата CSS-датотека. Не веруваме дека овие мали заштеди на CSS ги надминуваат придобивките од креирањето прилагодлива класа во Webflow.

Научете повеќе за deep stacking подоцна:
Има целосно објаснување за секоја од овие поенти во Classes strategy 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, веруваме дека е потребно помалку време и напор за креирање и управување со стилови на прилагодлива класа на елемент отколку управување со длабоко натрупана листа на класи.

Има целосно објаснување за креирањето на сопствени класи во Classes strategy 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 е поконкретно и ни кажува дека ова има врска со елементот за headshot во тимскиот список.

wrapper е уште поконкретно и ни кажува дека ова е обвивката на headshot.

Читајќи го името на класата team-list_headshot-wrapper е јасно и логично, дури и ако корисникот не го разбира CSS-от што го содржи. Корисникот ќе разбере дека уредување на оваа класа ќе направи [нешто] на листата на тимот headshots.Тоа е одлично наговестување за следната личност која ќе влезе во проектот.

Сега замислете да додадете повеќе елементи во нашата обвивка за снимки. Можеме да останеме многу организирани со конвенција за именување од општо до специфично.

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

Нашата листа на класи за листата на тимот е многу организирана и логична во рамките на нашиот проект. Оваа конвенција за именување се интегрира многу добро во нашата функција на папки.

‍