Объектно-ориентированный CSS: Catchy Buzz-фраза или законный подход к дизайну?

Ответ 1

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

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

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

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

Ответ 2

Ложная фраза фраз и законный подход к дизайну.

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

Ответ 3

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

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

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

Итак, отличная концепция, нуждается в ребрендинге. Максимальный CSS! Power CSS! Возвращение CSS! CSS Squared! CSS Prime! Что-то вроде этого.

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

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

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

Ответ 6

Я смущал как OOCSS, так и B.E.M. именования соглашений в течение довольно долгого времени и НИКОГДА не оглядываться назад. Для тех, кто утверждает, что это просто "запоминающееся звуковое слово" или "CSS уже делает это", не понимайте возможности написания css с использованием обеих этих методологий.

Посмотрим на простейший из объектов, список со ссылками. Он поставляется в разных вариантах:

• Меню

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

• Вкладка

• Панели (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;
        }

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

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

• Элементы child с префиксом nav _

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

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

Как только у меня будет свой базовый объект witten, я создаю скины, которые изменят внешний вид объекта. Это превратит его в панели инструментов, вкладки и т.д. 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 для большего вдохновения.

Ответ 7

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

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

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

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

Ответ 8

CSS похож на языки OO разными способами: write

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

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

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

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

Важно помнить, что 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 вещь, добавляя "собаку" к любому "терьеру" и "животному" на любую "собаку" на стороне сервера (тривиальная замена) или с javascript.

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

Ответ 9

его действительно одна из тех спорных вещей, как таблицы против div и т.д. и т.д.

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

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

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

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

Ответ 10

Там не так много, я верю.

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 -->

BEM Блок - Элемент__Modifier

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

<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 -->