Автор: Хосе Гранха Переводчик: Front-end Xiaozhi Источник: среда
Если у вас есть мечты, у вас есть галантерея, вы можете поискать в WeChat [Великое переселение в мир] Следуйте за этой Шуванжи, которая все еще моет посуду ранним утром. Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.
Язык CSS является неотъемлемой частью Интернета, каким мы его знаем сегодня. Это дает нам возможность нарисовать, как элемент будет отображаться на экране, веб-странице или другом носителе.
Это просто, мощно и декларативно. Мы можем легко реализовать сложные вещи, такие как темный/светлый режим. Однако существует много недоразумений и неправильного его использования. Они превращают разметку CSS в сложный нечитаемый и немасштабируемый код.
Как мы можем предотвратить это? Избегайте наиболее распространенных ошибок, следуя рекомендациям. В этой статье мы обобщим 5 самых распространенных ошибок и как их избежать.
1. Не предварительно спроектированный
Делайте это немедленно, не думая, чтобы задача могла быть выполнена быстрее, что также дает нам ощущение скорости и достижения. Но в долгосрочной перспективе это имеет обратный эффект.
Прежде чем писать код, вы должны ясно подумать. Какой подход мы будем использовать для разработки компонента? Хотим ли мы создавать наши компоненты атомарно? Готовы ли мы создать компонуемую служебную систему? Нужна ли нам уже встроенная библиотека пользовательского интерфейса? Хотим ли мы, чтобы наш CSS имел глобальную область действия или область действия для каждого компонента?
Наличие четкой цели поможет нам выбрать лучший инструмент. Это убережет нас от избыточности и нарушений DRY.Существует множество эффективных способов разработки приложения. Самая распространенная неэффективная импровизация.
Наш код должен быть предсказуемым, легко расширяемым и поддерживаемым.
См. пример:
/* ❌ 到处添加离散值 */
.card {
color: #edb361;
background-color: #274530;
padding: 1rem;
}
/* ✅ 定义基于主题的属性 */
:root {
--primary-bg-color: #274530;
--accent-text-color: #edb361;
--spacing-unit: 0.5;
}
.card {
color: var(--accent-text-color);
background-color: var(--primary-bg-color);
padding: calc(var(--spacing-unit) * 2rem);
}
В приведенном выше примере мы видим, что при использовании переменных CSS для оформления темы все становится читабельным и понятным. Первый.card
Определение кажется совершенно случайным, и этот компонент нелегко расширить.
2. CSS Code Smells
Китайский перевод Code Smell обычно означает «запах кода» или «запах кода», что является намеком на то, что где-то в коде есть ошибка, и разработчики могут использовать этот запах (запах) для поиска проблем в коде.
Запахи кода — это не ошибки. Также они не мешают нормальному функционированию системы. Это просто плохие практики, которые затрудняют чтение и поддержку нашего кода.
Здесь перечислены некоторые из наиболее распространенных и способы их преодоления:
:: символ
Использование в псевдоэлементах и псевдоклассах::
Символы очень распространены. Это часть старой спецификации CSS, и браузеры продолжают поддерживать ее в качестве запасного варианта. Однако мы должны использовать в псевдоэлементах::
,Например::before
, ::after
, ::frist-line
..., используется в псевдоклассах:
,Например:link
, :visited
, :first-child
...
Объединение классов с помощью строк
Очень популярно использовать препроцессор Sass, чтобы помочь с нашей кодовой базой CSS. Иногда при попытке DRY мы подключаемся&
Оператор для создания класса.
.card {
border: 0.5 solid rem #fff;
/* ❌ failed attempt to be dry */
&-selected {
border-color: #000;
}
}
Когда разработчик пытается выполнить поиск в кодовой базе.card-selected
Перед классом, кажется, нет никаких проблем. Разработчикам будет трудно найти этот класс.
Неправильное использование сокращений
Сокращения CSS великолепны и позволяют нам избежать слишком многословного кода. Однако иногда мы не используем их намеренно. В большинстве случаев условное обозначение фона используется случайно.
/* ❌ 由于我们只是在设置一个属性,所以不需要使用简写。*/
.foo {
background: #274530;
}
/* ✅ 使用正确的CSS属性 */
.foo {
background-color: #274530;
}
Неправильное использование !important
!important
Правила используются для переопределения определенных правил. Его использование в основном сосредоточено на переопределении стиля, который нельзя переопределить никаким другим способом.
Он обычно используется для более конкретного выбора, может завершить задание сценария.
<div class="inner">
<p>This text is in the inner div.</p>
</div>
<style>
.inner {
color: blue;
}
/* ❌ 重写 color */
.inner {
color: orange !important;
}
</style>
<style>
.inner {
color: blue;
}
/* ✅ 使用一个更具体的选择器规则,该规则将优先于更一般的规则。 */
.inner p {
color: orange;
}
</style>
Значение атрибута принудительного использования
Магическое число очень часто появляется в кодовых базах CSS. Они вносят довольно много путаницы. Иногда мы можем найти в коде длинные числа, потому что разработчик переопределяет свойство, в котором он не уверен.
/* ❌ Brute 强制使这个元素位于z轴的最前面 */
.modal-confirm-dialog {
z-index: 9999999;
}
/* ✅ 提前计划并定义所有可能的用例 */
.modal-confirm-dialog {
z-index: var(--z-index-modal-type);
}
3. Нет области видимости имен классов CSS.
Из-за особенностей языка CSS очень легко непреднамеренно получить элемент с неверным именем класса. Эта проблема очень частая, поэтому решений этой проблемы довольно много.
На мой взгляд, лучшие два:
- Используйте соглашения об именах
- CSS Modules
соглашение об именовании
Самая популярная номенклатура – БЭМ 101. это представляетBlock
,Element
,Modifier
метод.
[block]__[element]--[modifier]
/* Example */
.menu__link--blue {
...
}
Его цель — создавать уникальные имена, обучая разработчиков взаимосвязи между HTML и CSS.
CSS Modules
Меня больше всего беспокоит подход БЭМ, который требует много времени и зависит от реализации разработчиком. Модули CSS выполняются на стороне препроцессора, что делает его безошибочным. Он сгенерировал случайные префиксы/имена для имен классов нашего модуля CSS.
4. Используйте единицы измерения пикселей
Пиксели используются довольно часто, потому что поначалу они кажутся простыми и интуитивно понятными. Верно и обратное. Долгое время пиксели больше не основывались на оборудовании. Они просто основаны на оптическом эталонном блоке.
px
является абсолютной единицей. Что это значит? То есть мы не можем масштабироваться должным образом, чтобы встретить больше людей.
Что мы должны использовать вместо этого? Относительные единицы - это путь. Мы можем положиться на них, чтобы лучше выразить наши динамические макеты. Например, мы можем использоватьch
для выражения основанного на характереdiv
ширина.
.article-column {
/* ✅ 我们的元素将最多容纳20个继承的字体大小的字符。 */
max-width: 20ch;
}
как правило,px
Наиболее часто используемые сменные блоки:rem
а такжеem
. Они представляют относительный размер шрифта относительным образом от поля к тексту.
-
rem
значит относительно корняfont-size
размер. -
em
Указывает размер относительно размера элемента.
используяrem
, мы сможем выразить макет в соответствии с предпочтительным размером шрифта пользователя.
На приведенном выше снимке экрана мы видим, что на основеrem
Как макет ячеек может расширяться и адаптироваться к различным размерам шрифта по умолчанию.
5. Игнорируйте поддержку браузера
Приступая к разработке веб-сайта, очень важно определить наших целевых клиентов. Очень часто этот шаг пропускают и сразу переходят к кодированию.
Почему это важно?Это помогает нам понять, на каком устройстве будет использоваться наше приложение. После этого мы можем определить, какие браузеры и версии мы будем поддерживать.
Пока мы можем предоставить соответствующий запасной вариант, мы по-прежнему можем принять решение о принятииsubgrid
Такая почтовая функция. Всегда полезно определить прогрессивный функциональный опыт. Когда функция получает больше поддержки, мы можем постепенно отказываться от ее запасных вариантов.
картинаcaniuse.comилиbrowserslist.devПодобные инструменты полезны в этом отношении. картинаpostcss
Такие инструменты идут в комплектеautoprefixer
Функции помогут нашему CSS получить более широкую поддержку.
Суммировать
Мы увидели, как улучшить наш код CSS. Следуя некоторым простым рекомендациям, мы можем создать декларативную, повторно используемую и удобочитаемую кодовую базу. Мы должны вкладывать столько же усилий в CSS, сколько и в Javascript.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
оригинал:уровень up.git connect.com/top-5-css-no…
Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.
Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.