Основи об'єктно-орієнтованого CSS (OOCSS)
Розробка Frontend швидко рухається з багатьма новими технологіями, що додаються щороку. Це може бути боротьба за розробників, щоб не відставати від усього. Між Sass і PostCSS легко заблукати в море інструментів розробки.
Одним з нових методів є об'єктно-орієнтований CSS, який також коротко називають OOCSS. Це не інструмент, а скоріше методологія написання CSS зробити CSS модульною та об'єктною.
У цій посаді я хотів би представити основні засади OOCSS, і як ці ідеї можуть бути застосовані до роботи в Інтернеті. Цей прийом може не зачепити кожного розробника, але варто зрозуміти нові концепції, щоб вирішити, чи може ваш робочий процес виграти від цього.
Що робить об'єктно-орієнтований CSS?
Об'єктно-орієнтоване програмування (ООП) - це парадигма програмування, на якій зосереджена увага створення багаторазових об'єктів і встановлення відносин між ними, на відміну від процедурного програмування, що організовує код у процедури (підпрограми, підпрограми або функції).
ООП став широко використовуватися в обох JavaScript і мови бекенда протягом останніх кількох років, але організація CSS за її принципами все ще є новою концепцією.
The “об'єкт” в OOCSS відноситься до Елемент HTML або що-небудь пов'язане з ним (наприклад, класи CSS або JavaScript). Наприклад, у вас може бути об'єкт віджета бічної панелі, який можна реплікувати для різних цілей (реєстрація новин, рекламні блоки, останні публікації тощо). CSS може ці цілі об'єкти масово що робить масштабування вітерцем.
Підбиваючи підсумок запису OOCSS 'GitHub, об'єкт CSS може складатися з чотирьох речей:
- HTML-вузол (-и) DOM
- CSS-декларації про стиль цих вузлів
- Компоненти, як фонові зображення
- JavaScript поведінка, слухачі або методи, пов'язані з об'єктом
Взагалі, CSS є об'єктно-орієнтованою, коли вона розглядає класи, що повторно використовуються і можна націлити на кілька елементів сторінки.
Багато розробників скажуть, що OOCSS легше поділитися з іншими і легше підібрати після місяців (або років) неактивного розвитку. Це можна порівняти з іншими модульними методами, такими як SMACSS, що має більш суворі правила для категоризації об'єктів у CSS.
Сторінка поширених запитань OOCSS містить багато інформації, якщо вам цікаво дізнатися більше. І творець Ніколь Салліван часто розповідає про OOCSS і про те, як він пов'язується з сучасним веб-розробкою.
Роздільна структура від стилю
Велика частина OOCSS - це написання коду, який відокремлює структуру сторінки (ширина, висота, поля, доповнення) від зовнішнього вигляду (шрифти, кольори, анімації). Це дозволяє спеціальні шкури для застосування до декількох елементів сторінки без впливу на структуру.
Це також корисно для проектування компонентів, які можуть бути переміщувався навколо макета з легкістю. Наприклад, a “Останні повідомлення” Віджет у бічній панелі повинен бути переміщений у нижній колонтитул або над вмістом, зберігаючи аналогічні стилі.
Ось приклад OOCSS для a “Останні повідомлення” віджет, який у цьому випадку є нашим CSS-об'єктом:
/ * Структура * / .side-widget ширина: 100%; додавання: 10px 5px; / * Skinning * / .recent-posts сім'я шрифтів: Helvetica, Arial, sans-serif; колір: # 2b2b2b; розмір шрифту: 1.45em;
Зверніть увагу на це макет управляється за допомогою .сторона-віджет клас, який може бути застосований до декількох елементів бічної панелі, а також зовнішній вигляд управляється за допомогою .Останні повідомлення клас, який також можна використовувати для обробки інших віджетів. Наприклад, якщо .Останні повідомлення віджет було переміщено в нижній колонтитул, він не міг би взяти те ж саме позиціонування, але він міг би мати той самий вигляд.
Також погляньте на цей бічний приклад з CodePen. Він використовує чітке розділення класів для поплавців і вирівнювання тексту так, що реплікація не вимагатиме додаткового CSS-коду.
Окремий контейнер від вмісту
Розділення вмісту від його контейнерного елемента це ще один важливий принцип OOCSS.
Простіше кажучи, це означає, що ви повинні уникати використання дитячих селекторів, коли це можливо. При налаштуванні будь-яких унікальних елементів сторінки, таких як якірні посилання, заголовки, цитати блоків або невпорядковані списки, ви повинні дати їм унікальні класи, а не селектори нащадків.
Ось простий приклад:
/ * OOCSS * / .sidebar / * вміст бічної панелі * / h2.sidebar-title / * спеціальні стильові елементи h2 * / / * Non-OOCSS * / .sidebar / * вміст бічної панелі * / .sidebar h2 / * додає більше специфічності, ніж потрібно * /
Незважаючи на те, що другий формат коду не є жахливим, рекомендується виконувати перший формат, якщо ви хочете писати чистий OOCSS.
Посібник з розробки
Важко прикинути точні специфікації, оскільки розробники постійно обговорюють мету OOCSS. Але ось деякі пропозиції, які можуть допомогти вам написати чистий код OOCSS:
- Працювати з класи замість ідентифікаторів для укладання.
- Спробувати утримуватися від багаторівневої нащадкової класової специфіки якщо це не потрібно.
- Визначити унікальні стилі з повторюваними класами (наприклад, floats, clearfix, унікальні стеки шрифтів).
- Розширити елементи з цільовими класами замість батьківських класів.
- Організуйте таблицю стилів на секції, розглянемо додавання змісту.
Зауважте, що розробники повинні використовувати ідентифікатори для націлювання на JavaScript, але вони не потрібні для CSS, оскільки вони занадто специфічні. Якщо один об'єкт використовує ідентифікатор для CSS, він ніколи не може бути реплікований, оскільки ідентифікатори є унікальними ідентифікаторами. Якщо тоді ви використовуєте лише класи для укладання Успадкування набагато легше передбачити.
Крім того, класи можуть бути зв'язані разом для додаткових функцій. Один елемент може мати до нього більше 10 класів. Незважаючи на те, що 10 + класів на одному елементі не є тим, що я особисто рекомендую, це дозволяє розробникам збирати бібліотеку багаторазових стилів для необмежених елементів сторінки..
Імена класів в межах OOCSS є певною мірою спірними і не встановлені в камені. Багато розробників вважають за краще тримати заняття до кінця.
Також популярний і випадок верблюдів .errorBox замість .вікно помилки. Якщо ви подивитеся на іменування класу в документації OOCSS, ви помітите, що верблюжий випадок є “офіційний” рекомендації. Немає нічого поганого в тире, але, як правило, найкраще дотримуватися керівних принципів OOCSS.
OOCSS + Sass
Більшість веб-розробників вже люблять Sass, і він швидко обігнав спільноту frontend. Якщо ви ще не пробували Sass, варто дати йому постріл. Вона дозволяє писати код з змінними, функціями, методами вкладання і компіляції, наприклад математичними функціями.
У компетентних руках, Sass і OOCSS могли б бути матчем на небесах. Ви знайдете відмінний запис про це на блозі Sass Way.
Наприклад, використовуючи Sass @extend Ви можете застосувати властивості одного класу до іншого класу. Властивості не дублюються, але замість цього ці два класи поєднуються з селектором коми. Таким чином ви можете оновлювати властивості CSS в одному місці.
Якщо ви постійно пишете таблиці стилів, це збереже години введення тексту і допомога автоматизувати процес OOCSS.
Також пам'ятайте про це Підтримка коду є великою частиною OOCSS. Використовуючи Sass, ваша робота полегшується за допомогою змінних, міксинів та додаткових інструментів, які пов'язані з робочим процесом.
Ключовим атрибутом великого коду OOCSS є можливість поділитися ним з ким завгодно, навіть самі на більш пізній час, і мати можливість підібрати його з легкістю.
Міркування ефективності
OOCSS призначена для функціонування безперешкодно і без особливої плутанини. Розробники намагаються з усіх сил ні повторювати себе на кожному кроці, насправді це передумова розвитку DRY. З часом метод OOCSS може призвести до сотень CSS класів з окремими властивостями, застосованими десятки разів у даному документі.
Оскільки OOCSS все ще є новою темою, важко сперечатися на тему роздуття. Багато файли CSS закінчуються роздвоєною структурою, тоді як OOCSS забезпечує жорстку структуру і (в ідеалі) менше роздуття. Найбільш значущою проблемою для продуктивності буде HTML, де деякі елементи можуть накопичувати кілька різних класів для структури та дизайну макетів.
Ви знайдете цікаві обговорення цієї теми на таких сайтах, як Stack Overflow та CSS-Tricks.
Моя рекомендація полягає в тому, щоб спробувати побудувати зразок проекту, і подивитися, як він іде. Якщо ви полюбили OOCSS, це може радикально змінити спосіб кодування веб-сайтів. Крім того, якщо ви ненавидите це, ви все ще вивчаєте нову техніку і критично думаєте про її функціонування. Це безпрограшна незалежно від того, що.
Отримати зайнятий письмовій формі OOCSS
Найкращий спосіб навчитися що-небудь у веб-розробці - це практика. Якщо ви вже розумієте основи CSS, то ви на своєму шляху!
Оскільки OOCSS не вимагає попередньої обробки, ви можете спробувати її з онлайн IDE, наприклад CodePen. Прості проекти є найкращими для початку роботи і вдосконалюють свої знання.
Ознайомтеся з цими ресурсами для подальшого розвитку ваших досліджень у сфері, що розвивається.
- Офіційний сайт OOCSS
- Об'єктно-орієнтований CSS: що, як і чому
- OOCSS + Sass = Найкращий спосіб CSS
- Вступ до об'єктно-орієнтованого CSS
