Принципы написания чистого CSS кода
Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее... Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.
Итак, наш подход будет заключаться в двух принципах. Во-первых, мы должны использовать базовые правила написания чистого и эффективного CSS кода. Во-вторых, нам необходимо применять различные методы и подходы для организации хорошей архитектуры кода и вывода наших таблиц стилей на новый уровень.
В этом уроке мы затронем эти темы, но перед этим давайте посмотрим на несколько примеров очистки CSS кода.
Несколько полезных методов
Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:
Быстрый доступ к элементам
Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, 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 }
В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных - цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.
Добавление тестовых стилей
Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.
.searchform > .searchsubmit { width: 14%; height: 25px; background: transparent url(images/icon_magnify.png) 0 0 no-repeat; margin: -2px 0 0 0; }
Благодаря данной технике вы сможете сразу же определить, какие свойства временные, а какие нет. Если вы решили, что запись может остаться, просто уберите отступ.
Отключение стилей
Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:
.social a { -moz-transition: opacity 0.3s ease 0s; x-display: block; height: 35px; opacity: 0.4; }
Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.
Очистка и оптимизация CSS кода
Теперь, когда мы познакомились с несколькими трюками, давайте поговорим о том, как можно очистить наш CSS код. Тут будем идти от большего к меньшему. В первую очередь, рассмотрим, как лучше написать HTML код, а затем, как написать для него эффективный стиль.
Макро-оптимизация
Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.
Формирование информации и определение структуры таблицы стилей
Если речь касается разбора таблиц стилей, то я первым делом пишу её содержание. Такая информация, как знание о существующих группах селекторов, их расположении в файле, может быть очень полезна.
В первую очередь, я рекомендую вставлять какую-то информацию о пользователе (имя, …), время последней правки файла. Данный приём может сыграть свою роль, если в будущем возникнут какие-то вопросы, связанные с этими данными.
/* информация о таблице стилей для XyZ Corp Файл создан: 09.15.2010 Последнее обновление: 06.04.2012 Автор: [name] */
Также я рекомендую писать содержание файла, чтоб вы и другие разработчики в случае необходимости смогли быстро сориентироваться.
/* Содержание - Стили ссылок - Стили для разных размеров экранов - Действия - Основной макет - Лого - Верхняя навигация - Боковая навигация - Поднавигация */ … (а у каждой отдельной секции…) /* =Верхняя навигация */
Знак “=” в последнем выражение используется исключительно для упрощения поиска отдельно взятой секции.
Аннотации и отображение вложенность
Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.
Аннотации формируются с помощью следующих выражений: <!-- #id или .class name --> <!-- /end #id или .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>
Микро-оптимизация
Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.
Сортирование свойств в алфавитном порядке
Сортировка CSS свойств в алфавитном порядке - это отличный способ сохранять ваш код чистым и избежать лишних проблем. Почему? Потому что нужный фрагмент можно будет быстро найти и исправить.
Пример 1
.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; }
Пример 2
.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-у и искать совпадения. Более конкретизированные названия селекторов позволяют избежать данную проблему.
Перед оптимизацией
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; }
После оптимизации
#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 свойств.
До
#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 Compressor, CSS Drive.
Итог
Помните об этих правилах, когда в следующий раз будете писать CSS код. Для упрощения вашей работы можете воспользоваться специально созданными для этого инструментами. К примеру: CleanCSS. Пользуйтесь всем, чем только можно, чтоб сделать ваш код лучше.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/K7CZ2h6pH_c/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.