Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind

В сфере искусственного интеллекта произошло заметное событие. melnik909 29 минут назад Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind Средний 6 мин 883 Блог компании RUVDS. com CSS * Веб-разработка * Обзор Привет, Хабр! Сегодня фронтендеры любят подход атомарных классов, в частности Tailwind.

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

Технические детали

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

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

В первой находятся стили, которые должны применяться к HTML-элементам, добавленным контент-менеджером, а во второй — уже все остальные. Мне лично нравится подход с использованием псевдо-класса :not(). Он позволяет не добавлять лишние классы, а главное — не думать над их названием.

Отраслевые последствия

Не люблю я много думать! Суть метода заключается в использовании атрибута class. Я добавляю его к каждому элементу интерфейса, но кроме тех, которые добавляются через редактор.

Это позволяет мне стилизовать заголовки, ссылки, параграфы и другие элементы с помощью псевдо-класса :not(). Для демонстрации рассмотрим стилизацию элемента a, который используется в навигации и в контенте. Главная Обо мне Этот текст нужен для демонстрации стилизации ссылок в тексте.

a:not() { } Как вы видите, для ссылки с классом . nav__link не добавляется свойство color со значением . В свою очередь, к ссылке в тексте не применилась группа стилей из класса .

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.