Правила хорошего кода css

Принципы написания чистого CSS кода

Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее. Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.

Итак, наш подход будет заключаться в двух принципах. Во-первых, мы должны использовать базовые правила написания чистого и эффективного CSS кода. Во-вторых, нам необходимо применять различные методы и подходы для организации хорошей архитектуры кода и вывода наших таблиц стилей на новый уровень.

В этом уроке мы затронем эти темы, но перед этим давайте посмотрим на несколько примеров очистки CSS кода.

Несколько полезных методов

Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:

Быстрый доступ к элементам

Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, Mozilla Firebug или Chrome Developer Tools. Используя данные инструменты, мы можем быстро находить то, что нам нужно, и тут же менять, видя результат.

В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных — цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.

Добавление тестовых стилей

Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.

Благодаря данной технике вы сможете сразу же определить, какие свойства временные, а какие нет. Если вы решили, что запись может остаться, просто уберите отступ.

Отключение стилей

Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:

Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.

Очистка и оптимизация CSS кода

Теперь, когда мы познакомились с несколькими трюками, давайте поговорим о том, как можно очистить наш CSS код. Тут будем идти от большего к меньшему. В первую очередь, рассмотрим, как лучше написать HTML код, а затем, как написать для него эффективный стиль.

Макро-оптимизация

Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.

Формирование информации и определение структуры таблицы стилей

Если речь касается разбора таблиц стилей, то я первым делом пишу её содержание. Такая информация, как знание о существующих группах селекторов, их расположении в файле, может быть очень полезна.

В первую очередь, я рекомендую вставлять какую-то информацию о пользователе (имя, …), время последней правки файла. Данный приём может сыграть свою роль, если в будущем возникнут какие-то вопросы, связанные с этими данными.

/* информация о таблице стилей для XyZ Corp Файл создан: 09.15.2010 Последнее обновление: 06.04.2012 Автор: [name] */

Также я рекомендую писать содержание файла, чтоб вы и другие разработчики в случае необходимости смогли быстро сориентироваться.

/* Содержание - Стили ссылок - Стили для разных размеров экранов - Действия - Основной макет - Лого - Верхняя навигация - Боковая навигация - Поднавигация */ … (а у каждой отдельной секции…) /* =Верхняя навигация */

Знак “=” в последнем выражении используется исключительно для упрощения поиска отдельно взятой секции.

Аннотации и отображение вложенность

Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.

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

Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.

Микро-оптимизация

Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.

Сортирование свойств в алфавитном порядке

Сортировка CSS свойств в алфавитном порядке — это отличный способ сохранять ваш код чистым и избежать лишних проблем. Почему? Потому что нужный фрагмент можно будет быстро найти и исправить.

Увеличение эффективности кода

Длинные селекторы заставляют браузер лишний раз проходиться по 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; >

После оптимизации

Пишите просто и кратко

Чем меньше написано кода, тем эффективнее работает страница. Для определения стилей следуйте следующим правилам.

1. Используйте короткие названия CSS свойств везде, где это возможно;
2. Пишите сокращённые значения свойств;
3. Избегайте дублирования CSS свойств.

Сокращайте код

Главное, что вам нужно сделать на финальной стадии работы над стилями, — это убрать все дубликаты строк и различного рода отступы. Для рабочей версии стиля можно также убрать всевозможные комментарии. Также можно воспользоваться инструментами сжатия CSS стилей: CSS Compressor, CSS Drive.

Итог

Помните об этих правилах, когда в следующий раз будете писать CSS код. Для упрощения вашей работы можете воспользоваться специально созданными для этого инструментами. К примеру: CleanCSS. Пользуйтесь всем, чем только можно, чтоб сделать ваш код лучше.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/
Перевел: Станислав Протасевич
Урок создан: 25 Марта 2013
Просмотров: 42820
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

7 полезных советов по написанию хорошего кода CSS

Написание вашего первого кода CSS может показаться очень необычным, если вы привыкли работать с таблицами или же никогда раньше не использовали стили.

Ниже приведены 7 разных методов, которые вы можете использовать, чтобы написать правильный и чистый код CSS, а также упростить процесс написания кода и быть уверенным, что вы получите результат быстро и эффективно.

1. Начинайте с CSS Reset

Написание кода CSS может стать нетривиальной задачей, когда вам приходится писать определённый код снова и снова, просто чтобы заставить различные браузеры отображать разметку одинаково. Вот где потребуется CSS Reset . При том, что этим приёмом пользуются такие гении CSS, как E. Meyer, нет причин не сбросить все ваши браузеры « в ноль » и начать строить стили заново.

Некоторые люди говорят, что стили CSS Reset бесполезны, но когда вы привыкнете сбрасывать стили элементов, с которыми вы работаете, станет гораздо проще обеспечивать их одинаковое отображение в различных браузерах.

2. Комментарии – ваши лучшие друзья

В плане поддержания ваших таблиц стилей чистыми и легко читаемыми, комментарии – великолепный способ поддерживать их структурированными и ясными.

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

Такой способ комментирования не только сохранит ваше время при прокручивании кода, но также поможет вашим клиентам, когда вы передадите им код: они смогут легко найти нужные элементы и внести изменения сами, а не будут беспокоить вас по 5-6 раз в неделю ради простых 1-3 минутных изменений. Преимущества чистого кода CSS выходят далеко за пределы создания красиво выглядящего файла.

3. Делайте отступы в ваших правилах CSS для лучшего поиска

Когда вам нужно что-то найти среди 500 строк кода CSS, это может стать пыткой для ваших глаз. Поэтому вместо написания кода CSS в таком виде:

Вы можете сделать отступ для правил, чтобы сделать проще прокручивание файла и нахождение нужных деклараций классов и id.

4. Одно правило – одна строка… Несколько правил – несколько строк

Следуя этому простому методу, вы можете быстро навести порядок в ваших файлах CSS. Ниже вы видите два разных способа написания кода CSS. Некоторые люди стараются располагать каждое правило на новой строке, но я придерживаюсь указанного выше метода: одно правило = одна строка, а несколько правил = несколько строк.

5. Изучите (и используйте) сокращённый код

Сокращённый код CSS позволит вам ускорить процесс написания, уменьшит беспорядок в ваших таблицах стилей и позволит вам находить нужные правила гораздо быстрее. Так почему же многие люди до сих пор пишут такой длинный код CSS?

Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left .

6. Пишите код CSS в алфавитном порядке, для упрощения чтения

Этот совет пришёл мне в голову совсем недавно, и я только начинаю использовать его постоянно, когда пишу код CSS. Расположение правил в алфавитном порядке позволит вам легко найти нужную строку кода, отредактировать её и двигаться дальше.

Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size ? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.

7. Используйте понятные имена классов и ID

Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:

.wackyblueline5 < . >.leftsidesection < . >#bodyleftcurve2

Выбор правильных названий для ваших классов и ID поможет вам лучше понять, где искать тот или иной элемент в ваших файлах таблиц стилей, а также в ваших html файлах. Я бы порекомендовал использовать примерно следующие осмысленные имена, которые помогут поддерживать ясный и понятный код:

.sidebar-title < . >.postwrap < . >.main-navigation

Редакция Перевод статьи « 7 Good Tips for Writing Better CSS »

Источник