От автора: CSS — это язык, которым в какой-то момент пользуются почти каждый разработчик. Хотя это язык, который мы иногда принимаем как должное, он очень мощный и имеет множество нюансов, которые могут помочь (или навредить) нашему дизайну. Вот 30 лучших практик CSS, которые помогут вам написать надежный CSS и избежать некоторых дорогостоящих ошибок.
1. Сделайте его читабельным
Читаемость вашего CSS невероятно важна, хотя большинство людей забывают, почему это важно. Отличная читаемость вашего CSS значительно упрощает поддержку в будущем, так как вы сможете быстрее находить элементы. Кроме того, вы никогда не узнаете, кому в дальнейшем может понадобиться просмотреть ваш код.
2. Сохраняйте последовательность
Одновременно с тем, чтобы ваш код оставался читабельным, необходимо убедиться, что CSS совместимый. Вам следует начать разработку своего собственного «подъязыка» CSS, который позволит вам быстро давать имена объектам. Есть определенные классы, которые я создаю почти в каждом проекте, и каждый раз использую одно и то же имя. Например, я использую .caption-right для изображений, которые выравниваются по правому краю.
Подумайте о том, будете ли вы использовать символы подчеркивания или тире в своих идентификаторах и именах классов, и в каких случаях вы их будете использовать. Когда вы начнете создавать свои собственные стандарты для CSS, вы станете намного более опытным.
3. Начните с фреймворка
Некоторые создатели дизайна смеются над мыслью об использовании CSS-фреймворка с каждым дизайном, но я считаю, что если кто-то еще нашел время для поддержки инструмента, ускоряющего производство, зачем изобретать велосипед? Я знаю, что фреймворки не следует использовать во всех случаях, но в большинстве случаев они могут помочь.
У многих дизайнеров есть собственный фреймворк, который они создали с течением времени, и это тоже отличная идея. Это помогает поддерживать последовательность в проектах.
В то же время я также хотел бы сказать, что вам следует использовать фреймворки, только если вы уже хорошо знакомы с CSS. Почти наверняка наступит время, когда вам придется самостоятельно создать определенный аспект некоторого макета, и ваше глубокое понимание CSS поможет вам в этом.
4. Используйте RESET
Большинство фреймворков CSS имеют встроенный RESET, но если вы не собираетесь его использовать, то хотя бы подумайте об использовании RESET. RESET по существу устраняет несоответствия браузера, такие как высота, размер шрифта, поля и заголовки. RESET позволяет вашему макету выглядеть согласованно во всех браузерах.
MeyerWeb является классическим RESET-ом. Normalize.css — еще один очень популярный RESET.
5. Организуйте таблицу стилей по нисходящей структуре
Всегда имеет смысл размещать таблицу стилей таким образом, чтобы вы могли быстро находить части кода. Я рекомендую нисходящий формат, который учитывает стили в том порядке, в каком они появляются в исходном коде. Таким образом, пример таблицы стилей может быть упорядочен следующим образом:
Обобщенные классы (body, a, p, h1 и т.д.)
#header
#nav-menu
#main-content
Также помогает отслеживать различные разделы веб-сайта в таблице стилей с комментариями.
/****** main content *********/ styles go 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 более целостным образом, сверху вниз.
8. Используйте несколько классов
Иногда полезно добавить к элементу несколько классов. Допустим, у вас есть блок div, который вы хотите перемещать вправо, и у вас уже есть класс .right в вашем CSS, который перемещает все вправо. Вы можете просто добавить в объявление дополнительный класс, например:
<div class="box right"></div>
Вы можете добавить столько классов, сколько хотите (через пробел).
Это одна из тех ситуаций, когда нужно учитывать отдельные случаи. Хотя полезно создавать имена классов, которые дают некоторое представление о том, как они влияют на макет, вам также следует избегать использования имен классов, которые требуют постоянного переключения между HTML и CSS.
Будьте очень осторожны при использовании идентификаторов и имен классов, таких как «left» и «right». Я буду использовать их, но только для таких вещей, как примеры в сообщениях в блогах. Почему? Давайте представим, в процессе разработки вы решите, что лучше бы увидеть, как блок сдвигается влево. В этом случае вам придется вернуться к своему HTML и изменить имя класса — все для того, чтобы настроить представление страницы. Это бессмысленно. Помните: HTML предназначен для разметки и содержания. CSS предназначен для презентации.
Если вы должны вернуться к своему HTML, чтобы изменить представление (или стиль) страницы, вы делаете это неправильно!
9. Используйте правильный Doctype
Объявление doctype сильно влияет на то, будут ли проверяться ваша разметка и CSS. Фактически, весь внешний вид вашего сайта может сильно измениться в зависимости от объявленного вами типа doctype.
Узнайте больше о том, какой тип документа использовать в отдельном списке . Можно просто начать использовать <!DOCTYPE html> при создании страниц на базе HTML5.
10. Используйте сокращения
Вы можете значительно уменьшить размер кода, используя сокращение при создании CSS. Для таких элементов, как отступы, поля, шрифт и некоторые другие, вы можете комбинировать стили в одной строке. Например, у div могут быть следующие стили:
#crayon { margin-left: 5px; margin-right: 7px; margin-top: 8px;
}Вы можете объединить эти стили в одну строку, например:
#crayon { margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
}11. Комментируйте свой CSS
Как и любой другой язык, отличная идея — комментировать код по разделам. Чтобы добавить комментарий, просто добавьте /* перед комментарием и */ закройте его, например:
/* Here's how you comment CSS */
12. Поймите разницу между блочными и строчными элементами
Блочные элементы — это элементы, которые естественным образом занимают каждую строку после объявления, охватывая всю ширину доступного пространства. Строчные элементы занимают ровно столько места, сколько им нужно, и не переходят на новую строку после использования.
Вот списки обычно строчных элементов: 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, удаляя разрывы строк, пробелы и комбинируя элементы. Эта комбинация может значительно уменьшить размер файла, что ускоряет загрузку браузера. CSS Minifier и HTML Compressor — два отличных онлайн-инструмента, которые могут сжать CSS.
Следует отметить, что сжатие CSS может обеспечить повышение производительности, но вы потеряете часть читабельности CSS.
15. Используйте общие классы
Вы обнаружите, что есть определенные стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот конкретный стиль к каждому идентификатору, вы можете создать общие классы и добавить их к идентификаторам или другим классам 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 для достижения центрированного эффекта на блочных элементах. Если бы это было так просто! К сожалению, вам придется использовать этот метод для центрирования div абзацев, абзацев или других элементов в макете:
margin: 0 auto; // top, bottom - and left, right values, respectively.
Объявив, что левое и правое поля элемента должны быть идентичными, браузеры не имеют другого выбора, кроме как центрировать элемент внутри содержащего его элемента.
17. Не оборачивейте заголовок div-ом
Вначале возникает соблазн обернуть элемент div идентификатором или классом и создать для него стиль.
<div class="header-text"><h1>Header Text</h1></div>
Иногда может показаться проще просто создать уникальные стили элементов, как в приведенном выше примере, но вы начнете загромождать свою таблицу стилей. Лучше сделать так:
<h1>Header Text</h1>
Затем вы можете легко добавить стиль h1 вместо родительского div.
18. Используйте инструменты разработчика браузера
Современные веб-браузеры поставляются в комплекте с некоторыми жизненно важными инструментами, которые необходимы любому веб-разработчику. Эти инструменты разработчика теперь являются частью всех основных браузеров, включая Chrome, Firefox, Safari и Edge. Среди множества функций, которые поставляются в комплекте с инструментами разработчика Chrome и Firefox (например, отладка JavaScript, проверка HTML и просмотр ошибок), вы также можете визуально проверять, изменять и редактировать CSS в режиме реального времени.
19. Используйте меньше хаков
По возможности избегайте использования специфичных для браузера хаков. Существует огромное стремление обеспечить единообразие дизайна во всех браузерах, но использование хаков только усложняет поддержку дизайна в будущем. Кроме того, использование файла reset (см. №4) может устранить почти все нарушения рендеринга между браузерами.
20. Осторожно используйте абсолютное позиционирование
Абсолютное позиционирование — это удобный аспект CSS, который позволяет вам определить, где именно элемент должен быть расположен на странице с точностью до пикселя. Однако из-за того, что при абсолютном позиционировании не учитываются другие элементы на странице, макеты могут стать довольно непростыми, если вокруг макета работает несколько абсолютно позиционированных элементов.
21. Используйте text-transform
text-transform — очень полезное свойство CSS, позволяющее «стандартизировать» форматирование текста на вашем сайте. Например, предположим, что вы хотите создать заголовки, содержащие только строчные буквы. Просто добавьте text-transform свойство в стиль заголовка следующим образом:
text-transform: lowercase;
Теперь все буквы в заголовке по умолчанию будут строчными. text-transform позволяет изменять текст (первая буква заглавная, все буквы заглавные или все строчные) с помощью простого свойства.
22. Не используйте отрицательные поля, чтобы скрыть h1
Часто люди используют изображение для текста заголовка, а затем либо используют, display:none либо отрицательное поле, чтобы разместить h1 за пределами страницы. Мэтт Каттс, в то время глава отдела веб-спама Google, официально заявил, что это плохая идея, поскольку Google может подумать, что это спам.
Как прямо говорит Каттс, избегайте скрытия текста логотипа с помощью CSS. Просто используйте тег alt.
23. Проверяйте свой CSS и XHTML
Проверка вашего CSS и XHTML не просто дает чувство гордости: она помогает вам быстро обнаруживать ошибки в вашем коде. Если вы работаете над дизайном и по какой-то причине все выглядит не так, попробуйте запустить разметку и валидатор CSS и посмотрите, какие ошибки появляются. Обычно вы обнаружите, что где-то забыли закрыть div или пропустили точку с запятой в свойстве CSS.
24. Rem и Em вместо пикселей
Всегда велись острые споры о том, что лучше использовать при определении размеров шрифта: pixel ( px) или ems и rems. Пиксели — это более статичный способ определения размеров шрифта, а em более масштабируемы с различными размерами браузеров и мобильных устройств. С появлением множества различных типов просмотра веб-страниц (ноутбук, мобильный телефон и т. д.) ems и rems все чаще становятся стандартными для измерения размера шрифта, поскольку они обеспечивают максимальную гибкость.
25. Не стоит недооценивать список
Списки — отличный способ представить данные в структурированном формате, стиль которого легко изменить. Благодаря свойству display вам не нужно просто использовать список как текстовый атрибут. Списки также отлично подходят для создания меню навигации и тому подобного.
Многие новички используют divs для создания каждого элемента в списке, потому что не понимают, как правильно использовать списки. В будущем стоит попытаться освежить в памяти элементы списка обучения для структурирования данных.
26. Избегайте лишних селекторов
Легко бессознательно добавить в CSS дополнительные селекторы, которые загромождают таблицу стилей. Один из распространенных примеров добавления дополнительных селекторов — списки.
body #container .someclass ul li {....}В этом случае просто отлично сработало бы .someclass li.
.someclass li {...}Добавление дополнительных селекторов не приведет к Армагеддону или чему-то в этом роде, но они не позволят вашему CSS быть максимально простым и чистым.
27. Добавьте поля и отступы ко всем элементам
Современные браузеры довольно единообразны в способах отображения элементов, но устаревшие браузеры имеют тенденцию отображать элементы по-разному. Например, Internet Explorer отображает определенные элементы не так, как Firefox или Chrome, а разные версии Internet Explorer визуализируются по-разному.
Одно из основных различий между версиями старых браузеров заключается в том, как отображаются отступы и поля. Если вы еще не используете reset, вы можете определить поля и отступы для всех элементов на странице. Вы можете сделать это быстро с помощью глобального reset, например:
* {margin:0;padding:0;}Теперь все элементы имеют отступы и поля 0, если они не определены другим стилем в таблице стилей.
28. Используйте несколько таблиц стилей
В зависимости от сложности дизайна и размера сайта, иногда проще сделать несколько таблиц стилей меньшего размера, а не одну гигантскую. Помимо того, что дизайнеру проще управлять, несколько таблиц стилей позволяют вам не использовать CSS на некоторых страницах, которые в них не нуждаются.
Например, у меня может быть программа для опроса с уникальным набором стилей. Вместо того, чтобы включать стили опроса в основную таблицу стилей, я мог бы просто создать poll.css и таблицу стилей только для страниц, на которых отображается опрос.
Однако не забудьте принять во внимание количество выполняемых HTTP-запросов. Многие дизайнеры предпочитают разрабатывать несколько таблиц стилей, а затем объединять их в один файл. Это сокращает количество HTTP-запросов до одного. Кроме того, весь файл будет кэширован на компьютере пользователя.
29. При отладке сначала проверяйте закрытие элементов
Если вы замечаете, что ваш дизайн выглядит немного неуклюжим, есть большая вероятность, что вы остановили незакрытый </div>. Вы можете использовать валидатор XHTML, чтобы обнаружить всевозможные ошибки, подобные этой.
30. Попробуйте использовать Flexbox и Grid вместо Float
В прошлом было очень распространено и необходимо использовать float для создания любого вида макета. К сожалению, с float есть много проблем. Вместо этого вы можете начать использовать гораздо более мощные модули макета, называемые flexbox и grid layout. Flexbox поможет вам создавать одномерные макеты, а сетка поможет вам с двухмерными макетами.
31. Используйте! Important осторожно
Ключевое слово !important используется для обхода любых правил стилизации, указанных в другом месте для элемента. Это позволяет использовать менее специфические селекторы для изменения внешнего вида элемента. Новичку это может показаться простым способом стилизовать элементы, не беспокоясь о том, какие селекторы следует использовать. Однако этого следует избегать, потому что при использовании !important с большим количеством элементов в конечном итоге приведет к тому, что !important потеряет смысл, поскольку каждое правило CSS теперь будет обходить специфичность селектора.
Одним из возможных вариантов использования для !important является указание стиля сторонних элементов, добавляемых на веб-страницу, где вы не можете изменить исходную таблицу стилей, порядок ее загрузки и т. д.
Автор: Håvard Brynjulfsen
Источник: code.tutsplus.com
Редакция: Команда webformyself.