Как определить «объект» в OOCSS?
Объекты аналогичны классам в JAVA и сохраняют характеристики объектно-ориентированного программирования.
Объект CSS состоит из 4 частей:
Может быть HTML одного или нескольких узлов DOM.
Объявление стиля CSS, начиная с имени класса узла-оболочки.
Аналогично фоновым изображениям и компонентам спрайтов для отображения и
Поведение JavaScript, прослушиватель или метод, связанный с объектом
Это может сбивать с толку, поскольку каждый класс CSS не обязательно является отдельным объектом, но может быть компонентом класса-оболочки. например:
<div class="мод">
<div class="внутренний">
<div class="hd">Заблокировать голову</div>
<div class="bd">Тело блока</div>
<div class="ft">Блок-нога</div>
</div>
</div>
Объект представляет собой модуль с модом класса. Включает 4 узла компонентов (не могут быть независимыми от модуля, включая 2 блока, внутренний и корпус, и два дополнительных блока, голову и ногу)
Как OOCSS повышает производительность?
OOCSS имеет двойной выигрыш в производительности:
Код CSS с возможностью повторного использования, требующий очень мало кода CSS, что означает:
Меньшие файлы, что приводит к более быстрой передаче
Поскольку доля кода CSS, вызываемого на страницах сайта, увеличивается, ожидается, что он будет повторно использоваться или кэшироваться браузером.
Меньше перерисовок и вычислений макета в браузере.
На одной странице, чем больше правил CSS используется повторно, тем меньше времени на расчеты механизм рендеринга тратит на «вычисленные значения».
Добавленные вручную «расширяющие» классы переопределяют меньшее количество правил, что опять-таки означает, что движок делает меньше усилий для применения правил.
Хотите использовать ID для стилизации контента?
Это «халява» производительности, когда вы повторно используете объект на той же странице (или на том же сайте, оба хорошо кэшируются). Использование ID для написания стилей можно использовать только один раз на одной странице. @cgriego (twitter) Я сравнил это с синглтонами и считаю это очень точным. Могут возникнуть ситуации, когда вы захотите использовать идентификаторы для определения стилей, например, для очень специфических меню заголовков. В этом случае вы можете использовать идентификаторы для изоляции специальных элементов и гарантировать, что код здесь не влияет на другие части сайта. Подумайте дважды, прежде чем выбирать идентификатор вместо класса. По мере роста вашего сайта очень трудно предсказать, что другие люди будут делать с HTML, созданным на основе вашего CSS. Если у вас есть выбор, подумайте о масштабируемости, насколько это возможно.
Я подумываю удалить идентификаторы из головы, тела и стопы шаблона. У некоторых людей может быть несколько домашних зон. Несколько верхних и нижних колонтитулов на сайте угадать труднее, но я готов поспорить, что найдутся дизайнеры, которые так думают, поэтому идентификаторы, скорее всего, исчезнут (не все так гладко, читайте исходную статью: у кого-то может быть несколько основных областей контента. Несколько Верхние и нижние колонтитулы сайта представить сложнее, но я готов поспорить, что найдется дизайнер, который сможет придумать что-то подобное, поэтому идентификаторы, скорее всего, исчезнут.).
С другой стороны, ID-хуки отлично подходят для связывания. Поместите их в HTML, но не используйте для написания стилей.
Источник: 99css