Контакты RSS 2.0

Разделы Сайта:

Кубтеле - о компании
Инструменты SEO
FreeBSD
Администрирование
Centos администрирование
Windows администрирование
Программирование для web

Аккаунт

Популярное:

Материалы по web программированию › Объектно-ориентированный CSS (OOCSS)
Приходилось ли Вам когда-нибудь слышать фразу “Content is a King” (главное - содержание)? Это фраза говорит о том, что привлекает посетителей на сайт.

OOCSSОднако из своего личного опыта веб-разработчика, кто-то может сказать, что “Speed is King” (главное - скорость). Я начинаю находить всё больше и больше смысла в этой фразе. К сожалению, многие разработчики не уделяют внимания производительности CSS, они сосредотачивают свои усилия на производительности javascript.

В этом уроке я представлю Вам концепцию объектно-ориентированного CSS.

Принципы OOCCS.

Как и в любом подходе, основанном на использовании объектов, назначение OOCSS – увеличить повторное использование кода и, в конечном счёте, получить более производительные и эффективные стили, которыми легче управлять. OOCSS основан на двух главных принципах.

Отделение структуры от видов.

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

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

Вот CSS код до:
#element1 {
	width: 352px;
	height: 41px;
	padding: 11px;
	border: dotted 2px black;
	background: linear-gradient(#222, #321);
	box-shadow: red 1px 1px 3px;
}

#element2 {
	width: 422px;
	overflow: hidden;
	border: dotted 2px black;
	background: linear-gradient(#222, #321);
	box-shadow: red 1px 1px 3px;
}

#element3 {
	width: 350px;
	min-height: 100px;
	border: dotted 2px black;
	background: linear-gradient(#222, #321);
	box-shadow: red 1px 1px 3px;
}


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

После небольшого планирования мы можем абстрагироваться от общих CSS стилей и получить в итоге что-то в этом роде:
.element1 {
	width: 352px;
	height: 41px;
	padding: 11px;
}

.element2 {
	width: 422px;
	overflow: hidden;
}

.element3 {
	width: 350px;
	min-height: 100px;
}

.common {
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: red 2px 2px 5px;
}


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

Отделение контейнеров от содержания.

Второй принцип OOCSS – отделение контейнеров от их содержания. Чтобы показать, почему это важно, взгляните на следующий CSS:
#sidebar h3 {
	font-family: sans-serif;
	font-size: 10px;
	line-height: 2;
	color: black;
	text-shadow: red 2px 2px 4px;
}


Эти стили будут применены к любому заголовку третьего уровня, который является потомком элемента #sidebar. Но что, если мы хотим применить в точности такие же стили к заголовку третьего уровня в футере, за исключением размера шрифта и тени?

Тогда нам придётся делать что-то наподобие этого:
#sidebar h3, #footer h3 {
	font-family: sans-serif;
	font-size: 10px;
	line-height: 2;
	color: black;
	text-shadow: red 2px 2px 4px;
}

#footer h3 {
	font-size: 8px;
	text-shadow: red 1px 1px 2px;
}


Или мы могли бы кончить чем-то ещё хуже:
#sidebar h3 {
	font-family: sans-serif;
	font-size: 10px;
	line-height: 2;
	color: black;
	text-shadow: red 2px 2px 4px;
}

#footer h3 {
	font-family: sans-serif;
	line-height: 2;
	color: black;
	font-size: 8px;
	text-shadow: red 1px 1px 2px;

}


Сейчас мы без надобности дублируем стили и не осознаём этого (или нас это просто не волнует). Используя OOCSS, мы бы выделили общие свойства элементов в отдельные модули в виде классов, которые можно применять ко сколь угодному количеству элементов сколь угодно раз.

Стили в предыдущем примере не могут быть повторно использованы, т.к. они зависят от родительского контейнера. Когда же мы используем классы, то можем пользоваться ими где угодно и сколько угодно раз, независимо от структуры документа.

Преимущества OOCSS.

- более быстрые веб-сайты (здесь всё понятно – если у Вас меньше стилей, то они соответственно занимают меньше места на диске и быстрее загружаются браузером)

- управляемые стили (вместо постоянно растущих стилей, Вы получите легко управляемые странички с помощью CSS-классов)

Заблуждения о OOCSS.

- Вы всё ещё можете использовать id (хоть принципы объектно-ориентированного CSS и предполагают использование классов, Вы можете пользоваться id-селекторами для выделения чего-то уникального)

- работа с меньшими проектами (не воспринимайте OOCSS как правило, которым нужно пользоваться при любых обстоятельствах, оно может меняться, в зависимости от объёма проекта).

Как пользоваться OOCSS?

- избегайте родительских селекторов (например, .class h2)

- избегайте id как средства для стилизации страницы

- избегайте приклеивания классов к html-элементам в стилях (например, div.footer или h1.main)

- кроме некоторых случаев, не используйте !important

- используйте CSS grids

Заключение.

Я думаю, что OOCSS имеет яркое будущее, а также что всем разработчикам следует внедрить эту концепцию в свои проекты. Это поможет создавать веб-страницы быстрее, эффективнее и сделать их проще в управлении.
скачать dle 10.3фильмы бесплатно
Добавил: admin › 31-12-2014, 11:44
› 0 комментария › печатькатегория
Другие новости по теме
  • 7 способов как ускорить работу сайта
  • Как использовать псевдо-элементы :before и :after в CSS
  • HTML и CSS для IPhone
  • Advanced CSS
  • Форум Траст

  • Кубтеле 350000, Россия, Краснодарский край, , город Краснодар,улица Айвазовского, д. 94, корп. А
    Продвижение сайтов,Регистрация доменов,Компьютерная системная интеграция
    8(861) 299-02-62, +7(903) 449-666-8