Руководство по написанию лучшего CSS |

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

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

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

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

02. Знайте, когда использовать сокращение CSS

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

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

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

03. Держите его сухим

Вполне возможно, что лучший совет для написания лучшего кода CSS — следовать методологии DRY. DRY означает «не повторяйтесь» — по сути, не используйте одни и те же фрагменты кода снова и снова.

Один из способов сохранить вещи в СУХОМ виде в CSS — сгруппировать их вместе. Давайте посмотрим на пример.

Оригинальный CSS

.menu li {
  color: red;
}

.menu li a {
  color: red;
}

Рефакторинг и DRY

.main li, .main li a {
  color: red;
}

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

Вы также можете использовать пользовательские свойства CSS, чтобы оставаться сухим. Пользовательские свойства создаются так:

:root {
  --primary-color: red;
}

А затем можно использовать в любом месте вашего кода CSS так часто, как вы хотите:

.main li, .main li a {
  color: var(--primary-color);
}

04. Не злоупотребляйте !important

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

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

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

05. Будьте последовательны

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

06. Называйте вещи разумно

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

Некоторые вещи, которые следует учитывать при выборе имен селекторов:

• Избегайте презентационных слов: Это те, которые связаны с цветом и расположением дисплея (например, зеленый текст или верхняя панель меню)
• Используйте только строчные буквы: CSS чувствителен к регистру, поэтому не создавайте такие имена, как Строка меню. Следует отметить, однако, что верблюжий случай (строка меню) является приемлемой практикой, просто в некоторых случаях нежелательной.
• Разделяйте несколько слов тире: Например, главное меню. Вы также можете использовать верблюжий чехол (главное меню), но опять же, это часто не предпочтительно
• Не будьте слишком конкретными: В конечном итоге вы будете использовать несколько селекторов для одного и того же типа элемента. Например, список-один а также список-два можно комбинировать, создавая единый элементы списка

07. Добавляйте комментарии, когда это уместно

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

Если вам интересно, когда могут понадобиться комментарии, вот несколько примеров:

• Код с комментариями: Если вы закомментируете определенную часть кода по определенной причине, оставьте комментарий с объяснением этой причины. Если вы этого не сделаете, вы можете не вспомнить, почему вы закомментировали это в первую очередь.
• Горячие исправления: Если вы добавляете «горячее исправление», было бы неплохо также добавить комментарий, объясняющий его.
• Напоминания: Скорее всего, вы одновременно работаете над несколькими проектами. Если ваше внимание отвлечено до того, как вы успели что-то завершить, вы можете использовать комментарии в качестве напоминания о том, что вам еще осталось сделать.
• Пояснения: Если часть кода неясна, и вы чувствуете, что объяснение поможет ее прояснить, добавьте комментарий — это так просто

08. Исследуйте Flexbox

Когда дело доходит до выравнивания элементов на странице, модуль Flexible Box Layout (или Flexbox) дает вам полный контроль. Используя flex-контейнеры и flex-элементы, вы можете точно определить, как все выглядит. Flexbox также позволяет размещать элементы на странице вертикально, что было невозможно с плавающими элементами.

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

Подробнее:

• 5 советов для сверхбыстрого CSS
• 5 лучших ресурсов для изучения HTML и CSS
• Какой CSS-фреймворк следует использовать?