Концепція об'єктно орієнтованого css

Об'єктно Орієнтований CSS (Object Oriented CSS - OOCSS) являє собою концепцію CSS, яка передбачає швидке, легке в обслуговуванні і відповідає вимогам стандартів подання CSS коду. У OOCSS використовуються принципи об'єктно Орієнтованого Програмування (Object Oriented Programming - OOP), що дозволяє створювати CSS конструкції, які призначені для багаторазового використання, а це в свою чергу знижує час завантаження веб-сторінок і істотно підвищує їх продуктивність. Мова йде не про нову технологію або середовищі розробки, а особливому підході до створення правил, що дозволяють надати CSS коду властивості масштабованості і гнучкості у використанні.

Що таке CSS об'єкт?

Об'єктно-орієнтований підхід в CSS включає в себе два ключових аспекти:

  • Поділ структури шаблону і його оболонки.

Тут мається на увазі, що кожен створений фрагмент CSS коду, що знаходиться в рамках шаблону можна використовувати, вказуючи його оболонку (ім'я класу) в необхідних місцях. Таким чином, за рахунок можливості маніпуляції різними шаблонами (об'єктами), тобто їх оболонками (іменами), ми отримуємо потужний і дуже гнучкий інструмент візуального оформлення компонентів веб-сторінки, не захаращуючи її при цьому зайвим кодом. Іншими словами, імена класів використовуються для назв об'єктів та їх компонентів, що дозволяє значно розширити можливості, передбачені семантичними правилами HTML.

  • Поділ контейнера і його вмісту.

    Мається на увазі зведення до мінімуму використання селекторів, побудованих на родинних відносинах HTML елементів. Тобто селектор, що вказують на вкладені в батьківський блок елементи. Властивості об'єкта не повинні залежати від його позиції в документі. Наприклад, у разі форматування елемента заголовка

    вкладеного в блок з класом myObject замість селектора .myObject h2 потрібно створити окремий клас і застосувати його до потрібного елементу заголовку другого рівня, який може знаходитися в будь-якому місці структури документа.

    Це дає нам такі переваги:

    • Всі «чисті», що не містять імен класів заголовки

      . матимуть один вид, не залежно від їх позиції.

    • Це ж стосується і тих елементів, які належать до одного класу - вони будуть виглядати однаково в будь-якому місці сторінки.
    • Якщо вам необхідно щоб вкладений елемент (в нашому випадку

      . який вибирається селектором .myObject h2), відображався звичайним, стандартним способом (який властивий «чистим»

      елементам), то для цього не буде потрібно створювати додаткове правило, переобумовленої вже існуюче.

    • Чого не слід робити при використанні OOCSS підходу.

    • Уникайте присутності ідентифікаторів елементів в селекторах.
    • Не слід використовувати селектори нащадків.
    • Також не рекомендується застосовувати директиву! Important.
    • Не слід до селекторам, які відбирали елементи по їх імені (наприклад, h2 <…> ) Додавати імена класів.

    Переваги.

    • Зменшується дублювання коду.
    • Поліпшується SEO дружелюбність сторінок.
    • Зручність при обслуговуванні, доопрацювання та оптимізації.
    • Вихідний код будується на ієрархічній структурі форматування елементів з осмисленими іменами класів.
    • Можливість повторного використання більшості компонентів.
    • Локальне редагування коду об'єкта дозволяє змінити загальну схему подання проекту.

    Недоліки.

    Висновок.

    Схожі статті