Основи на обектно ориентираната CSS (OOCSS)

Развитието на Frontend се развива бързо с много нови техники, които се добавят всяка година. Това може да бъде борба за разработчиците да се справят с всичко. Между Sass и PostCSS е лесно да се изгубите в морето от инструменти за разработка.

Една по-нова техника е обектно-ориентираната CSS, която също се нарича OOCSS за кратко. Това не е инструмент, а по-скоро методология за писане на CSS направете CSS модулен и обектен.

В този пост бих искал да ви представя основи на OOCSS, и как тези идеи могат да бъдат приложени за работа в уеб пространството. Тази техника може да не се сблъсква с всеки разработчик, но си струва да разберете нови концепции, за да решите дали вашият работен процес може да се възползва от него.

Какво прави CSS обектно ориентирана?

Обектно-ориентираното програмиране (ООП) е програмна парадигма, върху която се фокусира създаване на обекти за многократна употреба и установяване на връзки между тях, за разлика от процедурното програмиране, което организира кода в процедури (рутинни процедури, подпрограми или функции).

ООП се използва широко и в двете JavaScript и езиците на бекенда през последните няколко години, но организирането на CSS според неговите принципи е все още нова концепция.

Най- “обект” в OOCSS се отнася до HTML елемент или нещо, свързано с него (като CSS класове или JavaScript методи). Например, може да имате обект на притурката за страничната лента, който да може да се копира за различни цели (регистрация за бюлетин, рекламни блокове, скорошни публикации и т.н.). CSS може насочете тези обекти навсякъде което прави мащабирането на вятъра.

Обобщавайки входа на OOCSS GitHub, CSS обектът може да се състои от четири неща:

1. HTML възел (и) на DOM
2. CSS декларации за стила на тези възли
3. Компоненти като фонови изображения
4. JavaScript поведение, слушатели или методи, свързани с обект

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

Много разработчици биха казали, че OOCSS е по-лесно да споделят с други хора и по-лесно да ги вземе след месеци (или години) на неактивно развитие. Това се сравнява с други модулни методи като SMACSS, които имат по-строги правила за категоризиране на обекти в CSS.

Страницата с често задавани въпроси на OOCSS има куп информация, ако сте любопитни да научите повече. И създателят Никол Съливан често говори за OOCSS и как се свързва с модерното уеб развитие.

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

Голяма част от OOCSS е писане на код, който разделя структурата на страницата (ширина, височина, полета, подложка) от външния вид (шрифтове, цветове, анимации). Това позволява обичайна кожа да се прилага върху няколко елемента на страницата без да се засяга структурата.

Това е полезно и за проектиране на компоненти, които могат да бъдат движеше се около оформлението с лекота. Например, a “скорошни публикации” приспособлението в страничната лента трябва да се движи в долния или над съдържанието, като същевременно се запазват подобни стилове.

Ето пример за OOCSS за a “скорошни публикации” джаджа, която в този случай е нашият CSS обект:

 / * Структура * / .side-widget ширина: 100%; пълнеж: 10px 5px;  / * Skinning * / .decent-posts семейство на шрифта: Helvetica, Arial, sans-serif; цвят: # 2b2b2b; шрифта: 1.45em;  

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

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

Отделен контейнер от съдържание

Разделянето на съдържанието от контейнерния елемент е друг важен принцип на OOCSS.

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

Ето един прост пример:

 / * OOCSS * / .sidebar / * съдържание на страничната лента * / h2.sidebar-title / * специални стилове на h2 * / / * Non-OOCSS * /. h2 / * добавя повече специфичност, отколкото е необходимо * / 

Въпреки че не е ужасно да използвате втория кодов формат, препоръчително е да следвате първия формат, ако искате да пишете чист OOCSS.

Насоки за развитие

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

• Работи с класове вместо идентификатори за стайлинг.
• Опитвам се да да се въздържат от многостепенната специфичност на класа потомък освен ако не е необходимо.
• Определяне уникални стилове с повторяеми класове (напр. плувки, clearfix, уникални пакети за шрифтове).
• Разширяване на елементи с целеви класове вместо родителски класове.
• Организирайте стиловата си таблица на секции, помислете за добавяне на съдържание.

Обърнете внимание, че разработчиците все още трябва да използват идентификатори за насочване към JavaScript, но не са необходими за CSS, защото те са твърде специфични. Ако един обект използва идентификатор за CSS, той никога не може да бъде репликиран, тъй като идентификаторите са уникални идентификатори. Ако тогава използвате само класове за стилизиране наследяването става много по-лесно за предвиждане.

Освен това, класовете могат да бъдат свързани заедно за допълнителни функции. Един елемент може да има прикачени 10 + класа. Докато 10 + класа на един елемент не е нещо, което лично бих препоръчал, той позволява на разработчиците да натрупват библиотека от стилове за многократна употреба за неограничени елементи на страница..

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

Случаят с камили е също популярен, например .errorBox вместо .грешка кутия. Ако се вгледате в именуването на класове в документацията на OOCSS, ще забележите, че камилата е “официален” препоръка. Няма нищо лошо в тирета, но по правило най-добре е да следвате указанията на OOCSS.

OOCSS + Sass

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

В компетентните ръце Sass и OOCSS могат да бъдат мач, направен в небето. Ще намерите отличен запис за това на блога на Sass Way.

Например, използвайки Sass @разшири Можете да приложите свойствата на един клас върху друг клас. Свойствата не се дублират, а вместо това двата класа се комбинират със селектор със запетая. По този начин можете да актуализирате CSS свойствата на едно място.

Ако постоянно пишете стилове, това ще спести часове на писане и помощ автоматизира процеса OOCSS.

Също така помнете това Поддръжката на кода е голяма част от OOCSS. Чрез използването на Sass работата ви става по-лесна с променливи, миксини и усъвършенствани инструменти за вмъкване, свързани с работния процес.

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

Съображения за изпълнение

OOCSS има за цел да работи гладко и без много объркване. Разработчиците се опитват най-добре не да се повтарям на всяка крачка, всъщност това е предпоставката зад развитието на DRY. С течение на времето техниката OOCSS може да доведе до стотици CSS класове с индивидуални свойства, прилагани десетки пъти в даден документ.

Тъй като OOCSS все още е нова тема, трудно е да се спори по темата за надуването. Много CSS файлове завършват с малка структура, докато OOCSS осигурява твърда структура и (в идеалния случай) по-малко подуване. Най-голямата загриженост за представянето ще бъде в HTML, където някои елементи могат да натрупат шепа различни класове за структура и дизайн на оформлението.

Ще намерите интересни дискусии по тази тема на сайтове като Stack Overflow и CSS-Tricks.

Моята препоръка е да се опитате да изградите примерен проект и да видите как става това. Ако се влюбите в OOCSS, това може радикално да промени начина, по който кодирате уебсайтове. Като алтернатива, ако мразите това, все още изучавате нова техника и мислите критично за това как работи. Това е печеливша, без значение какво.

Напишете OOCSS

Най-добрият начин да научите нещо в уеб разработката е да практикувате. Ако вече разбирате основите на CSS, тогава сте на път!

Тъй като OOCSS не изисква предварителна обработка, можете да го опитате с онлайн IDE, като CodePen. Простите проекти са най-добрите за да започнете и да подобрите знанията си оттам.

Обърнете внимание на тези ресурси, за да продължите изследванията си в развиващата се област на OOCSS.

• OOCSS Официален сайт
• Обектно-ориентиран CSS: Какво, Как и Защо
• OOCSS + Sass = Най-добрият начин за CSS
• Въведение в обектно ориентираната CSS