Ви коли-небудь зустрічали фразу «Контент - король»? Якщо ви є веб-розробником, і ваша робота часто пов'язана зі створенням контенту, то напевно зустрічали. Це практично фундаментальне правило в справі залучення відвідувачів на сайт.
Тим не менш, деякі веб-розробники можуть оскаржити дане твердження тим, що важливіше швидкість. І мені, до речі, все більше і більше починає подобатися саме ця точка зору. За останні роки багато фахівців пропонували різні способи збільшення продуктивності роботи веб-сайтів, що, безсумнівно, приваблювало новий якісний трафік.
На жаль, більшість розробників, що працюють в даній сфері, приділяли все більше уваги продуктивності j # 097; vascript і іншим аспектам. випускаючи з уваги CSS.
Сьогодні ж я хочу звернути вашу увагу саме на упущений аспект - Об'єктно-орієнтований CSS, а також розповісти вам про те, яким чином це може допомогти вам підвищити продуктивність і можливість підтримки веб-сторінок.
Як і в будь-якому об'єктно-орієнтованому КОДІНГ, метою OOCSS є код з можливістю повторного застосування, а також можливість максимально близько підійти до універсальним і ефективним таблицями стилів, які значно простіше використовувати і підтримувати.
Як було описано про OOCSS на вікі-сторінці від GitHub. OOCSS ґрунтується на двох фундаментальних принципах.
Відділення «шкури» від структури
Майже у кожного елемента на оформленої веб-сторінці є різні візуальні властивості (тобто «шкури»), які можуть повторюватися в різному контексті. Спробуйте поміркувати над формуванням бренду веб-сайту: кольору, «легке» застосування градацій, створення видимих або невидимих кордонів. З іншого боку, існують також і невидимі властивості (тобто структура), яка також може повторюватися.
Коли ці різні властивості розділені на модулі, засновані на класах, їх можна використовувати повторно, і вони можуть бути застосовані до будь-якого елементу, приводячи до однакового результату. Давайте порівняємо деякі з них до коду, і після коду, щоб ви могли зрозуміти, про що я веду мову.
Перед застосуванням принципів OOCSS, у вас повинен бути приблизно такий код CSS:
3 вищенаведених елемента оформлені унікальними класами, і застосовані вони за допомогою ID-селектора, який визначає класи, і який не може бути використаний повторно. Але тут також можна бачити те, що кілька класів між ними збігаються. Основні стилі можуть бути використані в якості брендингу або, іншими словами, для створення почуття консистенції в дизайні.
Трохи подумавши планування і структуру стилів, ми можемо абстрагувати основну стилізацію таким чином, щоб CSS-код закінчувався приблизно так:
Тепер всі елементи використовують класи, а основні стилі суміщені в одну «шкуру» з можливістю повторного застосування, і тепер немає потреби повторно використовувати непотрібні уривки коду стилів. Нам просто потрібно застосувати клас «шкури» до всіх елементів, і отримати однаковий результат, отриманий в першому прикладі. Таким чином, ми можемо використовувати набагато менше коду, і отримати можливість повторного використання стилів.
Поділ контейнерів і контенту
Другий принцип, описаний на вікі-сторінці від GitHub, полягає в поділі контейнерів від їх наповнення. Для того щоб проілюструвати вам, чому це важливо, ми візьмемо на розгляд наступний код CSS:
Ці стилі будуть застосовані до будь-яких заголовкам третього рівня, які є дочірніми елементами елемента #sidebar. Але що якщо нам потрібно застосувати той же самий стиль до заголовків третього рівня, які знаходяться в підвалі, за винятком лише аспекту розміру шрифту і модифікованої тіні тексту?
У такому випадку нам потрібно буде зробити щось подібне:
Або ми можемо завершити чимось менш сильним:
Тепер нам не потрібно дублювати стилі, і нам не потрібно навіть думати про це. За допомогою OOCSS ми можемо заздалегідь продумати, що спільного може бути між різними елементами, потім об'єднати ця властивості в окрему таблицю стилів, яку потім можна буде застосовувати скільки завгодно раз.
Стилі, оголошені в наведених вище прикладах за допомогою потомственого селектора, не можуть бути використані повторно, так як вони залежать від конкретного контейнера (в даному випадку як від бічній панелі, так і від підвалу).
Коли ми застосовуємо метод створення модулів за допомогою класів, властивий OOCSS, ми можемо бути впевненими в тому, що наші стилі не залежать від будь-якого контейнера. Це означає, що їх можна використовувати в будь-якій частині документа, незалежно від структури.
Приклад з життя
Отже, давайте розглянемо дещо, що було на самому початку розробки стилю шапки сайту:
Тут наведено кілька унікальних стилів, призначених для елемента .header-inside. Але решта може формувати модуль з можливістю його повторного використання. Тобто у нас є можливість абстрагувати структурні стилі в окремий клас для повторного використання. Ось що ми отримуємо в результаті:
Стилі, що належать класу .globalwidth охоплюють наступне:
* Фіксована ширина
* Центрування за допомогою margin: auto
* Відносне позиціонування для створення позиціонує контексту дочірніх елементів
* 20-піксельні відступи з лівого і правого боку
* Параметр overflow має значення hidden, що дозволяє уникнути видимості надмірного наповнення контенту, що виходить за рамки.
Тепер ми можемо вільно використовувати ці стилі з будь-яким елементом, якому потрібні подібні параметри, шляхом простого прикріплення потрібного класу, замість написання додаткової рядки коду CSS.
Що стосується мого сайту, то я використовував ці структурні стилі з елементами основного контенту, а також у внутрішніх елементах підвалу. Залежно від дизайну, дані стилі також можна застосовувати до горизонтальної навігації, яка часто розташовується між шапкою сайту і контентом, або до будь-якого іншого елемента, який потрібно центрувати на сторінці і зафіксувати його ширину.
Після додавання стилів globalwidth до даних елементів, наша верстка повинна виглядати приблизно так:
Хтось може подумати, що даний тип абстрагування стилів призводить код HTML в безлад, і суперечить принципам структурування сторінки.
Але залишивши в стороні всі суперечки на предмет впливу даного методу на розмітку, навряд чи хтось зможе заперечити того факту, що цей метод найзручніший, і дозволяє нам без праці відслідковувати потрібні області коду, підтримувати їх в актуальному стані.
Одним з першопрохідців в OOCSS вважається Ніколь Салліван (Nicole Sullivan). Вона створила модуль з можливістю повторного використання під назвою Media Object. За рахунок нього, судячи з її слів, можна економити сотні рядків коду.
Media Object - відмінний приклад мощі OOCSS, так як він може складатися з медіа-елементів будь-якого розміру, і вміщати в себе контент. Хоча багато стилів, які застосовуються до контенту всередині нього (і навіть до розміру самого медіа-елемента) можуть бути змінені, у самого Media Object є основні стилі, які допомагають уникнути непотрібних повторень.
Я вже посилався на деякі переваги OOCSS, але давайте розглянемо їх ближче.
Переваги в продуктивності повинно бути цілком достатньо. Якщо у вас буде менше повторюваних в коді стилів, то відповідно і розмір сторінки буде менше, що приведе до більш швидкого її завантаженні.
Це правда, що код HTML буде трохи «підбитий» і від цього може збільшитися розмір HTML-файлів, але в більшості випадків ці незначні втрати з лишком компенсуються підвищеною продуктивністю, якої можна досягти за рахунок оптимізованих таблиць стилів.
Далі також слід виділити той факт, що кожен раз, коли ви повторно звертаєтеся до того чи іншого стилю, ви все одно що створюєте нові оформлені елементи, при цьому не генеруючи нові рядки коду. Для великих проектів з величезними обсягами трафіку це може зіграти ключову роль.
Таблиці стилів з можливістю підтримки їх актуальності
За рахунок OOCSS, у вас замість постійно зростаючого документа CSS з постійними розбіжностями в семантиці буде зручний набір модулів, які можна використовувати на вимогу.
Вносячи зміни в уже активний веб-сайт, вам не доведеться додавати нові стилі в кінець вашого документа CSS. Замість цього ви зможете заново використовувати вже існуючі стилі і розширювати їх на основі вже застосованих наборів правил.
З таким підходом ви без зусиль зможете розробляти повноцінні сторінки, використовуючи лише невеликий уривок коду CSS. Будь яка існуюча модуль CSS може служити основою для всіх нових сторінок, і будь-який новий CSS-код буде мінімальним. У деяких випадках ви навіть зможете створювати нові повністю оформлені сторінки без єдиної строчки CSS-коду.
Ці переваги також дозволять вам розширити свої можливості по відношенню до каскадним таблиць. Так як стилі тепер модульні, навіть новим розробникам буде просто розібратися в структурі сторінки.
Те, що слід знати
OOCSS вже породив великі суперечки в спільнотах, і розділив розробників на прихильників і противників. Давайте спробуємо хоч трохи розібратися з деякими основними непорозуміннями.
Ви як і раніше можете використовувати ID
Якщо ви вирішите повністю присвятити себе OOCSS, то ваші стилі здебільшого будуть засновані на CSS-класах, і вам не знадобиться використовувати ID.
Саме з цієї причини багато помилочки зробили висновки про те, що OOCSS примушує вас відмовлятися від ID. Це думка невірна.
Тут правило полягає в тому, щоб не використовувати ID в селекторах. Тобто якраз ідеально то, що можна застосовувати принципи OOCSS (і уникати при цьому стилізації за допомогою селекторів ID), і при цьому застосовувати ID в коді HTML для j # 097; vascript або в якості ідентифікаторів фрагментів коду.
Звичайно ж, ви можете зустріти ситуацію, коли ви вже застосували ID до елементу, в унікальності якого ви впевнені. Отже, ви можете заощадити пару байтів, не додаючи клас до цього елементу. Тому замість стилю він буде використовувати ID селектор. Але навіть в цій ситуації набагато безпечніше буде покластися на клас. Це дозволить вам бути впевненими в тому, що у вас не виникне проблем в майбутньому.
Робота з маленькими проектами
Що стосується невеликих сайтів і додатків, то тут OOCSS, звичайно, може бути зайвим. В цілому, я не раджу вам брати дану статтю за зразок для наслідування, так як OOCSS може підходити або не підходити в залежності від конкретного проекту.
Проте, я думаю, що пора б уже хоча б на мінімальному рівні замислюватися про впровадження OOCSS в свої проекти. Як тільки ви опануєте цією технікою, я впевнений, що вам буде значно простіше працювати з великими серйозними проектами, де вигода від застосування буде дуже помітна.
Невелике керівництво по застосуванню
Поспішаю попередити, що можна витратити достатньо часу, перш ніж ви зможете майстерно оперувати OOCSS. Я до сих пір до кінця не освоївся, тому навряд чи зможу відповідати на ваші питання в даній області.
Але ось що вам слід усвідомити з самого початку. Це допоможе вам влитися в роботу з OOCSS:
* Уникайте понижуючого селектора (тобто не використовуйте .sidebar h3)
* Не використовуйте ID для стилізації
* Не прикріплюйте класи до елементів в таблицях стилів (тобто не використовуйте div.header або h1.title)
* За винятком рідкісних випадків, намагайтеся не використовувати! Important
* Використовуйте CSS Lint для перевірки коду CSS (і заздалегідь будьте готові до божевільних налаштувань)
* Використовуйте сіткові CSS
Звичайно ж, будуть випадки, коли деякі з цих правил потрібно (або можна) буде порушити. Але в цілому, всі ці знання і навички виведуть вас на новий рівень розробки.