В этой статье обобщаются некоторые распространенные методы CSS, которые заложат основу для реконструкции веб-сайта. Надеюсь, вы сможете узнать что-то полезное.
1. Используйте сокращения CSS
Использование сокращений может помочь уменьшить размер CSS-файлов и облегчить их чтение. Основные правила сокращений CSS см. в разделе «Базовый синтаксис CSS».
2. Четко определите единицу измерения, если ее значение не равно 0.
Забывание определить единицы измерения — распространенная ошибка среди новичков в CSS. В HTML вы можете просто написать ;100, но в CSS вам нужно указать точную единицу измерения, например: " width:100em. Есть только два исключения, когда вы можете оставить единицу измерения неопределенной: высоту строки и значение 0. В противном случае все остальные за значениями должна следовать единица измерения. Будьте осторожны, не добавляйте пробелы между значением и единицей измерения.
3. С учетом регистра
При использовании CSS в XHTML имена элементов, определенные в CSS, чувствительны к регистру. Чтобы избежать этой ошибки, я рекомендую использовать строчные буквы для всех имен определений.
Значения class и id также чувствительны к регистру в HTML и XHTML. Если вам необходимо писать в смешанном регистре, внимательно убедитесь, что ваше определение в CSS соответствует тегам в XHTML.
4. Отмените ограничения элементов перед классом и идентификатором.
Когда вы пишете для определения класса или идентификатора элемента, вы можете опустить предыдущую квалификацию элемента, поскольку идентификатор уникален на странице и может использоваться на странице несколько раз. Нет смысла уточнять элемент. Например:
div#content { /* объявления */ }
fieldset.details { /* объявления */ }
можно записать как
#content { /* объявления */ }
.details { /* объявления */ }
Это экономит несколько байтов.
5. Значение по умолчанию
Обычно значение заполнения по умолчанию равно 0, а значение цвета фона по умолчанию прозрачно. Но значение по умолчанию может отличаться в разных браузерах. Если вы боитесь конфликтов, вы можете определить значения полей и отступов всех элементов равными 0 в начале таблицы стилей, вот так:
* {
маржа: 0;
дополнение: 0;
}