Объектно-ориентированный CSS - PullRequest
Новая
       41

Объектно-ориентированный CSS

7 голосов
/ 15 сентября 2011

Я смотрел эту презентацию об объектно-ориентированном CSS , но я думаю, что я либо не правильно понимаю, либо не понимаю преимуществ использования OO CSS:

Пример HTML: 

<div class="border-1 bg-2 color-1 font-1">
</div>

Пример CSS: 

/* borders */
.border-1 { border: 1px solid red; }

/* backgrounds: */
.bg-2 { background: yellow; }

/* other sections */

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

Но на самом деле вы определяете стиль / вид внутри HTML или, по крайней мере, его части. Конечно, это лучше, чем использование атрибута style, потому что вы все еще можете обмениваться стилями для набора групп.

Дело в том, что вы определяете группы стилей внутри HTML, но я узнал, что вы должны создавать «логические» группы внутри HTML (например, class="nav-item" / class="btn submit-btn"), и CSS полностью применяет стиль и определяет, какие элементы принадлежат друг другу с "стилистической" точки зрения (например, .nav-item, .submit-btn { background: red; }).

Может быть, я совершенно не понял концепцию. Тем не менее, я до сих пор не знаю, как создать свой CSS.

Ответы [ 4 ]

7 голосов
/ 15 сентября 2011

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

Использование CSS, как то, что предлагается для «объектно-ориентированного CSS», просто приводит к ужасному, несемантическому и бессмысленному CSS, который в долгосрочной перспективе не легче поддерживать, чем «обычный» CSS. И id, и class должны иметь семантических и значимых имен , поэтому использование структуры, которая позволяет писать семантический CSS (который описывает намерение вместо представления), по моему скромному мнению, намного лучше.

3 голосов
/ 15 сентября 2011

Идея состоит в том, что вы повторно используете одни и те же классы CSS для многих элементов.Это экономит как на написании CSS, так и на поддержании CSS.поэтому вместо определения кнопки .create-button .cancel-button .create-and-new у вас будет просто .button, который определяет заполнение, size, background, color, line-height, font-size, font-family иfont-weight.И некоторые действительно маленькие классы для различных стилей кнопок, такие как, чтобы изменить color или font-size

на правильный проект oocss, который я часто использую, можно найти здесь: https://github.com/stubbornella/oocss/wiki

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

3 голосов
/ 15 сентября 2011

Это скорее «удаление имени», чем фактический метод.Код, который вы показали, часто уничижительно называется " enterprise css ", этому нет оправдания.

Более того, наличие нескольких классов на элементах фактически снижает производительность.1006 * Я советую вам придерживаться рекомендаций Mozilla при создании CSS, который работает также и в других браузерах.И сделать выделенный .css файл с хаки для IE6, 7 и 8.

1 голос
/ 14 января 2016

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

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

Дальнейшее чтение:

...