20+ ошибок CSS, которых должен избегать каждый веб-дизайнер

Введение

CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). Это язык таблиц стилей, используемый для описания представления документа, написанного на HTML или XML, включая цвета, макеты, шрифты и другие визуальные аспекты. CSS отделяет представление веб-страницы от ее содержимого, что облегчает поддержку и обновление сайта. Веб-разработчики используют CSS для создания визуально привлекательных и удобных веб-сайтов, совместимых с различными устройствами и браузерами. Он также позволяет создавать отзывчивые дизайны, адаптирующиеся к различным размерам и разрешениям экранов.

1. Неиспользование резервных шрифтов

При использовании пользовательских шрифтов в веб-дизайне важно указать резервные шрифты на случай, если пользовательский шрифт не загрузится или не будет поддерживаться браузером пользователя. Резервные шрифты позволяют сохранить читабельность и доступность содержимого для пользователей. Не все шрифты, которые могут понадобиться, доступны на каждом компьютере. Кроме того, иногда по неизвестным причинам шрифт, импортированный из какого-либо банка, например Google Fonts, может не загрузиться. Поэтому всегда предпочтительнее использовать обычные запасные шрифты, похожие на них. Например: шрифт sans-serif.

Неправильный

/* Пример неиспользования запасных шрифтов */ body {   font-family: Roboto; }

Правильно

/* Пример использования запасных шрифтов */ body{ font-family: Roboto, Arial, sans-serif; }

В данном примере основным шрифтом является «Roboto», а в качестве резервных шрифтов, если основной шрифт не загружается или не поддерживается, указаны Arial и sans-serif.

2. Использование пикселей для всего

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

Неправильный

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

/* Пример использования px для обозначения размера шрифта*/ body{ font-size: 16px; }

Правильный

Если вместо единиц «px» использовать относительные единицы измерения, такие как ‘rem’ или ’em’, то элементы будут масштабироваться в зависимости от размера экрана монитора.

/* Пример использования EM для размера шрифта */ body{ font-size: 1em; }

В данном примере 1em соответствует размеру шрифта по умолчанию в браузере пользователя. Использование em вместо px делает размер шрифта относительным к размеру области просмотра пользователя, обеспечивая адаптацию размера шрифта к различным размерам и разрешениям экрана.

3. Усложнение селекторов

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

Неправильный

/* Пример сложного селектора*/ body > div#content .post:nth-child(odd) .post-title a {   color: blue; }

Правильный

/* Пример упрощенного селектора*/ .post-title a {   color: blue; }

В данном примере сложный селектор нацелен на конкретную ссылку в заголовке поста. Однако такой селектор длинный и трудночитаемый, что затрудняет его поддержку. Упрощенный селектор нацелен на ту же ссылку, но он короче и легче читается, что упрощает его поддержку.

4. Повторение одного и того же кода

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

Неправильный

/* Пример повторения одного и того же кода*/ h1 {   font-size: 24px;   line-height: 1.5;   margin-bottom: 20px; }  h2 {   font-size: 24px;   line-height: 1.5;   margin-bottom: 20px; }

Правильный

/* Пример использования "mixin" для сокращения дублирования кода */ @mixin heading-style {   font-size: 24px;   line-height: 1.5;   margin-bottom: 20px; }  h1 {   @include heading-style; }  h2 {   @include heading-style; }

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

5. Использование имени цвета

Хотя использование таких названий цветов, как «красный», «синий» и «зеленый», может быть удобным, оно также может привести к несогласованности в цветовой палитре. Лучше использовать шестнадцатеричные или RGB-значения, чтобы обеспечить согласованность на всем сайте.

Неправильный

/* Пример использования названия цвета */ body{ color: red; }

Правильный

/* Пример использования цветового кода*/ body{ color: #ff0000; }

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

6. ошибки z-index

Свойство z-index управляет порядком расположения элементов на веб-странице. Однако использование z-index без надлежащего планирования и организации может привести к таким проблемам, как перекрытие или исчезновение элементов за другими элементами. Важно использовать z-index стратегически и избегать ненужных контекстов укладки.

Неправильный

/* Пример ошибок при использовании z-index */ .menu {   position: relative;   z-index: 10; }  .modal {   position: absolute;   z-index: 5; }

Правильный

/* Пример исправления ошибок z-index */ .menu {   position: relative;   z-index: 2; }  .modal {   position: absolute;   z-index: 3; }

В данном примере значения z-индекса установлены неверно, что приводит к неправильному наложению элементов. Чтобы исправить ситуацию, можно подкорректировать значения z-индекса, чтобы обеспечить идеальное наложение элементов и исключить их неожиданное перекрытие.

7. Неиспользование сокращений

Использование сокращенных CSS-свойств позволяет значительно сократить объем кода, что делает таблицы стилей более читабельными и удобными. Например, можно использовать сокращенное свойство margin вместо того, чтобы писать отдельные свойства для margin-top, margin-right, margin-bottom и margin-left.

Неправильный

/* Пример отказа от использования сокращений */ .container{ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; }

Правильный

/* Пример использования сокращений*/ .container{ margin: 10px 20px 30px 40px; }

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

8. Чаще использовать !important

Использование декларации !important в CSS может переопределить другие стили и привести к непредвиденным последствиям. Лучше по возможности избегать использования !important и использовать более конкретные селекторы или вообще избегать конфликтов в CSS.

Неправильный

/* Пример более частого использования !important */ .color {   color: red !important; }  .background-color {   background-color: blue !important; }

Правильный

/* Пример использования специфики вместо !important */ body .color {   color: red; }  #header .background-color {   background-color: blue; }

В данном примере использование !important может усложнить сопровождение и переопределение кода. Использование specificity вместо !important гарантирует, что стили будут применены правильно и при необходимости могут быть переопределены.

9. Использование встроенного CSS

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

Неправильный

<!-- Пример использования встроенного CSS --> <p style="color: red;">This text is red.</p>

Правильный

<!-- Пример использования внешнего CSS --> <head>   <link rel="stylesheet" href="style.css"> </head> <p class="red-text">This text is red.</p>

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

10. Отсутствие организации CSS

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

Неправильный

/* Пример отсутствия организации CSS */ .menu {   /* menu styles */ }  .modal {   /* modal styles */ }  .footer {   /* footer styles */ }  .header {   /* header styles */ }

Правильный

/* Пример организации CSS */ /* Header styles */ .header {   /* header styles */ }  /* Menu styles */ .menu {   /* menu styles */ }  /* Modal styles */ .modal {   /* modal styles */ }  /* Footer styles */ .footer {   /* footer styles */ }

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

11. Непоследовательное именование

Непоследовательные соглашения об именовании в CSS могут затруднить поддержку и обновление таблиц стилей. Чтобы сделать CSS более читаемым и удобным для сопровождения, используйте последовательные соглашения об именовании, например BEM (Block, Element, Modifier) или SMACSS (Scalable and Modular Architecture for CSS).

Неправильный

/* Пример непоследовательного именования */ .menu {   /* menu styles */ }  .main-menu {   /* main menu styles */ }  .secondary-menu {   /* secondary menu styles */ }

Правильный

/* Пример последовательного именования */ .primary-menu {   /* primary menu styles */ }  .secondary-menu {   /* secondary menu styles */ }

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

12. Использование правила @important в CSS

Использование правила @important может отменить все остальные стили и привести к нежелательным последствиям. Лучше использовать конкретизацию и каскад для указания конкретных элементов в HTML.

Неправильный

/* Пример использования @important в CSS */ .header {   color: red !important; }

Правильный

/*Пример использования специфики вместо @important */ body .header {   color: red; }

В данном примере использование @important в CSS может усложнить сопровождение и переопределение кода. Использование специфики вместо @important гарантирует, что стили будут применены правильно и могут быть переопределены при необходимости.

13. Использование идентификаторов вместо классов

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

Неправильный

/* Пример использования id вместо class */ #header {   /* header styles */ }  #menu {   /* menu styles */ }

Правильный

/* Пример использования класса вместо id */ .header {   /* header styles */ }  .menu {   /* menu styles */ }

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

14. Использование одной таблицы стилей для всех элементов

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

Неправильный

/* Пример использования одной таблицы стилей для всего */ /* Style for header */ header {   /* header styles */ }  /* Style for menu */ nav {   /* menu styles */ }  /* Style for body */ body {   /* body styles */ }  /* Style for footer */ footer {   /* footer styles */ }

Правильный

/* Пример использования одной таблицы стилей для всего */ /* Style for header */ header {   /* header styles */ }  /* Style for menu */ nav {   /* menu styles */ }  /* Style for body */ body {   /* body styles */ }  /* Style for footer */ footer {   /* footer styles */ }

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

15. Неиспользование сброса CSS

Сброс CSS — это набор правил CSS, используемых для сброса стилей по умолчанию, применяемых веб-браузерами. Использование сброса CSS позволяет обеспечить согласованность стилей в различных браузерах и устройствах.

Неправильный

/* Пример простого CSS без сброса */ * {   margin: 0;   padding: 0; }

Правильный

/* Пример простого сброса настроек CSS */ * {   margin: 0;   padding: 0;   box-sizing: border-box; }

Это CSS-правило устанавливает значение margin и padding для всех HTML-элементов равным 0 и устанавливает свойство box-sizing в border-box. Таким образом, размер элемента вычисляется на основе его содержимого, подложки и границы, а не полей.

16. Неиспользование семантического HTML

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

Неправильный

<ul>   <li><a href="#">Home</a></li>   <li><a href="#">About</a></li>   <li><a href="#">Contact</a></li> </ul>

Правильный

/* Пример использования семантического HTML */ <header>   <nav>     <ul>       <li><a href="#">Home</a></li>       <li><a href="#">About</a></li>       <li><a href="#">Contact</a></li>     </ul>   </nav> </header>

В данном примере элемент header используется для определения заголовка веб-страницы, элемент nav — для определения набора навигационных ссылок, а элементы ul и li — для определения неупорядоченного списка ссылок.

17. Использование слишком большого количества глобальных стилей

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

Неправильный

body {   font-family: Arial, sans-serif; }  p {   font-size: 16px; }  a {   color: #333; }

Правильный

/* Пример использования слишком большого количества глобальных стилей*/ * {   font-family: Arial, sans-serif;   font-size: 16px;   line-height: 1.5;   color: #333;   background-color: #fff; }

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

18. Неиспользование CSS-комментариев

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

Неправильный

/* Стилизация для моей страницы */ body {   background-color: #f0f0f0;   font-family: Arial, sans-serif; }  .header {   margin: 10px 0; }

Правильный

/* Пример использования CSS-комментариев */ /* Цвет фона и семейство шрифтов для всей страницы */ body {   background-color: #f0f0f0;   font-family: Arial, sans-serif; }  /* Отступ для секции заголовка */ .header {   margin: 10px 0; }

В этом примере добавлены комментарии, поясняющие назначение каждого правила CSS.

19. Неиспользование префиксов поставщика

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

Неправильный

.box {   -webkit-transform: rotate(45deg);   -ms-transform: rotate(45deg);   transform: rotate(45deg); }

Правильный

/* Пример использования префиксов поставщиков */ .box {   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg);   transform: rotate(45deg); }

В этом примере к свойству border-radius добавлены префиксы поставщиков для обеспечения его корректной работы в различных браузерах.

20. Не используется отзывчивый дизайн

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

Неправильный

.container {   width: 960px; }  .image {   width: 400px; }  .text {   width: 500px; }

Правильный

/* Пример использования отзывчивого дизайна */ .container {   width: 100%;   max-width: 1200px;   margin: 0 auto; }  @media only screen and (min-width: 768px) {   .container {     width: 80%;   } }

В данном примере элементу контейнера задана ширина 100% и максимальная ширина 1200px. Свойство margin используется для центрирования элемента контейнера. Медиазапрос также используется для применения различных стилей, когда ширина экрана больше или равна 768px. В этом случае элементу-контейнеру присваивается ширина 80%.

21. Неиспользование медиазапросов

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

Неправильный

.box {   background-color: #ccc;   width: 300px;   height: 300px; }  .box:hover {   background-color: #999; }

Правильный

/* Пример использования медиазапросов*/ .box {   background-color: #ccc;   width: 300px;   height: 300px; }  .box:hover {   background-color: #999; }  @media (max-width: 768px) {   .box {     width: 100%;     height: auto;   } }

В данном примере для элемента box задан цвет фона #f00. Медиазапрос также используется для применения другого цвета фона, если ширина экрана больше или равна 768px. В этом случае для элемента box задается цвет фона #0f0.

22. Отсутствие оптимизации производительности CSS

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

Неправильный

.box {   background-color: #ccc;   border: 1px solid #999;   padding: 10px; }

Правильный

/* Пример оптимизации производительности CSS */ .box {   background-color: #ccc;   border: 1px solid #999;   padding: 10px;   transition: background-color 0.3s ease-in-out; }  .box:hover {   background-color: #999; }

В данном примере CSS-правила написаны эффективно с использованием класса container для задания максимальной ширины и поля и класса box для задания границы и подложки. Селектор-потомок используется для применения свойства margin-bottom ко всем абзацам внутри элемента box.

23. Неправильное использование модели box

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

Неправильный

.box {   width: 300px;   height: 300px;   padding: 20px;   border: 1px solid #999;   margin: 10px; }

Правильный

/* Пример правильного использования коробочной модели */ .box {   width: calc(300px - 2 * 20px - 2 * 1px - 2 * 10px);   height: calc(300px - 2 * 20px - 2 * 1px - 2 * 10px);   padding: 20px;   border: 1px solid #999;   margin: 10px; }

В этом примере элементу box задана ширина 300px. Для padding, border и margin также установлены значения 10px, 1px solid #ccc и 20px соответственно. Это гарантирует, что общая ширина элемента box будет правильно рассчитана на основе его содержимого, padding, border и margin.

Заключение

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