user

Авторизация

Добро пожаловать!

Регистрация

Undefined666

Кодинг

7 ошибок CSS, которые нельзя повторять в 2023 году

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

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

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

css

Все браузеры актуальны

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

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

Не поддавайтесь искушению встроенного CSS

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

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

Столы: только по необходимости!

 К сожалению, до сих пор довольно часто можно найти веб-сайты компаний, использующие таблицы. Мало того, что загрузка этих элементов обходится дороже, они также имеют ряд ограничений, часто изображения необходимо обрезать, чтобы они соответствовали разделам макета, некоторые элементы макета не работают (например, использование height:100% для дочерних элементов < td>) и делают разработку и обслуживание крайне запутанными и сложными.

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

Будьте осторожны, используя !important

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

 Селекторы CSS имеют специфичность, правила, назначенные для #ids, переопределяют правила, назначенные для .classes, а правила встроенного CSS еще более специфичны. Подробнее о специфике селекторов можно узнать здесь .

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

Не используйте только абсолютные единицы

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

 Кроме того, вы можете воспользоваться препроцессорами, такими как Less и Sass, и определить переменные для размеров и цветов, чтобы упростить создание адаптивных макетов с помощью @media, поддерживая стандартизацию и упрощая внесение изменений. Для типографики вы можете использовать единицу измерения «em» или «rem» вместо «px» или «pt» для определения относительных размеров шрифта.

Уважайте теги HTML

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

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

 Чистый код и правильная семантика. Это уже добавляет безопасности и ясности в CSS. Но не заблуждайтесь, работа еще не сделана! Даже опытному разработчику страшно столкнуться со старым скриптом.

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

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