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

StackOverflow https://stackoverflow.com/questions/657407

  •  19-08-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Меня смущало и OOCSS, и B.E.M. соглашения об именах в течение достаточно долгого времени и никогда не оглядываются назад. Для тех, кто утверждает, что это просто & Quot; броское модное слово & Quot; или " 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 - это базовый объект, который применяется к элементу блока

  • Дочерние элементы имеют префикс nav _

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

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

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

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

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

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

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

    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 более популярным.

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

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

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

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

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

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

    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 Block - Element__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 -->
    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top