CSS — это язык, который использует почти каждый разработчик. Хотя это язык, который мы подчас воспринимаем как должное, он мощный и имеет множество нюансов, которые могут помочь (или повредить) Вашим проектам. Вот тридцать лучших техник, CSS, которые позволят вам корректно использовать CSS и избежать некоторых дорогостоящих ошибок.
1. Сделайте css код доступным для чтения
Читаемость вашего CSS кода невероятно важна, хотя большинство людей не понимают, почему это важно. В основном читаемость вашего CSS кода позволяет гораздо быстрее и легче найти нужные элементы в будущем. Кроме того, вы никогда не знаете, когда, возможно, понадобиться взглянуть на ваш код позже.
При написании CSS, большинство разработчиков, относятся к одной из двух групп.
Группа 1: Все на одной строке
|
1 |
.someDiv { background: red; padding: 2em; border: 1px solid black; } |
Группа 2: Каждый стиль получает свою собственную строчку
|
1 2 3 4 5 |
.someDiv { background: red; padding: 2em; border: 1px solid black; } |
Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.
2. Держите свой css код в соответствии
Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.
Подумайте о таких вещах, как использовать или нет подчеркивания и тире в вашем ID и именах классов, и в каких случаях их использовать. Когда вы начнете создание своих собственных стандартов CSS, вы станете гораздо более опытными.
3. Начните с Framework
Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.
Многие дизайнеры имеют свои собственные Framework’и, которые они создали с течением времени, и это тоже отличная идея. Это помогает сохранить последовательность в Framework проектах.
Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.
Если вы только знакомитесь с CSS, я лично рекомендую, чтобы вы оставались в стороне от этих Framework по меньшей мере год. В противном случае, вы будете только путать себя. Учиться CSS … затем срезать углы!
4. Используйте Сброс
Большинство CSS основ имеют встроенный сброс, но если вы не собираетесь использовать что-то одно, то, по крайней мере, рассмотрите вопрос об использовании сброса. Сброс по существу устраняет несоответствия браузера, такие как высота, размеры шрифта, поля, заголовки и т.д. сброс макета позволяет смотреть последовательно во всех браузерах.
MeyerWeb является популярным сбросом вместе с разработчиком сбросов Yahoo. Или вы всегда можете создать собственный сброс.
5. Организуйте стиль с нисходящей структурой
Всегда имеет смысл заложить ваш стиль в виде, который позволяет вам быстро найти части вашего кода. Я рекомендую форматом сверху вниз, который охватывает стили, как они указаны в исходном коде. Таким образом, пример стиля может быть сделан следующим образом:
Обобщенные классы (body, a, p, h1 и т.д.)
#Header
#NAV-меню
#main-content
Не забывайте комментировать каждый раздел!
|
1 2 3 4 5 6 7 |
/****** main content *********/ styles goes here... /****** footer *********/ styles go here... |
6. Смешивайте элементы
Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш H1, H2 и Н3 элементы имеют одни и те же шрифт и цвет:
|
1 |
h1, h2, h3 {font-family: tahoma, color: #333} |
Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h1 { size: 2.1em}) в конце таблицы стилей.
7. Создайте сначала HTML код макета
Многие дизайнеры создают свои CSS и в то же время создают HTML. Представляется логичным создать их одновременно, но на самом деле вы сэкономите еще больше времени, если вы сначала создадите HTML макет. Смысл этого метода состоит в том, что вы знаете все элементы макета вашего сайта, но вы не знаете, какой CSS вам нужно применить с вашим дизайном. Создание первым макета HTML позволяет наглядно представить всю страницу в целом, и позволяет вам думать о своем CSS в более целостном аспекте, сверху вниз.
8. Используйте нескольких классов
Иногда бывает полезно добавить несколько классов для одного элемента. Давайте предположим, что у вас есть
|
1 |
<div class="box right"></div> |
Вы можете добавить сколько угодно классов (разделенных пробелами) в любой декларации.
Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.
Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!
9. Используйте правильный тип документа
Декларация типа документа (doctype) имеет значение в вопросах наличия или отсутствия разметки и CSS. В самом деле, весь внешний вид вашего сайта может сильно измениться в зависимости от DOCTYPE, который вы заявляете.
Узнайте больше о том, какие типы документа используются на List Apart.
10. Используйте сокращения
Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:
|
1 2 3 4 5 |
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px; } |
Вы можете комбинировать эти стили в одной строке, например так:
|
1 2 3 |
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively. } |
Если вам нужна дополнительная помощь, вот всеобъемлющее руководство по свойствам CSS сокращений.
11. Оставляйте Ваши комментарии в CSS коде.
Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:
|
1 |
/* Here's how you comment CSS */ |
12. Понимайте разницу между блочными и строчными элементами
Блочные элементы являются элементами, которые четко занимают каждую строку после их объявления, охватывают всю ширину свободного пространства. Строчные элементы занимают лишь столько места, сколько им нужно, и не перескакивают на новую строку после использования.
Вот списки элементов, которые могут быть строчными или блочными:
|
1 |
span, a, strong, em, img, br, input, abbr, acronym |
И блочные элементы:
|
1 |
div, h1...h6, p, ul, li, table, blockquote, pre, form |
13. Отсортируйте свойства в алфавитном порядке.
Хотя это скорее легкомысленный отзыв, он может пригодиться для быстрого сканирования.
|
1 2 3 4 5 6 7 8 9 |
#cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; } |
Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!
14. Используйте CSS Компрессоры
CSS компрессоры с помощью CSS уменьшают размер файла путем удаления строк, пробелов и сочетания элементов. Эта комбинация может значительно уменьшить размер файлов, что ускоряет загрузку браузером. Оптимизатор CSS и CSS компрессор — два отличных онлайн инструмента, которые могут уменьшить CSS.
Следует отметить, что сокращение вашего CSS может обеспечить увеличение производительности, но вы потеряете часть читаемости вашего CSS.
15. Исползуйте классы Generic
Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).
Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.
|
1 2 3 4 |
.left {float:left} .right {float:right} <div id="coolbox" class="left">...</div> |
Таким образом, вам не нужно постоянно добавлять «float: left», чтобы все элементы, которые необходимы, всплыли.
16. Используйте «Margin: 0 auto» для центрирования
Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать
|
1 |
margin: 0 auto; // top, bottom - and left, right values, respectively. |
для центровки Div-а абзацев и других элементов в макете.
17. Не всегда оборачивайте элементы в DIV
Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль
|
1 |
<div class="header-text"><h1>Header Text</h1></div> |
Иногда может показаться, что легче просто создать уникальные стили элементов, как в примере выше, но вы начнете наводить беспорядок в вашем CSS. Это бы прекрасно работало:
|
1 |
<h1>Header Text</h1> |
Тогда вы сможете легко добавлять стиле h1, вместо родительского Div.
18. Используйте Firebug
Если вы еще не загрузили Firebug, то остановитесь и сделайте это. Серьезно. Это небольшой инструмент, который должен иметь любой веб-разработчик. Среди многих функций, которые поставляются с расширениями Firefox (отладки JavaScript, HTML проверить, найти ошибки), можно также визуально проверить, изменять и редактировать CSS в режиме реального времени. Вы можете узнать больше о том, что делает Firebug на официальном сайте Firebug.
19. Меньше Hack
Избегайте использования хаков, если это возможно. Конечно, дизайн должен выглядеть одинаково во всех браузерах, но использование только хаков делает ваши дизайны трудно поддерживаемыми в будущем. Кроме того, использование сброса файла (см. № 4) может устранить почти все неровности между браузерами.
20. Умеренно используйте абсолютное позиционирование
Абсолютное позиционирование является удобным аспектом CSS, который позволяет вам определить, где именно элемент должен быть расположен на странице в точном пикселе. Однако из-за игнорирования абсолютного позиционирования другими элементами на странице, макеты могут получить довольно “корявыми”, если есть несколько абсолютно позиционируемых бегающих элементов в макете.
21. Используйте Text-transform
Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:
|
1 |
text-transform: lowercase; |
Теперь все буквы в заголовке будут строчными по умолчанию. text-transform позволяет вам изменить ваш текст (первая буква заглавной, все буквы заглавной или строчными буквами).
22. Не используйте отрицательные поля, чтобы скрыть h1
Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh1 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.
г-Cutts прямо просит избегать скрытия текста Вашего логотипа из CSS. Просто используйте Alt тега. Хотя многие утверждают, что вы все еще можете использовать CSS, чтобы скрыть тег H1 пока h1 тоже, что и текст логотипа, я предпочитаю подстраховаться на всякий случай.
23. Проверьте Ваш CSS и XHTML
Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.
24. Ems против Пикселей
Всегда были упорные обсуждения, будет ли лучше использовать пиксели (px) или емы (em) при определении размеров шрифта. Пиксели — более статичный способ определения размеров шрифта, емы более масштабируемое, с различными размерами. С появлением различных типов просмотра веб-страниц (ноутбук, мобильный и т.д.), емы, все чаще становятся по умолчанию для измерения размера шрифта, поскольку они допускают наибольшую гибкость формы. Вы можете узнать больше о том, почему вы должны использовать em для размеров шрифта в этой ветке форума вдумчиво. About.com также имеет большую статью о различиях между измерениями размеров.
25. Не стоит недооценивать Список
Списки являются отличным способом представления данных в структурированном формате, в которых легко изменить стиль. Благодаря свойству дисплея, вы не должны просто использовать список в виде текстовых атрибутов. Списки также отлично подходят для создания навигационных меню и всего в этом роде.
Многие начинающие используют Div-ы, чтобы каждый элемент находился в списке, потому что они не понимают, как правильно их использовать.
Вы часто будете видеть навигационные ссылки так:
|
1 2 3 4 |
<a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> |
Хотя технически это будет прекрасно работать после небольшой доработки CSS, но код небрежен. Если вы хотите добавить список ссылок, используй маркированный список, глупый гусь!
26. Избегайте дополнительных Селекторов
Можно легко добавить дополнительные неосознанные селекторы в CSS, что мешает нашим стилям. Один общий пример добавления дополнительных селекторов со списками.
|
1 |
body #container .someclass ul li {....} |
В этом случае, просто .someclass li работали бы нормально.
|
1 |
.someclass li {...} |
Добавление дополнительных селекторов не принесет Армагеддона или что-нибудь в этом роде, но они сохранят ваш CSS таким простым и чистым, насколько это возможно.
27. Добавьте Поля и отступы для всего
Различные браузеры представляют элементы по-разному. IE делает определенные элементы иначе, чем Firefox. IE 6 представляет элементы иначе, чем IE 7 и IE 8. Хотя браузеры начинают более четко соблюдать стандарты W3C, они все еще не совершенны.
Одно из основных различий между версиями браузеров, какими предоставляются padding и margin. Если вы не используете сброс, вы можете определить поля и отступы для всех элементов на странице, чтобы быть на безопасной стороне. Вы можете сделать это быстро, глобально сбросить, вот так:
|
1 |
* {margin:0;padding:0;} |
Теперь для всех элементов padding и margin нуль, если не определен другой стиль в таблице стилей.
Проблемой является то, что, поскольку все обнуляется с помощью этого метода, вы потенциально причините себе больше вреда, чем пользы. Вы уверены, что вы хотите обнулить поля и каждый элемент обивки? Если это так — это вполне приемлемо. Но, по крайней мере, нужно это рассмотреть.
28. Когда все готово, попробуйте объектно-ориентировать CSS
Объектно-ориентированное программирование является разделением элементов в коде, так что их проще поддерживать повторным использованием. Объектно-ориентированное CSS следует тому же принципу разделения различных аспектов стилей в более логических разделах, делая ваш CSS более модульным и многоразовым.
Если вы новичок в CSS / XHTML играх, OOCSS может быть немного сложным в начале. Но необходимо больше понять принципы для объектно-ориентированного программирования в целом.
29. Используйте несколько таблиц стилей
В зависимости от сложности конструкции и размера участка, иногда проще сделать несколько меньших CSS-файлов вместо одного гигантского.
Например, у меня могла быть избирательная программа, которая будет иметь уникальный набор стилей. Вместо того, чтобы, в том числе, делать опрос основных стилей, я мог бы просто создать poll.css стилей только для страниц, которые показывают опрос.
Однако, будьте уверены, что рассмотрение вопроса о числе запросов HTTP, предпринимаются. Многие дизайнеры предпочитают развивать несколько стилей, а затем объединить их в один файл. Это позволяет сократить количество запросов HTTP до одного. Кроме того, весь файл будет храниться в кэше на компьютере пользователя.
30. Проверьте, Закрыты ли Элементы перед началом отладки
Если вы заметили, что ваш проект выглядит немного шатким, есть вероятность, что это потому, что вы забыли закрыть тег . Вы можете воспользоваться XHTML валидатором, для нахождения всяких ошибок.
Вы также можете прочитать…
Перевод и редакция: Рог Виктор и Андрей Бернацкий.
Автор: Glen Stansberry.
Источник: //net.tutsplus.com
E-mail:contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
Метки: css, css верстка
Комментарии (3)