DRY (Don’t Repeat Yourself - дословно, не повторяй самого себя) - это принцип разработки программного обеспечения, который был сформулирован товарищами Andy Hunt и Dave Thomas в их книге The Pragmatic Programmer. Философия разработки кода DRY базируется на принципе "Каждый кусок знания должен иметь одно, недвусмысленное, авторитетное представление в системе." Система - значительно более широкое понятие, чем просто код. Оно включает в себя схемы баз данных, планы испытаний, различные модули и даже документацию. В простых словах, принцип DRY - это теория дизайна программного обеспечения , в которой особенное внимание уделяется важности отсутствия дублирования кода.
Каждый программист использует несколько различных принципов дизайна при выполнении своих каждодневных задач. Они помогают ему улучшать качество, производительность и удобство сопровождения программного обеспечения с помощью уменьшения избыточности кода.
Принцип DRY в кодировании CSS
В отличии от разработки программного обеспечения в вэб-дизайне отсутствуют формальные принципы или теории кодирования. Знание и понимание определенных принципов построения программного обеспечения может реально принести пользу Вам как вэб-дизайнеру/разработчику. Так, использование принципа DRY в вэб дизайне, а особенно в кодировании CSS, может значительно повысить квалификацию разработчика.
Отсутствие дублирования кода - это один из основных принципов разработки CSS. Написание чистого и оптимизированного кода CSS является ключом к разработке вэбсайтов, которые быстро загружаются и имеют меньшие требования к характеристикам канала. В случае вэбсайта с 50000 посещений в месяц, если Вы уменьшите код CSS с помощью оптимизации на 5 КВ, то в конечном счете сохраните 2.5 GB трафика за год. Результат может быть впечатляющим для вэб-сайтов с большим объемом трафика.
Существует много способов для реализации принципа DRY в Вашем коде, наиболее важные будут описаны ниже. Прежде чем приступить к описанию методов, давайте взглянем на основной синтаксис правил CSS.s
selector {
property: value;
}
Синтаксис правила CSS
Группировка селекторов
Мы можем применять множественные определения для множественных селекторов с помощью группировки селекторов CSS, которые используют одинаковые определения и группировать определения, которые используют одинаковый селектор. Повторное использование атрибутов там, где только возможно с помощью группировки элементов вместо объявлений новых стилей, имеет значительную важность. Предположим в вашей таблице стилей есть четыре уровня заголовков от h1 до h4 и все заголовки используют одинаковый размер шрифта и цвет. Обычно код CSS выглядит так:
h1 {
color: #FF0000;
font-family: Arial;
}
h2 {
color: #FF0000;
font-family: Arial;
}
h3 {
color: #FF0000;
font-family: Arial;
}
h4 {
color: #FF0000;
font-family: Arial;
}
С использованием группировки селекторов CSS этот же код может быть написан так:
h1, h2, h3, h4 {
color: #FF0000;
font-family: Arial;
}
Используйте укороченную запись свойств
Укороченная запись свойств CSS используется для сведения подобных свойств в один набор в одном определении, вместо того, чтобы использовать различные определения для каждого свойства индивидуально. Таким образом можно сократить повторение кода и сохранить место в файле CSS. Укороченная запись CSS облегчает задачу вэб-дизайнера по созданию быстро загружаемых и легких в сопровождении вэб-сайтов с меньшими усилиями.
div {
padding-top: 5px;
padding-right: 2px;
padding-bottom: 4px;
padding-left: 6px;
}
Выше приведенное правило CSS, которое используется для установки различной ширины полей для блока div может быть переписано с использованием укороченной записи CSS в более простой манере:
div {
padding: 5px 2px 4px 6px;
}
Вложенные селекторы
Мы можем задавать свойства для селекторов, которые размещены внутри других селекторов. Например, если Вы хотите сделать все подзаголовки в определенном div красными, то это можно сделать одним определением.
.contentDiv h2 {
color: #ff0000;
}
А для того, чтобы все написанное курсивом в подзаголовке отображлось синим цветом с подчеркиванием можно использовать следующий код CSS.
.contentDiv h2 em {
text-decoration: underline;
color: #0000ff;
}
Таким образом можно существенно сократить размер кода CSS и HTML.
Заключение
Для реализации принципа DRY нужно идентифицировать единственный, определяемый источник каждой единицы информации, используемой в системе и затем использовать этот источник для генерирования примений данной единицы информации. Идея заключается в том, чтобы планировать предупреждения дублирования кода, а не заниматься очисткой того, что уже было сделано. Вэб-дизайнеры, которые используют данный принцип постоянно при кодировании CSS и HTML в конечном итоге делают более управляемые и легко поддерживаемые дизайны вэб-сайтов.