Объектно-ориентированный CSS: это должно иметь значение?
Я только что нашел эту интересную презентацию о концепции "объектно-ориентированного CSS". Это кажется хорошей идеей, но презентация довольно короткая и не дает много примеров.
Мои вопросы:
- эта концепция актуальна?
- Каковы преимущества OOCSS?
- Можете ли вы предоставить мне сложные примеры "объектно-ориентированного CSS"?
Может быть, вы думаете, что это понятие не имеет значения
- Зачем?
- какой рабочий процесс (и правила) вы используете вместо этого?
10 ответов
Это актуально?
Я думаю, что это в основном название подхода, используемого автором CSS, во многом аналогично созданию руководств по стилю. Это полезно? Да. Легко ли унаследовать чужую работу OOCSS? Возможно нет.
Каковы преимущества OOCSS?
Абстрагирование стилевых атрибутов определенного компонента всегда полезно для согласованности стилей по всему сайту. Допустим, вы хотите изменить стиль границ компонентов для нового нового вида: обычно вы меняете несколько строк относительно основного стиля стиля границы.
Пример
Я создал руководство по стилю UI Developers (или словарь стилей), касающееся всех "виджетов" в нашем веб-приложении. Каждый виджет будет классифицирован в соответствии с его предполагаемым содержанием. Каждый виджет может иметь любое количество предопределенных стилей ящиков, фона и стилей. Каждый виджет также может размещать свое содержимое по-разному в зависимости от того, под какой родительский элемент он был помещен.
Это составило код вроде: <div class="free bg_neutral form_search"> используется для каждой оболочки / контейнера, причем каждый класс: "Стиль коробки, Стиль фона, Содержимое" соответственно. Разработчики, работающие над HTML / Views, могут легко переключить любой из предопределенных стилей и заменить их более подходящими. например, замена bg_neutral с bg_gradient_fff_eee вместо градиентного фона.
Я думаю, что мы сохранили бесчисленное количество строк кода CSS, потому что мы могли бы использовать взаимозаменяемые свойства в нескольких основных "виджетах", а не определять каждое уникальное воплощение каждого "виджета". Это также делает кросс-браузерное исправление намного проще, потому что вы можете самостоятельно работать со стилями "виджетов". (Большинство ошибок браузера связано с размерами ящика и положением / макетом)
По моему мнению, больше людей UI должны пройти через упражнение StyleGuide / Style Vocab при разработке и реализации внешнего интерфейса своих сайтов. Создайте последовательность в визуальных элементах, используемых на сайте. Согласованные визуальные эффекты обычно приводят к согласованному и эффективному CSS!
Надеюсь, это поможет, nd
Я не вижу никаких преимуществ для этой концепции, так как текущее определение CSS уже несколько объектно-ориентировано с его каскадированием, селекторами, подстановочными знаками и т. Д.
Они упоминают об отделении контейнера от контента, что для меня является именно тем, что CSS уже делает.
С презентацией, связанной с этим вопросом, выступила Николь Салливан, инженер по производительности в Yahoo.
На сайте Yahoo Developer Network есть видео с оригинальной презентацией и репозиторий для проекта OOCSS на github.
Слайд-шоу - это отличный набор стандартов и руководств, которым нужно следовать. Я использую их все время, ищу образцы и повторения в своих проектах, а затем делаю их на компоненты.
Навигация, Панель, Сетка, Повторитель, Карта и т. Д. Это все общие компоненты, которые я разрабатываю для каждого сайта.
У меня также есть отдельные CSS-файлы для утилит, страницы и контента. Утилиты хранят такие вещи, как мой clearfix или нормализатор полей, Page хранит общий макет сайта (верхний и нижний колонтитулы, основной), а контент - это универсальный набор правил для заголовков, абзацев, ссылок, списков и т. Д. Для всего сайта.
Преимущество заключается в возможности расширять объекты и сохранять код сухим и читаемым. Те, кто против этого, обычно либо а) ненавидят имя, либо б) никогда не использовали его. Скажем так...
пример
Каждый сайт имеет разные типы навигации. Вы можете иметь навигацию в теле заголовка, в боковой панели. Может быть, у вас даже есть вкладки или панировочные сухари на вашей странице? Вам может даже понадобиться панель инструментов для редактора форматированного текста на странице. Это где абстракция.nav вступит в игру.
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
.nav--right
{
float: right;
}
.nav--stack .nav__item
{
float: none;
}
.nav__item
{
float: left;
}
.nav__item--active .nav__link
{
font-weight: bold;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
.nav__link:hover
{
text-decoration: underline;
}
Это тот же код, который будет отображаться во всех моих элементах управления. Теперь все, что мне нужно сделать, это создать для него скины.
Кожа боковой панели
.side .nav__item
{
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}
.side .nav__link
{
padding: 12px 0;
}
Вкладки кожа
.tabs
{
border-bottom: 1px solid #aaa;
}
.tabs .nav__item
{
margin-right: 8px;
}
.tabs .nav__item--active .nav__link
{
margin-top: -2px;
position: relative;
border-bottom: 1px solid #fff;
bottom: -1px;
color: #000;
}
Главное меню Skin
.menu .nav__item--active .nav__link
{
border-radius: 2px;
color: #fff;
background-color: #007bc3;
}
.menu .nav__link
{
padding: 12px 8px;
}
Положить его вместе
Все, что я делаю, это пишу имя объекта и имя скина для атрибута класса. Это включает в себя свойства обоих.
<ul class="side nav nav--stack">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
Не паникуйте, увидев.nav_элемент и.nav_link. Большинство используют li и a, но я хотел, чтобы тег был независимым.
Я хотел бы видеть некоторую форму наследования в CSS. Полномасштабный oO? Это, вероятно, было бы излишним, но наследование уменьшило бы размер моих таблиц стилей в геометрической прогрессии.
В соответствующей заметке вы можете взглянуть на структуру таблиц стилей компаса. Смотрите также учебник для начинающих. Это выглядит интересно, хотя у меня еще не было возможности использовать его в проекте.
"Объектно-ориентированный" здесь несколько ошибочно, по крайней мере, в строгом смысле этого слова. Но руководящие принципы проектирования, которые он представляет, являются здравыми и полезными, и в некоторой степени облегчают "ломкость" стандарта CSS.
Проблемы, на которые он указывает - хрупкие проекты, большие файлы, плохое обслуживание и т. Д., Являются следствиями слишком свободного стандарта, слишком ориентированного на специальное решение и основанного на оригинальных целях проектирования, которые больше не действительны. Он правильно отмечает, что успешный дизайн требует ясной головы и большой дисциплины.
Как отметил Тор Хауген, термин "объектно-ориентированный CSS" является неправильным.
"Объектно-ориентированный CSS" - это на самом деле просто шаблон проектирования, позволяющий максимально эффективно использовать CSS, и по сути тот же подход, который Джонатан Снукс называет SMACSS.
Назовите ли вы это OOCSS или SMACSS, ключом к подходу является то, что вы создаете общие элементы пользовательского интерфейса, такие как навигационная абстракция. Эти элементы пользовательского интерфейса могут быть расширены с помощью более специфических функций путем добавления дополнительных классов к элементу и / или элементу контейнера. Или, в качестве альтернативы, вы можете добавить свои собственные пользовательские правила CSS, используя ID элемента или семантические классы.
Для реальных примеров OOCSS, проверьте платформы, такие как http://cascade-framework.com/, Scally и InuitCSS.
Дальнейшее чтение:
Похоже, модное слово говорить со мной. Как сказал Джон Раш - CSS уже является своего рода OO.