Объектно-ориентированный CSS: броская модная фраза или подход легитимного дизайна?

Question

Похоже, в области веб-разработки появилась новая ключевая фраза: объектно-ориентированный CSS.

На первый взгляд, это выглядит просто как лучшая практика, упакованная в броский лозунг. Я понимаю и полностью уважаю намерения, стоящие за движением, но есть ли еще что-нибудь?

Есть ли у кого-нибудь дальнейшее понимание, которое выделяет этот подход как нечто более надежное, или я должен просто принять его как напоминание, чтобы убедиться, что я правильно унаследовал и каскадировал свои классы?

Answer 1

Я бы сказал, что это более броская модная фраза для чего-то, что уже присутствует в CSS. Конечно, прежде чем мы начнем говорить о том, что такое ОО, а что нет, и о том, как CSS является объектно-ориентированным, нам необходимо определить, что это такое на самом деле - с чем другие боролись раньше, и это вызывает бурные дебаты. Но если мы предположим, что основные принципы ОО:

• Класс
• Объект
• Экземпляр
• Метод
• Передача сообщений
• Наследование
• Абстракция
• Инкапсуляция
• Полиморфизм
• Отделение

Можно сказать, что каскадные таблицы стилей в некоторой степени объектно-ориентированы, поскольку они позволяют определять классы, создавать экземпляры / объекты (назначая класс элементу), наследовать классы (даже множественное наследование), абстракцию ( например, путем определения стилей для простых элементов) и полиморфизма (путем определения одного и того же имени класса для разных элементов). Конечно, методы / передача сообщений невозможны из-за статической природы CSS.

В общем, я бы сказал, что это правильный подход к разработке CSS объектно-ориентированным способом, но я бы не стал называть это объектно-ориентированным CSS, потому что, по крайней мере, для меня это нечто глубоко присущее CSS. Это было бы как сказать: «Я занимаюсь объектно-ориентированной Java ...»

Answer 2

броская модная фраза И законный подход к дизайну.

Хотя я думаю, что некоторые идеи немного наивны в том, что они склонны забывать «парадигму веб-разработки« клиент меняет все, что происходит ».

Answer 3

Я думаю, что модное название «объектно-ориентированный CSS» на самом деле умаляет его полезность и более широкое принятие концепции.

Когда я читаю об этом, я думаю, что утверждение, что это был ОО, на самом деле замедлило мое понимание того, что это было на самом деле.

Люди, которые знают, что значит «объектно-ориентированный» в программировании, будут скептически относиться, потому что это не действительно ОО, не так ли? Это просто попытка применить некоторые принципы ОО к CSS для повышения его эффективности. А с другой стороны, большинство разработчиков на стороне клиента вообще не поймут эту концепцию, если они не будут программистами, и поэтому они будут просто сбиты с толку или смущены.

Итак, отличная концепция, нуждается в ребрендинге. Максимум CSS! Мощный CSS! CSS Reborn! CSS в квадрате! CSS Prime! Нечто подобное.

Answer 4

Меня смущало и OOCSS, и B.E.M. соглашения об именах в течение достаточно долгого времени и никогда не оглядываются назад Те, кто утверждает, что это просто «броское модное слово» или «CSS уже делает это», не понимают возможности написания CSS, используя обе эти методологии.

Давайте посмотрим на самый простой из объектов, список со ссылками. Это входит во многие различные ароматы:

1. Меню

2. Панели инструментов

3. Вкладка

4. Панели (Bootstrap)

В OOCSS мы находим общие свойства каждого из них и создаем базовый объект. Я обычно называю это nav.

/*  Nav
    =================================================*/

    /*  B
        ---------------------------------------------*/

        .nav
        {
            margin-left:            0;

            padding-left:           0;

            list-style:             none;
        }

    /*  E
        ---------------------------------------------*/

        .nav__item
        {
            float:                  left;
        }

        .nav__link
        {
            display:                block;

            color:                  inherit;

            text-decoration:        none;
        }

    /*  M
        ---------------------------------------------*/

        .nav--right
        {
            float:                  right;
        }

        .nav--stack .nav__item
        {
            float:                  none;
        }

Вы заметите несколько вещей:

1. Nav - базовый объект, который применяется к элементу блока

2. Дочерние элементы имеют префикс nav_

3. Модификаторы имеют префикс nav -

4. Модификатор - это опция, которая изменяет поведение. Например - right плавает nav right.

После того, как мой базовый объект засвидетельствован, я создаю скины, которые изменят внешний вид объекта. Это превратит его в панели инструментов, вкладки и т. Д. У Microsoft есть вкладки Pivot на своих телефонах. Теперь проще создавать fpr.

/*  Nav
    =================================================*/

    /*  E
        ---------------------------------------------*/

        .pivot .nav__item
        {
            margin-left:            24px;

            color:                  #aaa;

            font-size:          36px;
        }

        .pivot .nav__item--active, .pivot .nav__item:hover
        {
            color:                  #000;
        }

Чтобы использовать этот объект и скин, вы должны написать

<ul class="pivot nav">

   <li class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <li class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </li>

</ul>

Из-за его независимости от местоположения вы также можете написать его как

<nav class="pivot nav">

   <div class="nav__item">

        <a class="nav__link"> Item 1 </a>

    </li>

   <div class="nav__item">

        <a class="nav__link"> Item 2 </a>

    </div>

</nav>

В конечном счете, вы отделяете контейнер от кожи. Я хотел бы предложить начать с Николь Салливанс Медиа Объект. Взгляните на Twiter Bootstrap и Inuit.css для большего вдохновения.

Answer 5

Написание этого ответа все эти годы спустя для потомков. Все ответы выше никогда явно не слышали серьезных разговоров об объектно-ориентированном CSS. Когда ОП спросил, является ли это модным словом, это должно было указывать на то, что выражение относится к предмету, который заслуживает разговора (более того, чем «Что мы подразумеваем под объектно-ориентированным?»).

Объективно-ориентированный CSS - это термин, который, как мне кажется, был придуман сторонним техническим евангелистом Yahoo Николь Салливан после того, как она проконсультировалась для Facebook по рефакторингу их презентационного кода переднего плана в нечто более тонкое и более управляемое, которое еще можно было бы расширить и изменить легко, как время шло. Термин «объектно-ориентированный» относится не к природе самого CSS (как такового), а к подходу к написанию CSS и затрагиваемой разметке, который обеспечивает краткость и расширяемость.

Некоторые примеры принципов OO CSS включают:

• Избегайте использования идентификаторов в качестве селекторов: тот факт, что объект уникален, не обязательно означает, что его ключевые свойства должны быть определены таким образом, чтобы они переопределяли все остальные.
• Избегайте длинных селекторов на основе вложенной разметки: определение внешнего вида элемента на основе его случайного расположения в структуре документа часто является логической ошибкой, а перемещение его на новое место заставит вас переписать селектор. Как и в вышеупомянутом, эта плохая практика также дает повод для условных переопределений или расширений, требующих дополнительной силы и специфичности в их селекторах, что редко бывает полезным.
• Используйте несемантическую разметку для создания элементов с различными презентационными целями, а не пытайтесь перегрузить все особенности внешнего вида отдельного элемента в одно правило. Это приводит к менее многословному CSS.

В конечном итоге цель OOCSS - СУХАЯ. Вам не следует писать тысячи строк CSS, когда вы по сути создаете варианты похожих вещей.

Николь дала хороших разговоров по этому вопросу - она ​​также написала несколько статей, в которых подробно рассказывается о полезных приемах , которые нужно использовать, и плохих практиках , которых следует избегать.

'OOCSS' - это также имя framework , которое она написала, который дает некоторый шаблонный код для расширяемых макетов CSS. Как и почему этот фреймворк так хорош (модуль grid - это то, что я использую практически везде), не совсем самоочевидно из самого кода, и чтение его постов в блоге об идеях, лежащих в основе, определенно помогите лучше использовать его и CSS в целом.

Answer 6

Я говорю это в течение лет .

Селекторы CSS основаны на идентификаторах экземпляров и классах. Он даже поддерживает множественное наследование. Насколько более очевидным может быть это?

Красота мышления CSS в терминах объекта заключается в том, что становится очень просто начать «разыгрывать» элементы разметки. Нужен этот div, чтобы внезапно стать INotRenderedAnymore? Просто позвольте JS расширить свой атрибут класса, чтобы он соответствовал .removed, не возитесь со свойствами стиля.

Очевидно, что это довольно банальный пример, но преимущества должны быть очевидны - особенно в контексте манипулирования JS. Вы можете отделить JS от фактических стилей, которые он должен модифицировать, что является одновременно бонусом за обслуживание и абстракцию, но также имеет ряд дополнительных преимуществ, таких как отсутствие прямой установки стилей очень высокой специфичности (которые CSS не может переопределить).

Answer 7

Термин «объектно-ориентированный CSS» является неправильным.

«Объектно-ориентированный CSS» - это на самом деле просто шаблон проектирования, позволяющий максимально эффективно использовать CSS, и по сути тот же подход, который Джонатан Снукс называет SMACSS .

Назовите ли вы это OOCSS или SMACSS, ключом к подходу является то, что вы создаете общие элементы пользовательского интерфейса, такие как nav abstraction . Эти элементы пользовательского интерфейса могут быть расширены с помощью более специфических функций путем добавления дополнительных классов к элементу и / или элементу контейнера. Или, в качестве альтернативы, вы можете добавить свои собственные пользовательские правила CSS, используя ID элемента или семантические классы.

Cascade Framework - это новый CSS-фреймворк, основанный на этом подходе. Это дает вам оптимальную производительность, оптимальную гибкость и оптимальную модульность с минимальными затратами.

Answer 8

CSS во многом похож на ОО-языки: напишите

p { color: red }
p span { color: blue }

и у вас есть по существу наследство. Вот более сложный пример с использованием классов животных-терьеров:

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; }
.animal, .dog, .terrier { color: brown } 

Теперь вы можете использовать классы животных, собак и терьеров в ОО манере.

Важно помнить, что CSS очень хорош в решении проблемы, для которой он создан: прозрачное определение стилей для элементов. Может ли быть лучше с большим количеством ОО-концепций? Я не уверен. Допустим, кто-то говорит: CSS-файл был бы проще, если бы он выглядел так:

@class dog @derives_from animal /* the syntax i just invented */
@class terrier @derives_from dog

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; }
.terrier { color: brown } 

Это выглядит проще, но еще более простое решение - удалить вещь @class, добавив 'dog' к любому 'terrier' и 'animal' к любой 'dog' стороне сервера (тривиальное выражение замены) или с помощью javascript.

Самое лучшее в CSS - это то, что он прост и легко отступает, то есть браузерам не нужно интерпретировать CSS, который они не понимают, и все работает достаточно хорошо. Поскольку вам придется нарушить эту обратную совместимость с основными новыми структурами CSS, я думаю, что это делает объектно-ориентированный CSS более популярным.

Answer 9

Думаю, в этом нет ничего особенного.

OOCSS Объектно-ориентированная каскадная таблица стилей

Сокращает код для повторения снова и снова, и вы можете установить глобальный CSS для foocontainer один раз и использовать его повсеместно и иметь собственный стиль для header body и footer.

<div class="foocontainer header"> Your header </div> <!-- two classes -->
<div class="foocontainer body"> Your body </div>  <!-- two classes -->
<div class="foocontainer footer> Some footer </div> <!-- two classes -->

---

БЭМ Блок - Элемент__Модификатор

Это делает код легким для чтения, но безобразным для написания, и вы можете легко идентифицировать детей с их родителями.

<div class="foocontainer--header"> Your header </div> <!-- one class -->
<div class="foocontainer--body"> Your body </div> <!-- one class -->
<div class="foocontainer--footer> Some footer </div> <!-- one class -->

Answer 10

это действительно одна из тех спорных вещей, как таблицы против divs и т. Д. И т. Д.

По моему мнению, многие разработчики настолько укоренились в ОО, что пытаются закрепить это на всем, сначала на JavaScript, а теперь на CSS. Не поймите меня неправильно. В JavaScript тоже есть элементы ОО, но я отвлекся.

Поскольку CSS уже само по себе является модным словом (все работодатели хотят, чтобы CSS 2.0 подходил в сети), многие новые разработчики открывают для себя его. Это неплохая вещь, однако, как разработчики, они сделали то, что у них получается лучше всего, и попытались улучшить CSS. По мнению разработчиков (я разработчик), организация CSS в соответствии с принципами ОО имеет смысл - отсюда и новое модное слово.

В конечном итоге я пытаюсь сказать, что OO CSS - это просто подход, который используют некоторые люди, поскольку он кажется более логичным. Если вы пишете CSS, который будет поддерживаться разработчиками, этот подход хорошо подойдет. Это действительно зависит от того, как вы пишете свой CSS и свой собственный стиль ...

Лично мне все равно, как люди пишут свой CSS - если мне придется поддерживать его, Firebug все равно делает работу тривиальной.