CSS – это язык, который не трудно освоить. Но если Вы используете его для небольшого проекта, он может быть трудно управляем. В этой статье я расскажу Вам несколько советов для написания хорошего и управляемого CSS кода.
Совет 1. – Глобальный сброс.
Глобальные сбросы – это удаление стандартных значений элементов в HTML. Не используйте глобальный сброс для каждого отдельного элемента. Это лучше всего использовать для всех элементов сразу. Использование сброса сразу, позволяет Вам сэкономить кучу времени, не нужно описывать параметры для каждого элемента. При описании каждого элемента, скорость загрузки страницы падает во много раз, так как браузер загружает сразу весь файл целиком.
Не рекомендуется:
body { margin:0; padding:0; } p { margin:0; padding:0; } h1 { margin:0; padding:0; }
Рекомендуется:
html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } ul { list-style:none }
Совет 2. — Не нужно использовать хаки для IE.
Хотя CSS хаки позволяют единообразно отображать вид web-страницы в более старых версиях браузеров, как Internet Explorer 5.5, Internet Explorer 6. Использование хаков может привести к неправильному отображению страницы в новых версиях Internet Explorer. Для этого я рекомендую использовать условные операторы, а не применять хаки для конкретной версии Internet Explorer. Например, с помощью следующих строк кода, расположенных в head>, будут загружать файл ie-styles.css только тогда, когда пользователь использует Internet Explorer 6 или ниже.
Совет 3. — Используйте осмысленные имена для идентификаторов и классов.
Предположим, что Вы определили боковую панель стилей с помощью класса leftbox и после применили этот же класс для правого блока. Будет ли иметь смысл таких действий? Вы должны задавать классы и идентификаторы со смыслом. Это позволит Вам быстро и легко изменять стили в будущем. (Вы ж не хотите оставлять дизайн вечным?)
Совет 4. — Использование CSS наследования.
Не используйте одни и те же значения для разных элементов одного класса или идентификатора. Это увеличит размер CSS файла и соответственно увеличит загрузку web-страницы.
Не рекомендуется:
#container li{ font-family:Georgia, serif; } #container p{ font-family:Georgia, serif; } #container h1{ font-family:Georgia, serif; }
Рекомендуется:
#container{ font-family:Georgia, serif; }
Совет 5. – Объединяйте несколько каталогов.
Вы можете объединить несколько селекторов CSS в один, если у них есть общие определения стиля. Это сэкономит ваше время и уменьшит размер CSS файла.
Не рекомендуется:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
Рекомендуется:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
Совет 6. – Использовать сокращенную запись.
Использование сокращенного вывода свойств позволяет уменьшить CSS код и размер CSS файла. Сокращенную запись можно использовать для margin, padding, border, font, background , а также для цветовых значений.
Не рекомендуется:
li { font-family:Arial, Helvetica, sans-serif; font-size: 20px; line-height: 16px; padding-top:5px; padding-bottom:10px; padding-left:5px; }
Рекомендуется:
li{ font: 20px/16px Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }
Совет 7. — Организация CSS кода.
При написании CSS кода в определенном порядке будет легче найти что-нибудь позднее и сэкономить кучу времени на поиске конкретного стиля. Ниже приведен пример организации CSS кода.
/*————————- CSS сброс ————————-*/ /*————————- Общие классы ————————-*/ /*————————- Стили слоя ————————-*/ /*————————- Конкретные стили ————————-*/
Совет 8. — Сделать CSS код читаемым.
При отображении кода читаемым, будет легче находить и обновлять стили. Как по мне лучше всего отображать стили в новой линии, но некоторые программисты с этим не согласны. Так, что сделаем вывод, каждый должен выбрать лучший для него способ.
/*———————— Новый стиль в новой линии ———————*/ div { background-color:#3399cc; color:#666; font: 20px/16px Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; } /*———————— Все стили в одну линию ———————*/ div{ background-color:#3399cc; color:#666; font: 20px/16px Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
Совет 9. – Добавление надлежащих комментариев.
Комментарии могут быть использованы для отделения различных разделов CSS кода.
/*——————— Вверх ——————*/ #header { height:145px; position:relative; } #header h1 { width:324px; margin:45px 0 0 20px; float:left; height:72px; } /*——————— Основной контент ——————*/ #content { background:#fff; width:650px; float:left; min-height:600px; overflow:hidden; } #content .posts { overflow:hidden; } #content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; } /*——————— Низ ——————*/ #footer{ clear:both; padding:50px 5px 0; overflow:hidden; } #footer h4 { color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:16px; }
Совет 10. – Писать свойства в алфавитном порядке.
Это еще один способ для облегчения поиска при редактировании стилей. На первый взгляд это покажется сложным, но по мере работы Вы увидите плюсы. Вы всегда будете знать, где примерно находиться тот элемент, какой Вы ищите. Чаще всего этот способ применяют только для описания свойств определенных классов или идентификаторов.
div{ background-color:#3399cc; color:#666; font:20px/16px Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
Совет 11. — Использование внешних таблиц стилей
Припустим, что у Вас сайт состоит из 100 страниц. На каждой странице написаны стили. Вы хотите изменить дизайн сайта. Для этого Вам необходимо на каждой странице сайта изменять стиль. Сколько времени это может занять? Я думаю довольно долго. Я рекомендую использовать внешние таблицы стилей. Размещая CSS во внешнем файле, Вы сможете легко изменить стиля для всех страниц одновременно.
Не рекомендуется:
#container{ .. } #sidebar{ .. } или
Рекомендуется:
Совет 12. – Разбивать CSS на нескольео файлов.
Если Вы работаете над большим проектом, который имеет множество модулей и стилей, лучше всего использовать несколько таблиц стилей. Этот метод позволит Вам легко организовать Ваш код. Вы наверное подумали: «Это надо прикреплять кучу CSS файлов к странице?» Да Вы конечно правы при этом будет больше HTTP запросов и это приведет к уменьшению скорости загрузки страницы. В этом случае к нам придет в помощь свойство @import, которое позволяет загружать дополнительные стили в сам CSS файл. Этот способ не замедляет загрузку страниц сайта. Вот так это выглядит.
@import "style/css/reset.css"; @import "style/css/typography.css"; @import "style/css/layout.css";
Совет 13. — Сжатие CSS код
После завершения работы над сайтом, Вы можете использовать CSS компрессор. Компрессор позволит Вам уменьшить размер CSS файла и увеличить загрузку сайта. Для этих целей я использую этот CSS компрессор.
14. Создавайте свои CSS фреймворки.
Когда Вы работаете над несколькими проектами одновременно, легче всего использовать CSS фпеймворки. Это позволяет Вам уменьшить время создания стилей для сайтов. Почему я рекомендую использовать Фреймворки? Если Вы заметите, при создании любого сайта Вы используете одни и те же стили, классы и идентификаторы. Для облегчения работы, Вы можете создать уникальный CSS файл, который будет подходить для всех Ваших проектов. Это и есть так называемый Фреймворк.
И последний совет.
Не усложняйте себе жизнь во время работы над любым проектом. Создайте один, но очень хороший фреймворк со всеми вышеперечисленными советами! Хотя это может занять некоторое время, но Вы это время сэкономите в будущем.
No related posts.