10 распространенных ошибок в CSS

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

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

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

.example{
margin-top:10px;
margin-bottom:19px;
margin-left:10px;
margin-right:19px;
}

А вот так лучше и проще

.example{
margin:10px 19px;
}

2. Адаптивный дизайн

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

.container{
width:1000px;
}

А вот так правильнее.

.container{
width:100%;
}

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

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

Еще один момент: если для элемента требуется дополнительное свойство, используйте другой класс и для этого класса напишите отдельное правило это уменьшит дублирование кода. Пример как не стоит делать

.box1{
width:50%;
margin:20px;
}
.box2{
width:50%;
margin:20px;
}

Исправим

.box1,.box2{
width:50%;
margin:20px;
}

4. Резервный шрифт

Резервный шрифт — это шрифт, который используется, когда основной шрифт еще не загружен или в нем отсутствуют глифы, необходимые для отображения содержимого страницы. Например, приведенный ниже CSS указывает, что семейство шрифтов Helvetica следует использовать в качестве запасного шрифта для «Arial». Как не стоит делать:

body{
font-family:Helvetica;
}

Правильно

body{
font-family:Helvetica, Arial,Sans-serif;
}

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

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

Лучше всего использовать шестнадцатеричные коды цветов вместо названий цветов. Так не стоит делать

.example{
color:green;
}

 Вот так правильнее:

.example{
color:#00ff00;
}

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

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

Иногда это хорошо, но лучше не усложнять:

header .navigation ul.nav-links{
list-style-type:none;
}

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

.nav-links{
list-style-type:none;
}

7. Ошибки при использовании Z-индекса

Многие разработчики используют очень высокое значение z-index, чтобы разместить элемент впереди.

.modal-container{
z-index:545;
}
.modal{
z-index:5345345;
}

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

.modal-container{
z-index:1;
}
.modal{
z-index:2;
}

 8. Несоответствие имен 

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

9. Когда использовать класс и идентификатор

 Когда мы получаем доступ к значению элемента, лучше использовать «id», при подготовке проектов мы классифицируем идентификаторы, которые уникальны, классы мы можем использовать несколько раз.

10. Игнорирование кросс-браузерной совместимости

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

Прежде чем писать новые свойства CSS в коде, проверьте, какой браузер поддерживает какие свойства CSS, используя https://caniuse.com/ .

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