1. Используйте сокращения CSS
Использование сокращений может помочь уменьшить размер CSS-файлов и облегчить их чтение. Основные правила аббревиатур CSS приведены в разделе «Сводка общего синтаксиса аббревиатур CSS», который здесь не описывается.
2. Четко определите единицу измерения, если ее значение не равно 0.
Забывание определить единицы измерения — распространенная ошибка среди новичков в CSS. В HTML вы можете просто написать ширину=100, но в CSS вам нужно указать точную единицу измерения, например: ширина:100 пикселей ширина:100em. Есть только два исключения, в которых невозможно определить единицы измерения: высота строки и значение 0. Кроме того, за единицей должны следовать другие значения. Будьте осторожны, не добавляйте пробелы между значением и единицей измерения.
3. С учетом регистра
При использовании CSS в XHTML имена элементов, определенные в CSS, чувствительны к регистру. Чтобы избежать этой ошибки, я рекомендую использовать строчные буквы для всех имен определений.
Значения class и id также чувствительны к регистру в HTML и XHTML. Если вам необходимо писать в смешанном регистре, внимательно убедитесь, что ваше определение в CSS соответствует тегам в XHTML.
4. Отмените ограничения элементов перед классом и идентификатором.
Когда вы пишете для определения класса или идентификатора элемента, вы можете опустить предыдущую квалификацию элемента, поскольку идентификатор уникален на странице и может использоваться на странице несколько раз. Нет смысла уточнять элемент. Например:
div#content { }
fieldset.details { }
можно записать как
#содержание { }
.подробности { }
Это экономит несколько байтов.
5. Значение по умолчанию
Обычно значение заполнения по умолчанию равно 0, а значение цвета фона по умолчанию прозрачно. Но значение по умолчанию может отличаться в разных браузерах. Если вы боитесь конфликтов, вы можете определить значения полей и отступов для всех элементов равными 0 в начале таблицы стилей, вот так:
* {
маржа: 0;
дополнение: 0;
}
6. Нет необходимости повторно определять наследуемые значения.
В CSS дочерние элементы автоматически наследуют значения атрибутов родительского элемента, такие как цвет, шрифт и т. д., которые были определены в родительском элементе, и могут быть непосредственно унаследованы в дочернем элементе без повторного определения. Но имейте в виду, что браузер может переопределить ваше определение некоторыми значениями по умолчанию.
7. Недавний первый принцип
Если существует несколько определений одного и того же элемента, приоритет будет отдаваться ближайшему (минимального уровня). Например, есть этот фрагмент кода.
Обновление: набор Lorem ipsum dolor
В файле CSS вы определили элемент p и обновление класса.
п {
маржа: 1em 0;
размер шрифта: 1em;
цвет: #333;
}
.обновлять {
шрифт-вес: жирный;
цвет: #600;
}
Из этих двух определений будет использоваться class=update, поскольку class ближе, чем p. Чтобы узнать больше, вы можете ознакомиться с разделом W3C «Вычисление специфичности селектора».
8. Определения нескольких классов
Тег может одновременно определять несколько классов. Например: сначала мы определяем два стиля: первый стиль имеет фон #666, второй стиль имеет границу шириной 10 пикселей;
.one{ширина:200 пикселей;фон:#666;}
.two{border:10px сплошной #F00;}
В коде страницы мы можем вызвать вот так
Окончательный эффект отображения заключается в том, что этот div имеет фон #666 и рамку шириной 10 пикселей. Да, это возможно, вы можете попробовать.
9. Используйте селекторы потомков
Новички в CSS не знают, что использование подселекторов — одна из причин, влияющих на их эффективность. Подселекторы могут помочь вам сохранить множество определений классов. Давайте посмотрим на следующий код:
Определение CSS для этого кода:
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
Вы можете заменить приведенный выше код следующим методом
Определение стиля:
#subnav { }
#subnavli { }
#subnav а { }
#subnav .sel { }
#subnav .sel a { }
Используйте подселекторы, чтобы сделать ваш код и CSS более краткими и легкими для чтения.
10. Не нужно добавлять кавычки в путь к фоновому изображению.
Чтобы сэкономить байты, я рекомендую не заключать путь к фоновому изображению в кавычки, поскольку кавычки не обязательны. Например:
фон: URL (изображения
маржа: 0 авто;
}
Но IE5/Win не может правильно отобразить это определение. Для решения этой проблемы мы используем очень полезный прием: используем атрибут text-align. Так:
тело {
выравнивание текста: по центру;
}
#сворачивать {
ширина: 760 пикселей;
маржа: 0 авто;
выравнивание текста: по левому краю;
}
Правило text-align:center; первого body определяет, что все элементы body в IE5/Win центрируются (другие браузеры просто центрируют текст), а второе text-align:left; предназначено для центрирования текста в #warp; левый.
15. Импортируйте и скройте CSS
Поскольку старые браузеры не поддерживают CSS, распространенным подходом является использование метода @import для скрытия CSS. Например:
@import URL (main.css);
Однако этот метод не работал для IE4, из-за чего у меня некоторое время болела голова. Позже я написал это так:
@import main.css;
Таким образом, CSS можно скрыть в IE4. Ха-ха, это тоже экономит 5 байт. Если вы хотите узнать подробное объяснение синтаксиса @import, вы можете увидеть здесь «диаграмму фильтра CSS Centricle».
16. Оптимизация для IE
Иногда вам нужно определить некоторые специальные правила для ошибок браузера IE. Здесь слишком много хаков CSS, я использую только два из них, независимо от того, будет ли Microsoft лучше в будущей бета-версии IE7. С поддержкой CSS оба метода будут лучше. самый безопасный.
1. Метод аннотации
(а) Чтобы скрыть определение CSS в IE, вы можете использовать дочерний селектор:
html>body p {
}
(б) Следующий метод записи понятен только браузеру IE (скрыт от других браузеров)
* HTML п {
}
(c) Иногда вы хотите, чтобы IE/Win был активен, но IE/Mac был скрыт, вы можете использовать трюк с обратной косой чертой:
* HTML п {
декларации
}
2. Метод условных комментариев
Другой метод, который, на мой взгляд, более проверенный временем, чем CSS Hacks, — это использование условных комментариев Microsoft приватного атрибута (условных комментариев). Используя этот метод, вы можете определить некоторые стили отдельно для IE, не затрагивая определение основной таблицы стилей.
17. Советы по отладке. Насколько велики слои?
При отладке ошибок CSS нужно действовать как пишущая машинка и анализировать код CSS построчно. Обычно я определяю цвет фона для рассматриваемого слоя, чтобы было очевидно, сколько места занимает этот слой. Некоторые люди предлагают использовать границу, что в целом возможно, но проблема в том, что иногда граница увеличивает размер элементов, а border-top и boeder-bottom уничтожают значение вертикального поля, поэтому безопаснее использовать фон.
Еще одно свойство, которое часто вызывает проблемы, — это контур. Контур выглядит как Boeder, но не влияет на размер и положение элемента. Лишь несколько браузеров поддерживают атрибут Outline, мне известны только Safari, OmniWeb и Opera.
18. Стиль написания CSS-кода
При написании кода CSS у каждого свои привычки в отношении отступов, разрывов строк и пробелов. После постоянной практики я решил принять следующий стиль письма:
селектор1,
селектор2 {
свойство: стоимость;
}
При использовании определений объединения я обычно пишу каждый селектор на отдельной строке, чтобы их было легче найти в файле CSS. Добавьте пробел между последним селектором и фигурными скобками {. Также напишите каждое определение на отдельной строке. Точку с запятой следует ставить непосредственно после значения атрибута. Не добавляйте пробелы.
Я привык добавлять точку с запятой после каждого значения атрибута. Хотя правила позволяют не ставить точку с запятой после последнего значения атрибута, если вы хотите добавить новый стиль, легко забыть добавить точку с запятой и вызвать ошибку, так что вы все равно добавите ее.
Наконец, закрывающая скобка } записывается в отдельной строке.
Пробелы и разрывы строк облегчают чтение.
