Основе објектно оријентисаног ЦСС-а (ООЦСС)

Фронтенд развој се брзо креће са многим новим техникама које се додају сваке године. Може бити борба за програмере да иду у корак са свиме. Између Сасс и ПостЦСС је лако изгубити се у мору развојних алата.

Једна нова техника је Објецт-Ориентед ЦСС, која се такође кратко назива ООЦСС. Ово није алатка, већ ЦСС методологија писања која има за циљ чине ЦСС модуларним и објектним.

У овом посту, желим да вам представим основне основе ООЦСС-а, и како се те идеје могу примијенити за рад на веб-у. Ова техника можда неће успети са сваким програмерима, али вреди разумети нове концепте да бисте одлучили да ли ће ваш радни процес имати користи од њега.

Шта чини ЦСС објектно оријентисаним?

Објектно оријентисано програмирање (ООП) је програмска парадигма на коју се фокусира креирање објеката за вишекратну употребу и успостављање односа између њих, за разлику од процедуралног програмирања које организује код у процедуре (рутине, подпрограми или функције).

ООП је постао широко коришћен у оба случаја ЈаваСцрипт и позадински језици у последњих неколико година, али организовање ЦСС-а према својим принципима је још увек нови концепт.

Тхе “објекат” у ООЦСС се односи на ХТМЛ елемент или било шта повезано са њим (као ЦСС класе или ЈаваСцрипт методе). На пример, можда имате објекат видгета на бочној траци који се може реплицирати за различите сврхе (пријављивање на билтен, блокови огласа, недавни постови итд.). ЦСС може циљати ове објекте масовно што чини скалирање повјетарцем.

Сумирајући ООЦСС 'ГитХуб унос, ЦСС објект може се састојати од четири ствари:

1. ХТМЛ чвор (и) ДОМ-а
2. ЦСС декларације о стилу тих чворова
3. Компоненте као позадинске слике
4. ЈаваСцрипт понашања, слушаоци или методе повезане са објектом

Генерално говорећи, ЦСС је објектно оријентисан када се разматра класе које се могу поново користити и могу се циљати на више елемената странице.

Многи програмери би рекли да је ООЦСС лакше дијелити с другима и лакше га је покупити након мјесеци (или година) неактивног развоја. Ово се може упоредити са другим модуларним методама као што је СМАЦСС који има строжа правила за категоризацију објеката у ЦСС-у.

На ООЦСС ФАК страници је хрпа информација ако вас занима да сазнате више. А креаторка Ницоле Сулливан често говори о ООЦСС-у и како се повезује са модерним веб развојем.

Одвојена структура од стила

Велики део ООЦСС-а је писање кода који раздваја структуру странице (ширина, висина, маргине, паддинг) од изгледа (фонтови, боје, анимације). Ово омогућује цустом скиннинг да се примени на више елемената странице без утицаја на структуру.

Ово је такође корисно за пројектовање компоненти које могу бити кретао се по распореду с лакоћом. На пример, а “Рецент Постс” видгет на бочној траци треба да буде покретан у подножје или изнад садржаја, а да притом задржи сличне стилове.

Ево примера ООЦСС за а “Рецент Постс” видгет који је у овом случају наш ЦСС објект:

 / * Структура * / .сиде-видгет ширина: 100%; паддинг: 10пк 5пк;  / * Скиннинг * / .рецент-постс фонт-фамили: Хелветица, Ариал, санс-сериф; цолор: # 2б2б2б; фонт-сизе: 1.45ем;  

Приметићете да лаиоут се управља помоћу .сиде-видгет класа која се може применити и на више елемената бочне траке, док изглед се управља помоћу .недавних постова класа која се може користити и за друге виџете. На пример, ако је .недавних постова видгет је премјештен у подножје, можда неће заузети исто позиционирање, али може имати исти изглед.

Такође погледајте овај сидебар као пример из ЦодеПен-а. Користи различито раздвајање класа за флоат и поравнање текста тако да Репликација неће захтевати додатни ЦСС код.

Одвојите садржај из садржаја

Раздвајање садржаја од елемента контејнера је још један важан принцип ООЦСС-а.

Једноставније речено, ово само значи да избегавате коришћење селектора за децу кад год је то могуће. Приликом прилагођавања било којих јединствених елемената странице, као што су линкови за сидро, заглавља, блокови или неуређене листе, требало би да им дате јединствене класе, а не селекторе потомака.

Ево једноставног примера:

 / * ООЦСС * / .сидебар / * садржај бочне траке * / х2.сидебар-титле / * специјални х2 елементи стилова * / / * Нон-ООЦСС * / .сидебар / * исти садржај сидебар-а * / .сидебар х2 / * додаје више специфичности него што је потребно * / 

Иако није ужасно користити други формат кода, јако се препоручује да пратите први формат ако желите да пишете чист ООЦСС.

Смернице за развој

Тешко је одредити прецизне спецификације јер програмери стално расправљају о сврси ООЦСС-а. Али ево их неке сугестије које вам могу помоћи да напишете чистији ООЦСС код:

• Рад са класе уместо ИД-ова фор стилинг.
• Покушати да уздржавајте се од специфичности вишеструких насљедника ако није потребно.
• Дефинисати јединствене стилове са поновљивим класама (нпр. флоатс, цлеарфик, јединствени скупови фонтова).
• Ектенд елементс са циљним класама него родитељске класе.
• Организујте свој стилски лист у секције, размислите о додавању садржаја.

Имајте на уму да програмери и даље треба да користе ИД-ове за ЈаваСцрипт циљање, али они нису потребни за ЦСС јер сувише су специфични. Ако један објекат користи ИД за ЦСС стилинг, никада се не може реплицирати јер су ИД-ови јединствени идентификатори. Ако тада користите само класе за стилинг наслеђивање постаје много лакше предвидети.

Штавише, класе могу бити повезане заједно за додатне функције. Један елемент може имати 10 + класе које су му придружене. Иако 10+ класа на једном елементу није нешто што бих ја лично препоручио, он омогућава програмерима да сакупљају библиотеку стилова за вишекратну употребу за неограничене елементе странице..

Имена класа унутар ООЦСС-а су донекле контроверзна, и нису постављена у камену. Многи програмери преферирају да држе часове кратким и тачним.

Случај камила је такође популаран, на пример .еррорБок уместо .бок-еррор. Ако погледате класификацију у ООЦСС документацији, уочићете да је случај камила “званичник” препорука. Нема ништа лоше у цртама, али у правилу је најбоље слиједити ООЦСС смјернице.

ООЦСС + Сасс

Већина веб програмера већ воли Сасс и брзо је прешла заједницу фронтенд-а. Ако већ нисте пробали Сасс, вреди га дати. Омогућава вам да пишете код са променљивим, функцијама, методама угњежђивања и компилације као што су математичке функције.

У компетентним рукама, Сасс и ООЦСС могли би бити утакмица направљена на небу. На блогу Сасс Ваи наћи ћете одличан опис о томе.

На пример, користећи Сасс @проширити директива можете применити својства једне класе на другу класу. Својства се не дуплирају, већ се ова два разреда комбинирају са селектором зареза. На овај начин можете ажурирати ЦСС својства на једној локацији.

Ако стално пишете стилове, то би уштедело сати куцања и помоћ аутоматизовати процес ООЦСС.

И то запамтите одржавање кода је велики део ООЦСС-а. Користећи Сасс, ваш посао постаје лакши са варијаблама, микинима и напредним алатима за везивање у радни процес.

Кључни атрибут великог ООЦСС кода је способност да је поделите са било ким, чак и себе касније, и бити у могућности да га покупите са лакоћом.

Разматрања учинка

ООЦСС је замишљен да ради глатко и без много конфузије. Девелопери се труде не да се понављају на сваком кораку, у ствари то је премиса иза развоја СУХИХ производа. Временом, ООЦСС техника може довести до стотина ЦСС класа са појединачним карактеристикама које се примењују на десетине пута у датом документу.

Пошто је ООЦСС још увек нова тема, тешко је расправљати о теми надимања. Многе ЦСС датотеке завршавају отечене са мало структуре, док ООЦСС обезбеђује круту структуру и (идеално) мање надимање. Највећа забринутост због перформанси би била у ХТМЛ-у где неки елементи могу акумулирати шачицу различитих класа за структуру и дизајн распореда.

Наћи ћете занимљиве дискусије о овој теми на сајтовима као што су Стацк Оверфлов и ЦСС-Трицкс.

Моја препорука је да покушате да направите узорак пројекта и видите како то иде. Ако се заљубите у ООЦСС, то може радикално промијенити начин на који кодирате веб локације. Алтернативно, ако га мрзите, још увек учите нову технику и критички размишљате о томе како она функционише. То је вин-вин без обзира на све.

Гет Буси Вритинг ООЦСС

Најбољи начин да се нешто научи у развоју веба је пракса. Ако већ разумете основе ЦСС-а онда сте на добром путу!

Пошто ООЦСС не захтева предпроцесирање, можете га испробати са онлине ИДЕ, као што је ЦодеПен. Једноставни пројекти су најбољи за почетак и побољшање вашег знања од тамо.

Погледајте ове ресурсе како бисте даље истраживали на пољу развоја ООЦСС-а.

• ООЦСС Оффициал Вебсите
• Објектно оријентисани ЦСС: Шта, Како и Зашто
• ООЦСС + Сасс = Најбољи начин за ЦСС
• Увод у објектно оријентисани ЦСС