14 лучших практик CSS для начинающих

Когда вы начинаете заниматься веб-дизайном, ключевой элемент для того, чтобы все работало правильно и выглядело так, как вы хотите, попадает в руки CSS. Это сокращение от каскадных таблиц стилей, и они работают, позволяя вам стилизовать HTML-элементы любым способом.

И хотя вы можете экспериментировать с CSS любым количеством способов — чаще всего встроенным — есть лучший способ сделать это. И это соответствует ряду лучших практик, которым вы должны следовать, чтобы ваш код был функциональным, лишенным ненужного объема и хорошо организованным.

Сегодня мы выделим 14 лучших практик CSS для начинающих, но даже опытным профессионалам иногда стоит освежить в памяти основы.

1. Организуйте таблицу стилей

Первым делом при применении лучших практик CSS является организация таблиц стилей. То, как вы подойдете к этому, будет зависеть от вашего проекта, но, как правило, вы должны соблюдать следующие организационные принципы:

Быть последовательным

Независимо от того, как вы решите организовать свой CSS, убедитесь, что ваш выбор согласован во всей таблице стилей, а также на всем вашем веб-сайте.

От именования классов до отступов строк и структур комментариев — поддержание согласованности во всем этом поможет вам легче отслеживать свою работу. Кроме того, это гарантирует, что внесение изменений в дальнейшем не вызовет головной боли.

Свободно используйте разрывы строк

Хотя CSS будет работать, даже если он визуально уродлив, для вас и для любых других разработчиков, которые будут работать с вашим кодом, будет лучше, если вы будете использовать много разрывов строк, чтобы каждый фрагмент кода был отдельным и разборчивым.

Как правило, лучше всего размещать каждую пару свойств и значений на новой строке.

Создавайте новые разделы там, где это имеет смысл

Опять же, то, как вы настроите свои таблицы стилей, во многом будет зависеть от типа сайта, над которым вы работаете. Но, как правило, рекомендуется создавать разделы для стилей по мере их использования. Итак, раздел для текстовых стилей, раздел для списков и столбцов, раздел для навигации и ссылок и так далее. Вы также можете даже создавать разделы для определенных страниц, стиль которых может отличаться от остальных, таких как магазин или часто задаваемые вопросы.

Прокомментируйте свой код

Даже если только вы когда-либо будете видеть свой CSS, все равно будет хорошей идеей быть тщательным с вашими комментариями. Комментарии будут выглядеть следующим образом:

 /* This is what a standard CSS comment looks like */

Это облегчает вам понимание того, к чему относится каждый раздел, без необходимости вникать в каждую строку позже.

Комментарии могут помочь вам определить разделы, но вы также можете использовать их, чтобы дать представление о принятых вами решениях, особенно если вы чувствуете, что можете забыть об этом позже.

Используйте отдельные таблицы стилей для больших проектов

Это не применимо к каждому веб-сайту, но если у вас большой сайт, на котором требуется много специфического CSS, хорошей идеей будет использование нескольких таблиц стилей. Никто, включая вас, не должен долго прокручивать страницу, чтобы найти нужную строку кода.

Избегайте хлопот и создавайте отдельные таблицы стилей для разных разделов сайта, особенно если они будут иметь совершенно разные стили.

Например, вы можете создать одну таблицу стилей для глобальных стилей, а другую — для своего интернет-магазина с выделенными стилями для описания продуктов, заголовков или цен.

2. Встроенный CSS, внешний CSS и внутренний CSS

Существует три разных типа CSS, с которыми вам, возможно, придется иметь дело при создании веб-сайта и настройке его стиля. Давайте немного поговорим о том, что каждый из них из себя представляет и делает, а затем обсудим, что вы действительно должны использовать для своих проектов.

• Встроенный CSS. Это позволяет вам стилизовать определенные элементы HTML,
• Внешний CSS . Это включает в себя использование файла, такого как таблица стилей, для оформления сайта в целом.
• Внутренний CSS. Это позволяет вам стилизовать всю страницу, а не отдельные элементы.

Многие разработчики рекомендуют вообще избегать встроенного CSS, так как обычно его нельзя кэшировать, а также рекомендуется избегать разделения CSS на несколько файлов. По крайней мере, его следует использовать экономно.

Мы действительно видим необходимость в этом только в том случае, если вы будете использовать немного стиля в одном разделе, фрагменте текста или области одной страницы вашего веб-сайта. Вероятно, это единственная ситуация, когда встроенный CSS является рабочим решением.

Помимо этого, использование внешнего CSS или внутреннего CSS в зависимости от ваших потребностей является лучшим вариантом, поскольку он экономит ваше время и усилия. Определите стили один раз и применяйте их на своем веб-сайте. Бум — готово.

3. Минимизируйте таблицу стилей

Еще одна передовая практика CSS — минимизация ваших таблиц стилей. Существует множество инструментов минимизации для ускорения загрузки ваших таблиц стилей, в том числе непосредственно в Kinsta CDN.

Это позволяет настроить параметры минимизации кода для всего веб-сайта.

4. Используйте препроцессор

Препроцессор, такой как Sass/SCSS, позволяет использовать переменные и функции, лучше организовывать CSS и экономить время. Они работают, позволяя вам создавать CSS из синтаксиса препроцессора.

Это означает, что препроцессор похож на «CSS +», где он включает в себя пару функций, которые обычно не существуют в CSS сами по себе. Добавление этих функций чаще всего делает выходной CSS более разборчивым и удобным для навигации.

Вам понадобится компилятор CSS на сервере вашего веб-сайта, чтобы использовать препроцессоры. Некоторые из самых популярных препроцессоров включают Sass, LESS и Stylus.

5. Рассмотрите CSS-фреймворк

Фреймворки CSS могут быть полезны в некоторых случаях, но могут быть ненужными для многих людей, особенно если ваш веб-сайт невелик.

Фреймворки могут упростить быстрое развертывание больших проектов, а также избежать ошибок. И они обеспечивают преимущество стандартизации, что очень важно, когда несколько человек работают над проектом одновременно.

Все будут использовать одни и те же процедуры именования, одни и те же параметры компоновки, одни и те же процедуры комментирования и так далее.

С другой стороны, они также приводят к тому, что веб-сайты выглядят стандартно, и большая часть кода может оказаться неиспользованной.

Скорее всего, вы уже сталкивались с CSS-фреймворками. Bootstrap и Foundation — два самых популярных примера. Другие фреймворки включают Tailwind CSS и Bulma.

6. Начните со сброса

Еще одна вещь, которую нужно быстро применить на практике, — это начать работу по разработке со сброса CSS. Использование чего-то вроде normalize.css может сделать так, чтобы все браузеры отображали элементы страницы согласованным образом, следуя самым современным стандартам, чтобы свести к минимуму несоответствия браузеров.

Этот сброс на самом деле представляет собой небольшой файл CSS, который вы загружаете на свой веб-сайт, чтобы добавить более высокий уровень согласованности между браузерами к стилю элементов HTML, и служит обновленным способом выполнения сброса CSS.

7. Классы и идентификаторы

Следующее, на что следует обратить внимание при следовании рекомендациям CSS, — это то, как вы обращаетесь с классами и идентификаторами. Если вы не знакомы, давайте кратко определим оба:

• Учебный класс. Селектор класса работает, выбирая элемент с атрибутом класса. То, что находится в атрибуте класса, определяет, как выбирается HTML-элемент. В коде это выглядит так: .classname
• Я БЫ. ID, с другой стороны, работает, выбирая элемент с атрибутом ID. Атрибут ID должен совпадать со значением селектора, чтобы он работал. Вы можете определить идентификатор в CSS по этому символу: # .

Идентификатор используется для выбора одного элемента, в то время как класс используется для выбора более чем одного элемента. Вы бы использовали идентификатор, чтобы применить стиль к одному элементу HTML. Вы должны использовать класс для применения стиля к нескольким элементам HTML. Следование этому общему правилу поможет сохранить ваш код в чистоте и порядке, а также уменьшит количество ненужных или повторяющихся кодов.

Подобно нашему обсуждению встроенного и внешнего CSS выше, вы используете идентификатор для применения стиля к одному элементу. По сути, идентификаторы предназначены для стилизации исключений на странице, а не для общих стилей, которые будут применяться ко всей странице или веб-сайту.

8. Избегайте избыточности

Еще одна передовая практика CSS — избегать избыточности всегда и везде, где это возможно. Вот несколько общих советов, которым следует следовать, чтобы применить эту практику в своем рабочем процессе:

Используйте СУХОЙ метод

Метод DRY расшифровывается как «Не повторяйся» и в основном заключается в том, что вы никогда не должны повторять код в CSS. Потому что в лучшем случае вводить эти стили вручную снова и снова будет пустой тратой времени и повторяющимися действиями, а в худшем случае это может сильно замедлить работу вашего веб-сайта.

Хорошей практикой является просмотр вашего кода, чтобы удалить избыточность. Например, нет необходимости, чтобы теги дважды определяли размер шрифта в одном и том же разделе. Удалите повторы, и ваш код будет лучше читаться и работать лучше.

Используйте сокращение CSS

Сокращение CSS — отличный способ уменьшить объем кода, занимаемого вашим кодом, и при этом работать должным образом. Вы можете комбинировать несколько стилей в одной строке, если это имеет смысл. Например, если вы устанавливаете стили определенного элемента div, вы можете перечислить поля, отступы, шрифт, размер шрифта и цвет в одной строке.

Добавьте несколько классов к вашим элементам

Там, где это применимо, вы также можете избежать избыточности, добавив к элементу более одного класса. Например, если содержимое вашей страницы уже плавает влево благодаря классу .left , но вы хотите расположить столбец на странице справа, вы можете добавить это к элементу, чтобы избежать путаницы и указать CSS, какой конкретно элемент вы используете. хотел бы плавать влево поверх стандартного выравнивания по левому краю.

И самое приятное то, что вы можете добавить к элементу столько классов, сколько захотите, если они разделены пробелом.

Комбинируйте элементы, где это возможно

Вместо того, чтобы перечислять элементы один за другим, комбинируйте их, чтобы сэкономить место и время. Часто элементы в одной таблице стилей имеют одинаковые (или похожие) стили. Нет необходимости указывать шрифт, цвет и выравнивание для каждого текстового элемента на странице, если все они имеют одинаковый стиль. Вместо этого объедините их в одну строку следующим образом:

 h1, h2, h3, p { font-family: ariel, color: #00000 }

Избегайте ненужных дополнительных селекторов

Иногда ваш код становится немного беспорядочным, когда вы работаете над завершением дизайна своего сайта. Вот почему важно вернуться и удалить ненужные селекторы постфактум. Вы также должны следить за чрезмерно сложными селекторами. Например, если вы собираетесь стилизовать списки на своем веб-сайте, вам не нужно использовать такие селекторы, как «тело» или «контейнер» или что-то в этом роде. Просто .classname li { будет достаточно.

9. Как правильно импортировать шрифты

Правильный импорт и использование шрифтов — еще один способ сделать ваш CSS четким, лаконичным и оптимизированным.

Использование @font-face для импорта шрифтов

Вы можете добавить практически любой шрифт на свой веб-сайт, но вам нужно будет следовать определенной процедуре, чтобы убедиться, что он работает правильно.

1. Загрузите шрифт, который хотите использовать. Есть много мест, где вы можете найти шрифты, включая Google и Adobe. Убедитесь, что вы загружаете файл шрифта TrueType (.ttf) для выбранного шрифта.
2. Загрузите пользовательский шрифт, который вы хотите использовать, в генератор веб-шрифтов, предоставленный Font Squirrel. Загрузите набор веб-шрифтов после его создания. Он должен содержать несколько файлов, в том числе несколько разных файлов шрифтов с такими расширениями, как .ttf, .woff, .woff2 и .eot. Также должен быть включен файл CSS.
3. Загрузите набор веб-шрифтов на свой веб-сайт с помощью FTP. Конкретные инструкции для этого будут различаться в зависимости от вашего провайдера веб-хостинга, но, как правило, вы можете получить доступ к файлам своего сайта с помощью FTP-клиента или файлового менеджера в административном интерфейсе вашего веб-хостинга, например cPanel.
4. Обновите файл CSS с помощью текстового редактора. Любой текстовый HTML-редактор, который вы предпочитаете, подойдет как NotePad или Sublime. В этом файле будет указан «исходный URL». Вам нужно будет обновить это, чтобы отразить, где сейчас находится набор веб-шрифтов на вашем веб-сервере. Скопируйте путь к файлу, где каждый файл шрифта хранится на вашем веб-узле, в этот файл следующим образом:

 @font-face { font-family: "FontName"; src: url("https://sitename.com/css/fonts/FontName.eot"); src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"), url("https://sitename.com/css/fonts/FontName.otf") format("opentype"), url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg"); }

Затем вы можете использовать свои новые шрифты, добавив их в файлы CSS вашего сайта с помощью тега font-family .

Чтобы повысить производительность сайта и предотвратить случайные корректировки макета вашего сайта во время его загрузки, вы можете предварительно загрузить шрифты. Предварительная загрузка шрифтов и загрузка шрифтов WOFF2 (или наименьшего размера шрифта в противном случае) может значительно повысить производительность. Вы делаете это, добавляя строку кода в тег <head> . Better Web Type предлагает краткий пример:

 <link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

Еще одна вещь, которую вы можете сделать, это ограничить набор символов для ваших пользовательских шрифтов. Если вы используете только несколько символов из шрифта (например, для заголовка или логотипа), вам не нужно вызывать весь набор символов, достаточно нескольких, которые вам действительно нужны. Согласно новому коду, чтобы запросить только символы «Hello», вы должны сделать это следующим образом:

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Самостоятельные шрифты, когда это возможно

Описанный выше процесс предназначен для самостоятельного размещения шрифтов, но важно повторить, что это лучший подход. Это значительно ускоряет время загрузки и означает, что вы не полагаетесь на скорость другого сайта для завершения процесса загрузки вашего сайта.

Будьте осторожны с вариациями шрифта

Варианты шрифтов могут быть очень полезны для добавления забавных стилей на ваш сайт. Однако при неправильном использовании они также могут сломать ваш сайт.

Если вы назначите более одного стиля в font-variation-settings , скорее всего, они будут перекрываться, и один из них переопределит другой. Гораздо лучше не усложнять и использовать вместо этого свойства шрифта, как показано здесь:

 .bold { font-weight: bold; } .italic { font-style: italic; }

Используйте резервный шрифт

Хотя вы можете приложить усилия, чтобы добавить собственный шрифт на свой веб-сайт и использовать его с помощью CSS, он все равно не будет работать в 100% случаев, особенно если к нему обращается кто-то с устаревшим веб-браузером. Но вы по-прежнему хотите, чтобы эти посетители сайта имели приятный опыт просмотра.

Чтобы приспособиться к этому, важно установить резервный шрифт, который можно использовать, если ни один из ваших других шрифтов не будет использоваться. Для этого вы должны просто указать резервный шрифт после предпочитаемого шрифта при назначении семейства шрифтов . Таким образом, CSS сначала вызовет ваш предпочтительный шрифт, затем второй вариант, затем третий и так далее.

Согласно W3Schools, существует пять основных категорий семейств шрифтов. Далее следует список этих семейств с популярными резервными шрифтами, которые подходят для каждого из них.

• С засечками: Times New Roman, Georgia, Garamond.
• Без засечек: Arial, Tahoma, Helvetica
• Monospace: Курьер Новый
• Cursive: Brush Script MT
• Фэнтези: медная пластина, папирус

10. Сделайте CSS доступным

Каждый должен сделать свои веб-сайты доступными — в упор. И это касается и вашего подхода к CSS. Ваша цель должна заключаться в том, чтобы сделать ваш веб-сайт удобным для использования как можно большим количеством людей, и реализация мер по обеспечению доступности — фантастический способ добиться этого.

Вы можете сделать свой CSS доступным несколькими способами:

• Добавляйте к ссылкам вариации цвета, чтобы они выделялись.
• Сделайте всплывающие окна закрывающимися, нажав клавишу ESC. Те, кто использует программы чтения с экрана или увеличение, часто не смогут увидеть на экране значок «X», чтобы закрыть всплывающее окно, поэтому очень важно сделать так, чтобы их можно было закрыть нажатием клавиши.
• Некоторые устройства вообще не будут отображать всплывающие окна, поэтому убедитесь, что вся необходимая информация передается в другом месте.
• Элементы наведения (например, всплывающие подсказки) должны вызываться клавишей Tab, а также наведением мыши.
• Не удаляйте контуры. Браузеры автоматически отображают контур вокруг элементов, на которых в данный момент сфокусирована клавиатура. Вы можете отключить это с помощью layout:none , но на самом деле не стоит этого делать, так как это бесценно для тех, кто использует программы чтения с экрана или для тех, у кого плохое зрение и им требуются дополнительные точки выделения/фокусировки для навигации.
• Улучшить индикатор фокусировки. Как упоминалось выше, контуры вокруг выделенных элементов важны для навигации для многих, но контур по умолчанию часто едва виден. Вы можете изменить это, чтобы сделать его более заметным, используя :focus , чтобы установить стиль, который привлекает больше внимания к тому, что в данный момент находится в фокусе. Вы можете сделать что-то подобное с помощью :hover , чтобы усилить эффект обложки. Хороший пример изменения :focus в действии можно найти в руководстве по доступности из Вашингтонского университета:

 a { color: black; background-color: white; text-decoration: underline } a:focus, a:hover { color: white; background-color: black; text-decoration: none }

Этот фрагмент кода делает так, что ссылки отображаются черным текстом на белом фоне, но изменяются на белый текст на фоне, когда они находятся под фокусом клавиатуры (когда пользователь переходит к элементу с помощью табуляции). Тот же эффект возникает и при наведении.

11. Реализуйте соглашения об именах

На данный момент это может показаться незначительным, но то, что вы решите назвать в CSS, может иметь долгосрочные последствия — и может стоить вам времени и денег в будущем, если сделать это неправильно. Еще до того, как вы начнете писать CSS, вы должны определиться с рядом соглашений об именах и придерживаться их.

Это сэкономит вам много времени на отладку позже, так как вы с меньшей вероятностью сошлетесь на неправильный элемент при написании кода. Согласно FreeCodeCamp, хороший подход — придерживаться стандартного форматирования имен CSS, т. е. font-weight vs fontWeight .

Используйте соглашение об именах БЭМ

Хороший способ обеспечить согласованность имен — использовать соглашение об именах BEM. Весь смысл БЭМ в том, чтобы разбить пользовательский интерфейс на компоненты, которые вы можете использовать снова и снова.

БЭМ означает блок, элемент и модификатор. Но давайте разберемся, что это на самом деле означает.

• Блок . Блоком может быть любая часть дизайна на вашем сайте, например меню, заголовок, нижний колонтитул или столбец. Ваши блоки должны иметь такие имена, как .main-nav или .footer.
• Элемент . Элементы описывают биты и части, составляющие каждый блок. Подумайте о таких вещах, как шрифты, цвета, кнопки, списки или ссылки. При использовании соглашения об именах БЭМ элементы обозначаются двумя символами подчеркивания перед именем элемента. Итак, если бы мы хотели поговорить о шрифте, используемом в заголовке вашего веб-сайта, это выглядело бы так в CSS с соглашением об именах БЭМ: .header__font
• Модификатор . Последняя часть головоломки БЭМ — это модификатор. Модификаторы — это то, как вы устанавливаете стиль элемента внутри блока. К ним относятся такие вещи, как имена шрифтов, вес и размеры; цветовые значения; и значения выравнивания. Продолжая работать с приведенным выше примером, если вы хотите установить цвет шрифта в заголовке, вы должны написать его так, чтобы элемент и модификатор были разделены двумя дефисами: .header__font–red

Следование этому соглашению об именах — или чему-то еще, что решит ваша команда — может значительно облегчить редактирование и отладку в будущем.

12. Избегайте тега !Important

Еще одна лучшая практика, которую можно внедрить в свою работу с CSS, — избегать чрезмерного использования тега !important насколько это возможно.

Хотя он может решить проблемы, его использование часто приводит к тому, что вы полагаетесь на него как на костыль. И это может привести к беспорядку тегов !important по всему коду, что в конечном итоге может сломать ваш сайт.

На самом деле это сводится к специфичности. Если селектор очень конкретный, ваш веб-браузер определит, что он более важен, чем с менее конкретными селекторами. Тег !important можно использовать для определения свойств, которые более важны, чем другие.

Это может быть сложно, так как часто вам придется использовать несколько тегов !important, каждый из которых переопределяет предыдущий в определенных сценариях. Если делать это слишком часто, ваш сайт может сломаться или ваши стили будут загружаться неправильно. Чаще всего этот тег используется как краткосрочное решение, но часто он становится постоянным, а затем может вызвать проблемы позже, когда, в частности, придет время отладки.

Один из немногих случаев, когда использование тега !important считается общепринятым, — это предоставление конечному пользователю возможности переопределять стили для использования с программами чтения с экрана и другими вспомогательными средствами специальных возможностей. Это также полезно при работе с служебными классами.

13. Используйте флексбокс

Вы также можете извлечь больше пользы из Flexbox, пытаясь внедрить передовой опыт работы с CSS в свой рабочий процесс. Flexbox — это гибкий способ создания веб-макета и выравнивания элементов на странице вместо использования традиционной опции float.

Согласно CSS-Tricks, Flexbox — это гибкий блочный модуль, который представляет собой альтернативный способ структурировать ваш CSS, обращая внимание на то, как ваши макеты выровнены и распределены внутри контейнера. Самое приятное то, что размер самого контейнера даже не нужно знать, а содержащиеся в нем свойства будут «гибкими» при изменении размера контейнера. Это отличный способ разместить мобильные устройства.

Еще одно ключевое отличие заключается в том, что Flexbox «независим от направления», то есть его макеты не имеют вертикальной или горизонтальной структуры. Это делает его лучшим выбором для разработки сложных веб-сайтов и приложений, которые должны учитывать множество изменений ориентации экрана. Стандартные макеты CSS основаны на блоках, а макеты flexbox основаны на «flex-flow». Опять же, CSS-Tricks предлагает краткий рисунок, который хорошо иллюстрирует эту концепцию:

Элементы внутри flexbox располагаются по главной оси и поперечной оси , где каждый элемент и свойство внутри спроектированы так, чтобы изгибаться и перемещаться в зависимости от размера flex-контейнера.

14. Совет WordPress: не изменяйте файлы темы напрямую

Последняя из лучших практик CSS, которую мы сегодня обсудим, предназначена, в частности, для пользователей WordPress. Никогда не рекомендуется изменять файлы вашей темы напрямую. Любое обновление сайта может стереть эти изменения или сломать ваш сайт. Это не стоит риска.

Вместо этого вы можете использовать опцию « Дополнительный CSS » в настройщике тем, чтобы внести любые изменения, которые вы хотите. Тем не менее, вы должны иметь в виду, что это вставляет встроенный CSS и помещает его прямо в голову.

Если вы хотите внести только одно или два изменения, это может быть жизнеспособным вариантом, однако все, что вы поместите в поле « Дополнительный CSS », останется, даже если вы выполните обновление темы, обновление сайта или даже если вы измените темы. .

Теперь, если необходимы более надежные модификации CSS, вам лучше добавить их из пользовательской таблицы стилей CSS или с помощью дочерней темы, в которой вы напрямую изменяете файл style.css для дочерней темы. Этот метод также защищен от обновлений.

Резюме

Погружение с головой в создание полезного и точного CSS может показаться много для настоящего новичка, но если вы потратите время на изучение лучших практик, это может сэкономить вам много времени, усилий и головной боли в дальнейшем.

Мы надеемся, что этот сборник лучших практик поможет вам направить вас по правильному пути к созданию функциональных, полезных и доступных веб-сайтов на долгие годы. Удачи!