1. Введение

Хотя Css Module и Css-in-js в настоящее время более популярны, их использование может привести к чрезмерной зависимости.Злоупотребление классом для уникального позиционирования, что противоречит первоначальной цели селекторов CSS.

Статьи, прочитанные в этом выпуске:attribute-selectors-splicing-html-dna-css, чтобы вы заново поняли мощный селектор Css.

2 Резюме

Модуль Css и Css-in-js используют className в качестве селектора в большинстве сценариев, поэтому в этой статье основное внимание уделяется селекторам, чтобы увидеть, каково практическое использование селекторов.

селектор атрибутов

Если вы хотите включитьtitleатрибутdiv:

div[title]

выберите, чтобы включитьtitleДочерние элементы атрибутов, просто добавьте пробел:

div [title]

выберитеtitleсодержаниеdnaЭлементы:

div[title="dna"]

выберитеtitleсвойство содержитdnaЭлементы слова:

Обратите внимание, что ДНК должно быть словами, т. е. разделенными пробелами, например, «моя прекрасная ДНК» или «мутировать ДНК — это весело!»

div[title~="dna"]

Аналогично обычному, выберитеtitleсвойства, сdnaЭлементы в конце:

div[title$="dna"]

кdnaначало:

div[title^="dna"]

Если вы хотите выбратьdnaилиdna-zh, но не хочу совпадатьdnaer,Могу:

Этот сценарий обычно используется для интернационализации, например en en-us можно использовать|="en"

div[title|="dna"]

просто включитеdnaЭти три символа выбраны:

div[title*="dna"]

Действительно как регулярное выражение, вы можете использоватьiСоответствие идентификаторов без учета регистра:

div[title*="dna" i]

если хочешь найтиaэтикетка, естьtitleатрибут и className начинаются сgenesВ итоге может быть так:

a[title][class$="genes"]

Получить значение метки

Можно использоватьattrИдентификатор получает атрибуты элемента, выбранного текущим селектором, например, когдаhoverсостояние, оно будет отображаться в конце текстаtitleАтрибуты:

.joke:hover:after {
  content: "Answer:" attr(title);
  display: block;
}

Другое использование

В этой статье также представлены некоторые практические советы, такие как

Установите стиль в соответствии с типом поля ввода

input[type="email"] {
  color: papayawhip;
}
input[type="tel"] {
  color: thistle;
}

Изменить значок вкладки загрузки

a[download][href$="pdf"]:after {
  content: url(pdf-icon.svg);
}

Конечно, вы также можете выбрать какой-нибудь старый код для перезаписи стиля, например:

<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div>

div[bgcolor="#000000"] {
  /*override*/
  background-color: #222222 !important;
}

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

Объедините некоторые новые функции вкладки

НапримерdetailsЯрлыки — это нативные компоненты аккордеона html:

<details> <summary>List of Genes</summary> Roddenberry Hackman </details>

Мы можем использовать селектор атрибутов, чтобы определить стиль при его открытии:

details[open] {
  background-color: hotpink;
}

для нетasyncотмеченscriptОкраска этикетки, что является дружеским напоминанием об ошибке:

script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}

Раскрашивайте события JS, например, в качестве селектора можно использовать сработавшее событие мыши:

[OnMouseOver] {
  color: burlywood;
}
[OnMouseOver]:after {
  content: "JS: " attr(OnMouseOver);
}

Выберите скрытые элементы:

[hidden],
[type="hidden"] {
  display: block;
}

Есть много других, которые не перечислены один за другим. Заинтересованные читатели могут перейти к исходному тексту, чтобы продолжить чтение. Большая часть контента написана наСправочное руководство по селектору w3school, просто прочитайте его в сочетании со статьей, вы сможете понять его более глубоко, и в статье действительно есть несколько свежих селекторов, таких как селекторы событий JS, селекторы тегов атрибутов HTML5 и так далее.

3 Интенсивное чтение

Эта статья иллюстрирует силу селекторов CSS, но когда дело доходит до модуля css или инженерного кода css-in-js, нам часто трудно слишком много практиковаться по следующим причинам:

Изменения структуры DOM, о которых беспокоились

В развитии бизнеса сыпется большой спрос. Может через неделю DOM-структура изменилась до неузнаваемости, и даже если это обычный макет святого Грааля, старая версия может использовать макет таблицы, а молодой парень приходит и рефакторит его непосредственно с помощью div + flex , вы будете беспокоиться о том, что селекторы таблиц, написанные ранее, однажды перестанут работать.

Возможно, сегодняшний селектор div завтра будет заменен тегом статьи из-за семантической трансформации.

Самая большая причина в том,Слишком много реализаций для одного визуального интерфейса, не только метки могут быть разными, но и свойства css table, block, flex, grid необязательны, а свойство grid также приведет к тому, что визуальная структура не будет полностью соответствовать структуре DOM.

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

Осмелитесь ли вы переопределить глобальные стили?

Мы исключаем теги и только глобально переопределяем атрибуты, что может частично обойти ограничения структуры DOM, но такие глобальные переопределения стилей имеют разные мнения у разных людей.

Команда Сяомина очень хорошо разбирается в использовании CSS.Каждый день они тратят час на обсуждение CSS-архитектуры проекта и абстрагирование стиля общих требований, и все согласны с этим решением.В их команде очень крутая кнопка и анимация, через<button animate />Его можно завершить, взаимодействие между страницами очень плавное, пользовательский интерфейс унифицирован, а интерфейсный код также очень прост и элегантен.

Уровни команды Xiaobai неравномерны. Некоторые люди всегда используют только макет таблицы, в то время как другие всегда хотят использовать некоторые экспериментальные свойства CSS в производственной среде. Xiaobai абстрагирует файл CSS глобального стиля, но у команды нет времени на общение, и даже некоторые люди, я также вводил много глобальных стилей css в приват.Всегда есть люди, жалующиеся, что их стили перезаписываются глобально.В конце концов, Xiaobai даже пришлось написать это при входе на свою страницу.*: unsetОчистите все виды странных отвлекающих факторов глобального стиля, он хочет очистить проклятый файл глобального стиля CSS, но он знает, что это будет большая катастрофа.

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

Влияние модульного мышления JS

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

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

Тем не менее, большинство библиотек UI-компонентов имеют собственные стили, и у них есть своя философия дизайна, но почему вы испытываете отвращение сейчас, а не тогда, когда использовали Bootstrap?

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

Однако сейчас эпоха Css-in-js или, по крайней мере, эпоха css-in-npm, все устанавливается с помощью npm, все является модульным, и часто мы используем компонент пользовательского интерфейса, чтобы просто быть в определенном месте. Локальное использование, и вы не хотите принимать глобальное загрязнение стиля, философию визуального дизайна и не хотите читать его CSS-документы. Поэтому хорошие библиотеки компонентов, как правило, используют css очень конвергентно и стараются не влиять на среду проекта пользователя.

Если стили вашего проекта были глобально перезаписаны сторонним пакетом, который необходимо установить, и каждое изменение глобального стиля похоже на ходьбу по тонкому льду, вам могут быть более противны селекторы css, и вы предпочтете более безопасные css или даже css -in-js делают className каждого компонента уникальным, чтобы добиться изоляции детализации меток.

4 Резюме

Автор считает, что в определенной среде, такой как компонент или независимо ответственный модуль, более целесообразно использовать селекторы css, которые могут сделать код стиля более удобным для чтения, а структуру DOM более освежающей. Но, пожалуйста, обратите внимание на объем: если это не консенсус, достигнутый всеми, лучше не ставить его в глобальном стиле.

Даже если стиль проекта очень ясен,aЯрлык должен быть красным, прежде чем ставить это правило в глобальный стиль, подумайте об этом, это не сломает определенное приложениеaСтили библиотеки компонентов для меток для имитации кнопок?

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

Все стили контролируются className, что может быть компромиссным решением до того, как выйдет shadow dom.Эта статья больше посвящена описанию красоты дизайна селекторов CSS, но нам нужно использовать его рационально.

Адрес обсуждения:Интенсивное чтение «Использование селекторов свойств CSS» · Выпуск № 113 · dt-fe/weekly

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