Реферат: Памятка по CSS
Тестируйте различные размеры шрифта
"Продвинутые" браузеры типа Mozilla и Opera позволяют менять размер шрифта вне зависимости от единиц, в которых он задан. У некоторых пользователей непременно шрифты будут настроены так, что их размер в браузере окажется меньше или больше вашего. Пытайтесь оптимизировать ваш код под максимально возможный диапазон размеров шрифта.
Не забывайте о прописных и строчных буквах
Некоторые броузеры строго относятся к регистру букв. Если вы назвали свой класс "homePage", старайтесь и в стилевых таблицах использовать в точности такое же имя, так как в строгих броузерах (таких как Mozilla) имя "homepage" не эквивалентно "homePage".
Тестируйте, включив стили в код страницы; публикуйте в Сети, убрав стили во внешний файл.
Работая со стилями, размещёнными в HTML-коде страницы, вы не столкнетесь с возможными ошибками при тестировании, связанными с кэшированием. Это особенно важно при работе с некоторыми браузерами на Mac-платформе. Но не забудьте перед переносом сайта в сеть вынести все стили во внешний файл и подключить его через @import или <link>.
Работая над ошибками позиционирования, добавьте блокам чёткие границы
Универсальное правило типа div {border: solid 1px #f00;} может сослужить огромную службу при поиске ошибок позиционирования. Но добавив границы для отдельных элементов, вы сможете точно определить места, где блоки налазят друг на друга или же где появляется лишнее пустое пространство, что не всегда легко обнаружить.
Не используйте одинарных кавычек в описаниях путей для изображений
Задавая путь к фоновому изображению, откажитесь от навязчивого желания заключить его в кавычки. В них нет необходимости, кроме того, IE5 для Mac на этих кавычках просто заклинит.
Не подключайте пустые внешние файлы стилей в надежде заполнить их "когда-нибудь в будущем"
IE5 для Mac заклинит на пустом файле, и время загрузки страницы возрастёт. Вместо этого поместите в файл хотя бы одно стилевое правило (или даже просто комментарий) - и MacIE снова вернется к жизни.
Кроме того, есть некоторые аспекты теории, которые не относятся напрямую к функциональности вёрстки, но, тем не менее, их следует соблюдать при разработке:
Упорядочьте свой CSS файл
Сопровождайте каждую группу стилевых правил своим комментарием, группируйте сходные по смыслу селекторы, определите для себя правила наименования селекторов и следуйте им неукоснительно, визуально "отбивайте" селекторы пробелом (рекомендуем использовать именно пробел, а не табуляцию - это условие кроссплатформенности) и соблюдайте порядок свойств.
Именуйте классы и идентификаторы, исходя из их назначения, а не внешнего вида
Создав класс .smallblue и решив впоследствии поменять в нём текст на большой и красный, вы тем самым перечеркнёте смысл его названия. Вместо этого используйте классы типов .copyright и .pullquote. (опираясь на функциональное назначение класса)
Полагайтесь на CSS-фильтры лишь как на самое последнее средство
CSS-хаки и фильтры позволяют выборочно применять стили (или не применять - и такое бывает) к различным элементам. Избегайте применения их по любому поводу, пытайтесь найти более кроссбраузерные решения. Это порой здорово сохраняет нервы и время. На всякий случай вот огромный список CSS-фильтров.
Совмещайте селекторы
Чем легче CSS-файл, тем меньше требуется времени на его загрузку. По возможности группируйте селекторы, полагайтесь на наследование свойств, и уменьшайте объем текста, используя короткую запись свойств.
Применяя методы замены изображений, не забывайте о доступности
Классический метод замены изображения "FIR" создает проблемы при чтении страниц голосовыми браузерам, и в случаях, когда пользователь отключил загрузку изображений. Однако этому методу есть альтернативы.