Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
30 хороших практик в CSS для новичков
CSS - язык, используемый в какой-то момент практически каждым разработчиком. Хотя мы порой воспринимаем его как должное, он, тем не менее, является мощным средством и имеет множество нюансов в применении, позволяющих помочь в разработке качественного дизайна (либо затруднить данный процесс). Ниже представлено 30 хороших рекомендаций, которые помогут вам писать правильный и грамотный код, избегая многих типичных ошибок.
1. Сделайте его легко читаемым
Легкая читаемость вашего CSS-файла очень важна, хотя многие недооценивают этот момент. Хорошая читаемость позволяет вам упростить работу с ним в будущем, при поддержке сайта, так как вы будете в разы быстрее находить нужные вам элементы. Также помните о том, что ваш файл может потребоваться изучить и поправить кому-то другому.
Заметка
При написании CSS-файлов, большинство разработчиков разделяются на две группы, две крайности.
Группа 1: Все в одну линию
.someDiv { background: red; padding: 2em; border: 1px solid black; }
Группа 2: Каждому стилю - отдельная строка
.someDiv {
background: red;
padding: 2em;
border: 1px solid black;
}
На самом деле обе практике вполне хороши, хотя между представителями данных групп нередки разногласия! Просто имейте в виду - выбирать нужно тот вариант, на который вам приятно смотреть. Вот и все.
Заметка
2. Сделайте его целостным
Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой "суб-язык" CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.
Подумайте о том, будете ли вы использовать тире и нижние подчеркивания в названиях ваших классов и ID, и в каких случаях вы будете так делать. Когда вы начинаете создавать собственные стандарты для CSS, вы становитесь куда ближе к профессионалам в этом деле.
3. Начните с фреймворка
Многие считают, что не стоит использовать CSS-фреймворки, но я думаю, что если кто-то потратил время и сделал программу, позволяющую ускорить процесс разработки, то зачем же изобретать колесо? Я знаю, что фреймворки не должны использоваться повсеместно, но во многих случаях их использование вполне оправдано.
Многие дизайнеры создают в процессе работы свои собственные фреймворки, и это тоже отличная идея, позволяющая сохранить единообразие и целостность кода в разных проектах.
Заметка
Не соглашусь. CSS-фреймворки - незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.
"Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает"
Если вы только начинаете разбираться в каскадных таблицах стилей, я бы рекомендовал вам держаться подальше от различных фреймворков как минимум в течение года. Иначе вы просто сами себя запутаете. Сначала научитесь CSS, потом уже оптимизируйте свою работу с этим языком.
Заметка
4. Используйте обнуление
Большинство CSS-фреймворков имеют встроенный "обнулятор" стилей, но если вы не собираетесь его использовать, вы можете прибегнуть к другим "обнуляторам". Сброс стилей позволяет избежать многих проблем с неодинаковым отображением в разных браузерах, задавая четкие параметры для размеров шрифтов, заголовков, величины внешних и внутренних отступов и т.д. Такое "обнуление" позволяет добиться одинакового отображения во всех браузерах.
Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb, Yahoo’s developer reset. Как вариант, вы можете придумать свой "обнулятор", взяв за основу следующий сброс CSS.
5. Структурируйте ваши файлы стилей по принципу "сверху вниз"
Всегда имеет смысл структурировать файл CSS так, чтобы вы могли быстро найти нужную вам часть кода. Я рекомендую использовать принцип "сверху вниз", суть которого в том, чтобы составлять файл стилей в том порядке, в котором данные стили применяются на странице. К примеру:
1. Общие классы (body, a, p, h1, и т.д.) 2. #header 3. #nav-menu 4. #main-content
Не забудьте снабдить каждую секцию комментариями!
/****** main content *********/ здесь идут стили... /****** footer *********/ здесь идут стили...
6. Группируйте элементы
Часто элементы могут иметь пересекающиеся, общие стили. Вместо того, чтобы переписывать уже имеющийся код, лучше просто сгруппируйте элементы. К примеру, ваши заголовки h1, h2 и h3 могут иметь одинаковый шрифт и цвет:
h1, h2, h3 {font-family: tahoma, color: #333}
7. Создайте сперва HTML-разметку
Многие разработчики создают CSS-файл параллельно с созданием разметки HTML. Это кажется логичным, но все же вы сможете сэкономить немало времени, если сначала разберетесь с HTML и лишь потом - со стилями. Данный подход позволяет вам представить страницу как целое, подумать о том, где какие стили применить, получая на выходе более целостный файл стилей, выполненный по принципу "сверху вниз".
8. Применяйте несколько классов к элементу, если нужно
Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div, которому вы хотите задать float:right, и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div:
<div class="box right"></div>
Вы можете добавить столько классов, сколько вам нужно, разделяя их пробелами.
Заметка
Будьте очень осторожны, используя имена вроде left и right. Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса - и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML - для разметки, CSS - для визуального представления.
Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!
9. Используйте правильный тэг Doctype
Объявление типа документа очень важно и влияет на то, пройдет ли валидацию ваш код CSS и HTML. По сути, весь облик вашего сайта может сильно измениться в зависимости от объявленного типа документа DOCTYPE.
10. Используйте сокращенную запись
При сооружении своего CSS-файла вы можете значительно его "ужать", используя сокращенную форму записи в подходящих ситуациях. Для свойств вроде padding, margin, font и некоторых других можно комбинировать стили в одну строку. К примеру, блоку div можно назначить следующие стили:
#crayon {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}
В одну строку это будет выглядеть так:
#crayon {
margin: 8px 7px 0px 5px; /* top, right, bottom, и left, соответственно */
}
11. Комментируйте CSS
Точно так же, как и в любом другом языке, комментирование является отличной идеей. Чтобы добавить комментарий, просто добавьте /* перед комментарием и */ после него:
/* Вот так выглядят комментарии в CSS */
12. Понимайте разницу между блочными элементами и элементами типа "inline"
Блочные элементы - это такие элементы, которые естественным образом делают чистой каждую строку после их объявления, занимая как бы всю доступную в данной строке ширину. Элементы типа inline (условно можно назвать их "строчными") занимают ровно столько места, сколько им нужно и не вызывают появление после своего применения новой пустой строки.
К элементам, относящимся к обоим типам можно отнести:
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;
}
Заметка
Эх.., принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
Заметка
14. Используйте CSS-компрессоры
Сжиматели CSS помогают значительно уменьшить размера файла стилей посредством удаления лишних переводов строк и комбинирования элементов. Все это позволяет вашему сайту загружаться быстрее. CSS Optimizer и CSS Compressor - два замечательных онлайн-сервиса для выполнения таких задач.
Наряду с уменьшением размера файла вы, естественно, получаете значительное ухудшение его читабельности, поэтому используйте такие сервисы, когда внесение правок в стили уже не предвидится.
15. Используйте общие классы
Вы скоро заметите, что есть стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот стиль к каждому ID, вы можете создать общие классы и добавлять их к ID других классов CSS (смотрите рекомендацию №8 данной статьи).
К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.
.left {float:left}
.right {float:right}
<div id="coolbox" class="left">...</div>
Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.
16. Используйте "Margin: 0 auto" для центрирования дизайна
Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:
margin: 0 auto; /* 0 - для top и bottom; auto - для left и right */
17. Не заключайте все подряд в DIV
Частенько возникает соблазн сделать что-то вроде:
<div class="header-text"><h1>Текст заголовка</h1></div>
Может показаться, что это достаточно удачное решение, но так вы начнете захламлять свой файл стилей. Вместо этого сделайте проще:
<h1>Header Text</h1>
И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.
18. Используйте Firebug
Если вы еще не загрузили Firebug, остановитесь, сделайте это и продолжайте. Серьезно. Этот плагин должен быть в арсенале любого веб-разработчика. Помимо того, что вы можете отлаживать с его помощью JavaScript, изучать html-структуру страницы, искать ошибки и т.д., вы можете также визуально изучать, модифицировать и редактировать CSS в режиме реального времени.
19. Меньше хаков
Старайтесь использовать настолько мало хаков, насколько это вообще возможно. Да, на разработчиков оказывается давление, мол "Сайт должен выглядеть одинаково во всех браузерах", но использование хаков сильно усложняет дальнейшую поддержку дизайна. К тому же, использование "обнулятора" (смотри рекомендацию №4) позволяет устранить почти все возможные ляпы в отображении страницы разными браузерами.
20. С умом используйте абсолютное позиционирование
Абсолютное позиционирование - слегка хитрый аспект CSS, который позволяет вам задать точное положение элемента на странице, вплоть до пикселя. Однако, неграмотное использование данного инструмента и применение большого количества абсолютно спозиционированных элементов может привести к не очень хорошим изменениям во внешнем виде страницы.
21. Используйте свойство Text-transform
Text-transform - очень полезное свойство, позволяющее вам стандартизировать то, как будет выглядеть текст. Предположим, вы хотите создать заголовки, в которых должны использоваться только буквы в нижнем регистре. Просто примените данное свойство к стилю заголовка:
text-transform: lowercase;
Теперь все буквы в заголовке будут в нижнем регистре. Данное свойство также позволяет капитализировать первую букву и все буквы текста.
22. Не используйте негативные отступы, чтобы спрятать тэг H1
Часто люди используют картинку для текста в хэдере, после чего используют или display:none, или отрицательные отступы, чтобы сместить h1 за видимую часть страницы. Matt Cutts, глава службы борьбы со спамом в Google, официально заявил, что это плохая идея, так как Google может решить, что это - спам-технология.
Как говорит мистер Cutts, "избегайте того, чтобы прятать текст логотипа средствами CSS. Используйте тэг alt".
23. Проводите валидацию CSS и HTML-кода
Валидация CSS и HTML дает вам нечто большее, чем чувство гордости в случае отсутствия ошибок: она помогает вам быстро найти ошибки в коде. Если по непонятным для вас причинам страница выглядит не так, как вы ожидали, попробуйте пройти валидацию разметки и валидацию стилей, чтобы увидеть допущенные ошибки. Как правило, все сводится к незакрытому блоку div, либо к отсутствующему двоеточию в каком-нибудь свойстве CSS.
24. Ems или Пиксели?
Давно уже идут разговоры о том, что же лучше использовать - пиксели (px) или ems (em) при задании размера шрифта. Пиксели - более статический метод задания размера, а ems - масштабируемый вариант, который более приспособлен к браузерам с самыми разными разрешениями экрана и к экранам маленьких мобильных устройств. Постепенно ems занимает все большую долю в этом поединке с пикселями, так как позволяет реализовать большую гибкость в отображении информации на мобильных устройствах и иных устройствах с малыми экранами.
25. Не недооценивайте значение списков
Списки - отличный способ представления информации, который, к тому же легко настраивается с помощью стилей. Списки, кстати, можно с успехом использовать для создания навигации. Многие новички используют блоки div, заключая в них каждый элемент списка, так как не знают, как правильно обращаться со списком.
26. Избегайте избыточных селекторов
Легко по незнанию добавить лишний селектор в файл стилей. Как один из распространенных вариантов такой ошибки, можно привести такой пример:
body #container .someclass ul li {....}
В такой ситуации можно ничего не усложнять и сделать так:
.someclass li {...}
Очевидно, что избыточность селекторов не приведет к Армагеддону и прочим ужасным последствиям, но точно не поспособствует тому, чтобы ваш файл стилей отичался минимализмом и четкостью.
27. Добавляйте ко всему внешние и внутренние отступы
Разные браузеры по-разному отрисовывают элементы. IE делает это не так, как Firefox. IE6 - не так, как IE7 и IE8 и т.д. Как раз-таки основными отличиями между браузерам часто является их "отношение" к обработке отступов. Если вы не используете "обнулятор", вы, вполне вероятно, захотите прописать свойства margin и padding для всех элементов на странице, чтобы наверняка себя обезопасить. Это можно сделать очень просто:
* {margin:0;padding:0;}
Теперь все элементы страницы будут иметь внешние и внутренние отступы 0px, если иное не задано в файле стилей.
28. Когда готово, попробуйте объектно-ориентированный CSS
Объектно-ориентированное программирование - это разделение элементов в коде таким образом, чтобы проект было проще поддерживать, а код - использовать заново. Объектно-ориентированный CSS строится на том же принципе разделения отдельных частей файла стилей на логические секции, делая файл CSS более модульным и пригодным к повторному использованию.
Если вы новичок в вопросе, то OOCSS может показаться вам слишком сложным. Но понимание самих принципов - уже первый шаг к применению этого на практике.
29. Используйте несколько файлов стилей.
Исходя из сложности дизайна и размера сайта, часто бывает логично сделать несколько маленьких файлов стилей, чем "запихивать" все стили в один. В этом случае вы имеете возможность точечного применения соответствующих файлов к определенным страницам. При этом каждый из таких CSS-файлов не будет содержать избыточной информации.
30. Сперва всегда проверяйте на "закрытость" элементы страницы
Если что-то выглядит не так, всегда начинайте с поисков чего-то вроде отсутствующего закрывающего тэга. Вы можете использовать для этого также XHTML Validator. Кроме того, это позволит вам выявить и другие возможные проблемы.
Glen Stansberry
net.tutsplus.com
Перевод - Дмитрий Науменко
P.S. Если вы изучаете CSS для того, чтобы освоить верстку сайтов, также рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
