Эту статью я перевела с net.tutsplus.com, что заняло у меня почти неделю. Мне очень понравились замечания редактора, поэтому перевожу с ними. Они будут отмечены в тексте так: <editors-note></editors-note>
Мои замечания будут отмечены как: <прим. Елены>
1. Сделайте это читабельным
Читабельность вашего CSS очень важна, хотя многие люди не понимают почему это важно. Хорошая читабельность вашего CSS позволит его проще поддерживать в будущем, т.к. вы сможете находить элементы быстрее. Также вы никогда не знаете кто будет смотреть на ваш код в последствии.
<editors-note> Когда пишут CSS, большинство программистов попадают в одну из двух групп.
Группа 1: Всё в одной строке
.someDiv { background: red; padding: 2em; border: 1px solid black; }
Группа 2: Каждый стиль на своей строке
.someDiv {
background: red;
padding: 2em;
border: 1px solid black;
}
Оба применения абсолютно приемлемы, хотя вы можете часто заметить что что группа два не любит группу один! Просто помните - выберите тот метод который читабельней ДЛЯ ВАС. Только это имеет значение. </editors-note>
<прим. Елены> Полностью согласна с редактором. Я например отношусь к первой группе, как можно заметить, посмотрев стиль моего бложика. В несколько строк я пишу что-то что выбивается из-ряда вон. Например невалидный CSS, типа -moz-border-radius.
Как улучшить читабельность вашего файла стилей также вы можете прочитать в свеженькой статье Яна Маркина «Как улучшить CSS».
</прим. Елены>
2. Будьте постоянны
Среди слов о том как делать ваш код читабельным, скажу что нужно следить за постоянством CSS. Вы должны разработать ваш свой собственный "под-язык" CSS который позволит вам быстро называть вещи. Есть несколько классов которые я создаю почти каждый раз и я использую каждый раз одинаковые названия. Например я использую ".caption-right" для плавающих картинок которые содержат заголовок справа.
Думать о вещах, таких как, использовать подчёркивание или тире в именах классов и ID, или использовать что-то другое. Когда вы начнёте создавать свои собственные стандарты для CSS, вы станете более опытны.
3. Начните с фреймворка
Некоторые дизайн-пуристы смеются над мыслью использовать CSS фреймворк с каждым дизайном, но я думаю что если кто-то другой потратил время на разработку инструмента ускоряющего процесс, зачем изобретать колесо? Я знаю что фреймворки не следует использовать для всего, но в большинстве случаев они могут помочь.
У многих дизайнеров (<прим.Елены> верстальщиков </прим.Елены>) есть собственные фреймворки, которые они создают со временем, это тоже хорошая идея. Это поддерживает постоянность в проектах.
<editors-note> Я не согласен. CSS фреймворки замечательная вещь... для тех кто знает как их использовать.
Это в меньшей степени изобретение колеса заново, и в большей степени изучение как колесо работает.
Если вы только начали изучать CSS, я лично рекомендую вам воздержаться от использования фреймворков по меньшей мере год. Иначе вы только запутаете себя. Изучайте CSS...then take shortcuts! </editors-note>
4. Используйте Сброс значений (reset)
Большинство CSS фреймворков имеют встроенный сброс, но если вы не хотите их использовать то по крайней мере файл-сброса следует использовать. Сброс-файл существенно устраняет несоответствия в браузерах, такие как высота, размер шрифта, отступы и т.п. Он позволит вашей вёрстке выглядеть постоянной во всех браузерах.
Популярны файлы от Эрика Мейера - MeyerWeb, и Yahoo's developer reset. Или вы можете сделать свой собственный roll your own reset, если вам так хочется.
<прим. Елены> Не согласна с этим пунктом. Я думаю вам не стоит залезать на велосипед если вы не знаете как он работает. Попробуйте изобрести свой. Я например ограничиваюсь только border-collapse:collapse для таблиц, обнулением рамки для изображений и т.п. При обнулении отступов у всех элементов скорее всего вы подумаете "WHAA, что случилось?!" и вам придётся ниже повторно задавать отступы для нужных элементов и если вы даже приблизительно не знаете как они задаются, есть большая вероятность что пользователь сочтёт это некрасивым.
Также не нужно забывать что для многих элементов вам всё равно захочется переопределить стили. Например я для некоторых таблиц использую
border-spacing:0px;border-collapse:separate;
в случаях когда хочу задать border-radius у таблицы (который не работает в варианте collapse).
</прим. Елены>
5. Упорядочите файл стилей
Всегда имеет значение писать файл стилей так чтобы быстро находить нужный участок. Я рекомендую писать в том порядке как блоки идут в коде страницы, например так:
- Основные классы(body, a, p, h1, etc.)
- #header
- #nav-menu
- #main-content
<editors-note> Не забудьте коментировать каждую секцию!
/****** main content *********/ styles goes here... /****** footer *********/ styles go here...
6. Комбинируйте элементы
У элементов в стилях иногда совпадают какие-то свойства. Вместо повторения куска кода, почему бы не комбинировать их? Например у ваших h1, h2, и h3 элементов может быть одинаковый цвет и размер
h1, h2, h3 {font-family: tahoma, color: #333}
Всегда можно добавить уникальные характеристики для каждого из этих заголовков если нужно (например. h1 {size: 2.1em}) позже в коде.
7. Создайте сначала HTML
Многие верстальщики создают их CSS в то время когда создают HTML. Это кажется логичным создавать одновременно и разметку и стили, но вообще-то вы сохраните больше времени если сначала полностью разметите HTML. Обоснованием является то что вы уже будете знать все элементы в вашей вёрстке, и останется только подобрать CSS. Создание HTML разметки изначально, позволит вам править страницу сразу всю, и позволит думать о CSS в более целостной манере.
<прим. Елены> Верстайте так как привыкли. Например в моём способе вёрстки сложных макетов, я знаю какие элементы буду использовать ещё до того как создам HTML. Однако разметку я всё время правлю пока пишу CSS, например изначально вставив вместо блоков картинки из макета на те места где они должны быть, а потом уже заменяя их контентом. Это позволяет после каждого этапа видеть готовую страницу целиком как её задумал дизайнер. И делать вёрстку с точностью "пиксель-в-пиксель". Чего нельзя сделать если сначала будет пустая разметка. </прим. Елены>
8. Используйте несколько классов
Иногда полезно добавить несколько классов для элемента. Например у вас есть блок <div> класса "box" и вы хотите ему добавить float:right, и у вас уже есть класс .right в вашем CSS с соответствующим стилем. Вам останется только добавить дополнительный класс в значение аргумента, вот так:
<div class="box right"></div>
Вы можете добавить столько классов сколько заходите (через пробел).
<editors-note>
Будьте осторожны используя id или имена классов типа "left" и "right." Я использую их, но только для вещей типа постов блога. Почему? Давайте представим что, в какой-то момент, вы захотите ваш "box" со значением LEFT. В этом случае вам придётся возвращаться к вашей разметке и менять имена классов, и всё только для того чтобы поменять
отображение
страницы. Это несемантично. Запомните - HTML для разметки и контента. CSS для отображения. Правило:
Если вы должны вернуться к HTML чтобы изменить отображение (или дизайн) страницы, вы сделали что-то неправильно!
</editors-note>
9. Используйте правильны Doctype
Объявление doctype значит многое для того чтобы ваша разметка и CSS были валидными. Такше всё отображение вашего сайта могут сильно поменяться в зависимости от DOCTYPE который вы укажите.
Подробнее о DOCTYPE смотрите мою соответствующую статью.
<editors-note>
Я использую доктайп HTML5 для всех моих проектов.
<!DOCTYPE html>
"Что самое хорошее в новом DOCTYPE, особенно, что все современные браузеры (IE, FF, Opera, Safari) распознают его и переключаются в стандартный режим - даже хотя не поддерживают HTML5. Это значит что вы можете начать писать ваши веб-страницы используя HTML5 уже сегодня, и они будут актуальны долгое-долгое время."
</editors-note>
<прим. Елены> Джон Ресиг - создатель фреймворка JQuery и веб-евангилист. </прим. Елены>
10. Используйте сокращения
Вы можете изрядно уменьшить ваш код, используя сокращения в вашем CSS. Для элементов типа padding, margin, font и некоторых других, вы можете писать все стили в одно свойство. Например у блока могут быть такие стили:
#crayon {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}
Или вы можете собрать их в один, например так:
#crayon {
margin: 8px 7px 0px 5px; // top, rightright, bottombottom, и left, соответственно.
}
За дополнительной информацией читайте детальный справочник сокращений CSS свойств.
<прим. Елены> Помните, что если вам нужно поправить только одину сторону из четырёх, для отступов padding или margin, то вам лучше написать только её. Правило для группировки свойств легко запомнить - Сначала идёт верх, потом по часовой стрелке. Левая сторона - последняя. Для свойства border-radius другой метод, тут первое свойство - для левого верхнего угла, а потом тоже по часовой стрелке.
<прим. Елены>
11. Комментируйте ваш CSS
Как и в любом другом языке, хорошей идеей будет комментировать ваш код по секциям. Чтобы добавить комментарий просто напишите /* в начале и */ в конце, например так:
/* Here's how you comment CSS */
<прим. Елены> Честно говоря, я никогда не тратила время на написание комментариев для стилей, только для разметки. Для людей кто пишет свойства CSS каждое с новой строки - получится всё равно слишком много строк. Хотя начало комментария при подсветке кода будет легче найти.
Для "группы 2", которые как я пишут на одной строке все стили для одного элемента - совершенно нет необходимости что-то комментировать, всё и так видно, гораздо проще тогда уж всем дочерним элементам делать отступ, например так:
#navi_td{text-align:right;}
#navi_td div {padding:20px;}
#num_pages {float:left;}
#navi_td a,#navi_td b {margin:8px;}
a.add {padding-left:20px;background:url('images/add.gif') no-repeat;
Где #navi_td - это соответствующая секция контента.
Также комментарии имеет смысл дать в начале с перечислением основных цветов дизайна.
</прим. Елены>
12. Понять разницу между блочными и строчными элементами
<прим. Елены> Это очень важный пункт! Не столько для CSS, сколько для разметки. Правило - строчные элементы не должны содержать блочные!</прим. Елены>
Блочные элементы - это элементы это элементы которые добавляют новую строку после и перед собой и занимают всю доступную им ширину. Строчные элементы занимают только то место которое им надо и специально не добавляют новую строку после себя.
Вот список элементов которые являются строчными:
span, a, strong, em, img, br, input, abbr, acronym
и блочными:
div, h1...h6, p, ul, li, table, blockquote, pre, form
13. Отсортируйте свойства по алфавиту
Хотя это несколько незначительный совет, это может быть полезным для быстрого нахождения.
#cotton-candy {
color: #fff;
float: left;
font-weight:
height: 200px;
margin: 0;
padding: 0;
width: 150px;
}
<editors-note>
Эмм... пожертвовать скоростью для слегка улучшенной читебельности? Я пас - но решайте для себя!
</editors-note>
<прим. Елены> Для "группы 2", это становится совсем неактуально. Например я расставляю свойства только по приоритету, например display,float,width и height по-возможности в начале. Но вообще не трачу на это время.
</прим. Елены>
14. Используйте Компрессоры CSS
CSS компрессоры помогут обрезать размер CSS удалив переводы строк, пробелы, и группируя элементы. Это поможет сильно уменьшить размер файлов, что скажется на скорости загрузки браузера. CSS Optimizer и CSS Compressor - два замечательных инструмента, которые помогут уменьшить CSS.
Важно отметить что уменьшение вашего CSS может дать выйгрышь в скорости, но потерять в читабельности.
15. Используйте общие классы
Вы увидите что существуют стили которые вам необходимо постоянно применять. Вместо добавления этих особых стилей к каждому ID, yвы можите создать общие классы которые сможете добавлять к другим классам или ID (совет #8).
Например, я часто применяю float:right и float:left в моих дизайнах. Поэтому я просто добавляю классы .left и .right в мой лист, и ссылаюсь на них в элементах.
.left {float:left}
.right {float:right}
<div id="coolbox" class="left">...</div>
Это способ чтобы не добавлять постоянно "float:left" ко всем элементам которым нужно плавать.
<editors-note> Пожалуйста смотрите редакторскую правку к #8. </editors-note>
16. Используйте "Margin: 0 auto" для центровки
Многие новички в CSS не могут понять почему нельзя использовать просто float: center для достижения эффекта центровки блочных элементов. Если б всё было так просто! К сожалению вам нужно использовать это:
margin: 0 auto; // верхее и нижнее, и левое и правое значение, соответственно.
для центровки дивов, параграфов и других элементов в вашей разметке.
<editors-note> Когда вы задаёте одновременно левый и правый отступ - они должны быть идентичны, это не оставляет выбора элементу кроме как отцентроватся относительно родительского. </editors-note>
17. Не надо просто обёртывать всё Дивом
Когда начинаешь, есть соблазн обернуть всё в див с ID или классом вокруг каждого элемента и создать для этого стиль.
<div class="header-text"><h1>Header Text</h1></div>
Иногда может быть проще создать уникальный стиль для элемента, как для примера выше, но вы только захламляете ваш файл стилей. Вполне достаточно этого:
<h1>Header Text</h1>
Теперь вы можете просто добавить стили к h1 вместо родительского дива.
18. Используйте Firebug
Если вы ещё не скачали Firebug, остановитесь и сачайте. Серьёзно. Эта маленькая штука из разряда must have для любого веб-разработчика. Среди многих особенностей предоставляемых этим дополнением Firefox (отладка JavaScript, проверка HTML, поиск ошибок), вы можете также визуально наблюдать м править ваш CSS в реальном времени. Вы можете узнать больше на официальном Firebug website.
19. Без Хаков
Избегайте использования маленьких браузеро-специфичных хаков если возможно. Большое давление оказывает необходимость сделать чтоб дизайн выглядил одинаково во всех браузерах, но использование хаков только усложнит поддержку дизайна в будущем. Плюс, использование reset-файла (смотри #4) может устранить почти все напрвильности рендеринга в современных браузерах.
20. Меньше используйте абсолютное позиционирование
Абсолютное позиционирование это удобный способ CSS который позволяет вам определять где точно элемент должен располагатьсяна странице с точностью до пикселя. Тем не менее, несмотря на невнимание абсолютно-позиционированных элементов к остальным, However, because of absolute positioning's disregard for other elements on the page, the layouts can get quite hairy if there are multiple absolutely positioned elements running around the layout.
21. Используйте Text-transform
Text-transform - это очень полезное CSS свойство, которое позволяет вам "стандартизировать" как текст будет отформатирован на вашем сайте. Например, вы захотите чтобы заголовки были только строчными буквами. Просто добавьте следующее свойство в стили:
text-transform: lowercase;
Теперь все буквы в заголовке по-умолчанию будут строчными. Text-transform позволяет вам изменить ваш текст (первые буквы заглавные, все буквы заглавные, или все строчные) простым свойством.
22. Не используйте отрицательный Margin для чтобы спрятать ваш h1
Часто верстальщики используют картинки для их заголовков, и затем используют display:none или отрицательный margin чтобы выкинуть h1 со страницы. Matt Cutts, глава команды «Google Вебспам», официально заявил что это плохая идея, т.к Google может счесть это поисковым спамом.
Как мистер Cutt недвусмысленно сказал, откажитесь от способа прятать ваш текст логтипа с помощью CSS. Просто используйте атрибут alt. Пока многие утверждают что можно использовать CSS чтобы спрятать тег h1 пока h1 это то же что и текст на лого, я предпочитаю блуждать по безопасной стороне.
<прим. Елены> как можно видеть в моём блоге, часть h1 содержащая дату публикации - заменяется на соответствующую картинку, а текст скрывается display:none. Честно говоря мне всё равно что думает по этому поводу гугл, т.к. я использую это для того чтобы посетители моего блога видели более красивую картинку. Читатели RSS видят её текстом. Думайте о посетителях - это самое главное. Ни один поисковик не посмеет утверждать обратного.</прим. Елены>
23. Проверяйте ваш CSS и (X)HTML
Проверка вашего CSS и (X)HTML - это не просто дело чести: она позволяет быстро находить пятна грязи в коде и избежать ошибок. Если вы верстаете дизайн и по каким-либо причинам дела идут не так как надо, попробуйте проверить валидатором разметки и CSS валидатором и увидите какие ошибки появились. Обычно вы увидите что забыли где-нибудь закрыть див, или пропустили точку с запятой в свойсте CSS.
<прим. Елены> Правило - Всегда ставьте точки с запятой после каждого свойства. Даже если свойство одно - всегда.</прим. Елены>
24. Em против. пикселей
Всегда были громкие дебаты - что лучше использовать пиксели (px) или относительные значения (em) при определении размеров. Пиксели - это более статический путь определения шрифтов, а em - более совместим с размерами в разных браузерах и мобильных устройствах. С преимуществом разных типов веб-сёрфинга (лаптоп, мобильник, и т.п.), em всё больше и больше становятся умолчанием для измерения размера шрифтов т.к. позволяют большую гибкость. Вы можете прочитать больше о том почему следует использовать ems для размеров шрифтов в этом содержательной теме форума. About.com также содержит статью отличия между способом измерения размеров.
<editors-note> Не втягивайте меня в холивар - но я предпочитаю оспорить это, благодаря масштабированию в браузерах, большинство дизайнеров (верстальщиков) предпочитают определять размеры в пикселях. Как вы думаете? </editors-note>
<прим. Елены> Я думаю что em никогда и не следовало использовать. Если пользователю будет слишком мелко или слишком крупно - он нажмёт Ctrl+"+". Прошло то время когда значения заданные в пикселях не масштабировались браузерами. Если вы захотите использовать em - нужно задать для body атрибут font-size, и относительно его высчитывать длины блоков и картинок например, вместо того чтобы сразу вписать значение в пикселях. Оно вам надо? Я знаю некоторых пуристов которые используют em, я так никогда и не могла понять чем использование относительных размеров поможет мне и моим пользователям.<прим. Елены>
25. Не недооценивайте списки
Списки это замечательный способ представить данные в упорядоченном виде, у которого легко поменять стили. Благодаря свойству display, вам не нужно использовать список как свойство текста. Списки также замевчательно подходят для создания навигационных меню или такого сорта вещей.
Многие начинающие используют дивы для того чтобы создать каждый элемент списка, потому что они не понимают как их правильно использовать. Определённо стоит приложить усилия и подчистить знания в элементах списков и структурированных данных, это окажет большую помощь в будущем.
<editors-note>
Вы часто можете видеть навигационные ссылки как тут:
<a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a>
Хотя, технически, это может прекрасно работать с помощью капли CSS, это неряшливо. Если ты добавляешь список ссылок, используй ненумерованный список, глупый гусь!
</editors-note>
<прим. Елены> Глупый гусь =), кроме ненумерованных списков есть ещё тег <menu>, прочитайте «Используйте тег menu для меню» <прим. Елены>
26. Избегайте дополнительных селекторов
Легко безсознательно добавить дополнительные селекторы в ваш CSS которые засоряют файл стилей. Общий пример использования лишних селекторов со списками.
body #container .someclass ul li {....}
В данном случае использование .someclass li и так работает прекрасно.
.someclass li {...}
Добавление лишних селекторов не вызовет Армагеддон или что-то типа того, но позволит держать ваш CSS изначально простым и понятным, насколько это возможно.
<прим. Елены> бывают случаи когда их всё таки придётся использовать. Подробнее ждите мою статью. </прим. Елены>
27. Добавьте Margin и Padding ко всему
Разные браузеры отображают элементы по-разному. IE отображает элементы отлично от Firefox. IE 6 отображает отлично от IE 7 и IE 8. Пока браузеры начинают приближаються к W3C стандартам, они все ёще не совершенны (*кхе-IE-кхе*).
Одно из главных отличий между версиями браузеров это то как отображаются поля и отступы. Если вы не используете reset-файл, вам вероятно захочется установить margin и padding для всех элементов на странице, чтобы быть в безопасности. Вам достаточно установить это глобальным сбросом, например так:
* {margin:0;padding:0;}
Теперь все элементы имеют padding и margin равным 0, пока на будет задан другой стиль в листе стилей.
<editors-note> Проблемма как раз в этом, так как ВООБЩЕ ВСЁ обнуляется, с этим методом вы больше навредите себе чем поможете. Вы уверены что хотите чтобы отступы у всех до единого элемента обнулились? Если да - то это прекрасно. Но по крайней мере обдумайте это. </editors-note>
28. Когда будете готовы, попробуйте объектно ориентированный CSS
Объектно ориентированное программирование - это программирование отдельных элементов так чтобы их было проще использовать повторно. Объектно Ориентированный CSS следует тому же принципу разделения различных аспектов файла стилей на более логические секции, делая ваш CSS более модульным и многоразовым.
Вот презентация слайдшоу о том как работает Объектно ориентированный CSS:
Если вы новичёк в игре CSS/HTML, OOCSS может быть в начале проблеммой. Но принципы неплохо знать для ООП в общем.
<прим. Елены> Я думаю что надо очень постараться чтобы сказать что CSS изначально не объектно ориентирован. А вообще например мой коллега mr.troll - ярый противник ООП, надеюсь он найдёт времени написать статью в мой бложик по этом поводу. </прим. Елены>
29. Используйте несколько файлов стилей
В зависимости от сложности дизайна и размера сайта, иногда проще сделать несколько маленьких файлов вместо одного большого файла стилей. Оставив вопрос о том что дизайнеру (верстальщику) проще поддерживать, несколько файлов помогут вам отбросить отдельный CSS на отдельных страницах которым он не нужен.
Например, у меня есть программа для голосований, которой нужны отдельные стили. Вместо того чтобы включить эти стили в основной файл, я могу просто создать poll.css и показывать его только на страницах с голосованем.
<editors-note> Тем не менее, будьте уверены что обдумали число запросов HTTP, которые будут происходить. Многие верстальщики предпочитают работать с несколькими файлами стилей, а затем объединять их в один файл. Это позволит уменьшить число HTTP-запросов до одного. Также, целый файл будет закэширован на компьютере пользователя. </editors-note>
30. При отладке сначала проверьте закрывающие теги
Если вы заметили что ваш дизайн поехал, весьма большой шанс что вы забыли поставить закрывающий </div>. Используйте XHTML validator чтобы также отловить остальные виды ошибок.
Заключение
P.S. Яна Маркина «Как улучшить CSS».
Комментарии: