Слишком часто CSS для крупных (и второстепенных) веб-сайтов представляет собой случай раздувания и избыточности кода в учебниках, с линиями кода, которые могут похвастаться ненужным использованием элементов-квалификаторов, чрезмерно конкретными селекторами из-за излишне длинных цепочек селекторов, чрезмерной зависимостью от селекторов-потомков, когда другие Селекторы были бы более уместными, а неуместное или ненужное использование! важно. Мы все можем внедрить несколько базовых, надежных методов написания CSS, чтобы значительно улучшить удобство поддержки стилей любой организации. В конечном счете, однако, что нам действительно нужно сделать, так это структурировать таблицы стилей данного сайта, чтобы значительно увеличить масштабируемость.
Следовательно, наш подход двоякий. Во-первых, мы должны внедрить несколько важных практик для написания чистого и эффективного CSS. Во-вторых, нам нужно изучить и внедрить основные методологии все более популярных масштабируемых архитектур CSS, чтобы вывести таблицы стилей наших сайтов на другой уровень.
Я рассмотрю обе эти темы в этой и следующей статьях, но прежде чем приступить к созданию масштабируемого кода, давайте немного очистим CSS, начав с некоторых моих любимых приемов.
Несколько полезных техник
Изучение приемов рабочего процесса от других разработчиков часто очень полезно. Вот несколько моих любимых.
Стили таргетинга
Это хорошая идея, чтобы иметь метод нацеливания на стили на вашей странице. Если вы не используете такой инструмент, как панель инструментов разработчика Internet Explorer , Mozilla Firebug или Chrome Developer Tools , этот старый метод добавления схемы свойств может помочь вам быстрее увидеть нужный элемент и работать с ним:
.searchform > .searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
outline: 1px solid red
}Основанием для использования этого свойства и значений является то, что контур не добавляет к размерам элемента, как это делает рамка. Даже использование красного (или любого другого имени цвета) имеет значение. При кодировании используйте только шестнадцатеричные, rgb (a) или hsl (a) цветовые коды. Тогда вы знаете, что когда вы видите название цвета, оно предназначено исключительно для устранения неполадок. Имейте в виду, что схема не поддерживается IE8 и ниже.
Добавление тестовых стилей
Еще одна полезная практика при тестировании и устранении неполадок заключается в создании отступов для новых стилей тестирования .
.searchform > .searchsubmit {
width: 14%;
height: 25px;
background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
margin: -2px 0 0 0;
}
С отступом вы точно знаете, что стиль временный, и его легко отсканировать и найти позже. Когда вы решите, что стиль должен остаться, сделайте отступ, как и остальные постоянные стили.
Отключение Стилей
Имея хороший способ добавления новых стилей, вы можете быстро отключить их, добавив «X» к ним, поместив символ «x» перед селектором стиля или правилом стиля:
.social a {
-moz-transition: opacity 0.3s ease 0s;
x-display: block;
height: 35px;
opacity: 0.4;
}
Этот метод быстрее, чем комментирование стиля. Также легко сканировать и находить, и у вас есть стиль, если вы решите позже, что хотите сохранить его.
Руководство по очистке и оптимизации CSS
Теперь, когда у нас есть эти приемы, давайте обратим внимание на некоторые практические правила для написания чистого оптимизированного кода или для очистки чужого CSS-спагетти. Мы перейдем от макроса к микроуровню, сначала исследуя, как улучшить читаемость и семантику HTML, а затем перейдем к способам лучшей организации и сокращения количества объявлений стилей.
Макро-Оптимизировать
Легко сфокусироваться на самих объявлениях стилей, но прежде чем создавать селекторы, вы должны сделать HTML-код и сами таблицы стилей удобными для чтения.
Предоставить информацию таблицы стилей и указать структуру
С очень большими таблицами стилей, я фанат использования оглавления. Для разработчиков, плохо знакомых с данной таблицей стилей, невероятно полезно знать, какие разделы или к каким именам нужно переходить, когда им нужно найти группу стилей.
На базовом уровне я рекомендую вставить информацию о разработчике (имя и т. Д.) И дату последнего обновления в таблицу стилей. Таким образом, если возникнут вопросы о том, что в документе, текущий разработчик знает, кого задавать.
/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/
Кроме того, я рекомендую включить предварительное оглавление, чтобы другие разработчики имели представление о структуре документа и различных разделах для стилей.
/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(later in the document…)
/* =Layout */ (etc.)
Обратите внимание, что включение знака равенства (=) перед тем, как имя раздела таблицы стилей является преднамеренным, действует как флаг и облегчает поиск по документу .
Аннотировать и Гнездо
Разметка аннотаций и вложений помогает вам отслеживать начало и конец элементов, которые содержат другие элементы, и это позволяет вам быстрее идентифицировать части.
Аннотируйте div и другие основные элементы макета, которые начинаются с <!-- #id or .class name --><!-- /end #id or .class name --><!-- / #id or .class name -->
Вложение может показаться ненужным шагом, но это полезно с визуальной точки зрения и, благодаря четкому указанию визуальных уровней, также облегчает поиск проблем, таких как элементы уровня блока внутри встроенных элементов, а также неправильное закрытие и повторное открытие элементов, что может создать серьезные проблемы с компоновкой — виновники в том, что проверка часто не помогает вам найти это легко.
Вы можете увидеть разницу в следующем примере:
Перед
<body>
<div id="pagewrap">
<div id="header">
<h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Title</h2>
<p>Main content, which is so much more important than the secondary content that it makes one teary with emotion.</p>
</div>
<div id="secondarycontent">
<h3>Sidebar Title</h3>
<p>Sidebar content, which is not as important as the primary content (which is why it is in the sidebar)</p>
</div>
<div id="footer">
<p>standard copyright and footer information</p>
</div>
</body>
После
<body>
<div id="pagewrap">
<div id="header">
<h1>Website Title</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul><!-- end #header -->
<div>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Title</h2>
<p>Main content, which is so much more important than the secondary content that it makes one teary with emotion.</p>
</div><!-- end #maincontent -->
<div id="secondarycontent">
<h3>Sidebar Title</h3>
<p>Sidebar content, which is not as important as the primary content (which is why it is in the sidebar)</p>
</div><!-- end #secondarycontent -->
</div><!-- end #contentwrap -->
<div id="footer">
<p>standard copyright and footer information</p>
</div><!-- end #footer -->
</div><!-- end #pagewrap -->
</body>
Вы можете найти больше информации и советов по организации таблиц стилей в разделе « Создание эффективной семантической разметки ».
Micro-Оптимизировать
Микрооптимизация сокращает размер файла, ускоряет время загрузки страницы и поощряет лучшие практики. Вот несколько способов улучшить свой CSS на микроуровне.
Сформулируйте порядок правил
Размещение объявлений CSS в алфавитном порядке — отличный способ подготовить почву для чистого кода и уменьшить количество проблем. Почему? Потому что ваши объявления стилей будут намного проще нацеливать и определять местоположение.
Пример первый:
.login {
margin-top: 5px;
line-height: 1.5em;
padding-left: 5px;
float: right;
list-style-type: none;
width: 80px;
font-weight: bold;
border-left: 1px solid #69824d;
}
Пример второй:
.login {
border-left: 1px solid #69824d;
float: right;
font-weight: bold;
line-height: 1.5em;
list-style-type: none;
margin-top: 5px;
padding-left: 5px;
width: 80px;
}
Повышение эффективности для скорости
Длинные цепочки элементов для селекторов заставляют браузер без необходимости искать в DOM страницы, чтобы найти совпадение. Устранение квалификаторов элементов и отказ от потомков в пользу более прямых помогает ускорить процесс.
Preoptimization:
div#wrapper div#maincontent div#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
Postoptimization:
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
Подробнее об этой теме читайте в разделе « Оптимизация для улучшения времени загрузки страницы» .
ПОЦЕЛУЙ: будь проще и короток
Меньше значит больше, когда дело доходит до объявлений стилей и селекторов. Для объявлений стиля следуйте этим правилам:
- По возможности используйте сокращенные свойства (и запоминайте эти элементы при использовании сокращенного обозначения: сокращенный синтаксис свойства; порядок значений свойств, если есть; значения по умолчанию и обязательные значения свойств)
- Конденсированные значения и единицы
- Избегайте дублирующихся свойств, когда это возможно
Перед:
#sidebar {
background-color: #fff;
background-image: (bg.png);
background-position: 0 0;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #ffff00;
font-family: Georgia, serif;
font-size: 1.33em;
line-height: 1.33em;
font-weight: normal;
margin: 10px 20px 10px 20px;
padding: .1em;
}
После:
#sidebar {
background: #fff url(bg.png) repeat-x 0 0;
border: 1px solid #ff0;
font: normal 1.33em/1.33 Georgia, serif;
margin: 10px 20px;
padding: .1em;
}
Конденсировать код
Наконец, удаление нескольких строк и отступов также помогает поддерживать эффективность и скорость работы вашего сайта. При разработке CSS рекомендуется использовать несколько строк, вложения и отступы, но как только сайт будет готов к работе, минимизация CSS — лучший путь. Несколько хороших инструментов, которые уплотняют CSS — это CSS Compressor и CSS Drive .
Инструменты могут помочь, эээ … Рука
Помня об этих правилах, пока вы пишете код, вы можете избежать ошибок, которые впоследствии могут стоить вам времени и разочарований. Но не думайте, что вам придется делать все это самостоятельно, так как доступны отличные инструменты, помогающие очистить ваш код. Я думаю, что CleanCSS и Code Beautifier стоит проверить. Используйте эти инструменты для дальнейшей очистки кода, пока вы учитесь интегрировать некоторые из описанных мной подходов.