Как сделать вложенность в css

Вложенность тегов CSS

Как записать на CSS, чтобы когда .second:checked (чекбокс был нажат) у .third фон менялся на красный?

Или может есть варианты без чекбокса?

На данный момент, в CSS нет возможности обратиться к древу выше.
Можно вот так:

Еще вариант на JS, если элементы не в одном родительском узле.

Вот такой способ. Минус — у label нет состояний, которые можно стилизовать.

По идее ТС нужно пересмотреть свой подход к данному вопросу, но уж если хочется заморочиться с вложенностью, как сделал участник Геннадий Журов, то можно построить что-то подобное, но вложенность нарушить придется в любом случае, потому что мы лишимся либо "чекнутого инпута", либо закрашенного блока:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 checkbox или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как линтовать ваш Sass/CSS правильно с помощью Stylelint

Это перевод англоязычной статьи How to lint your Sass/CSS properly with Stylelint автора Scotty Vernon. Перед тем, как представить вам перевод, я бы хотел выразить огромную благодарность Андрею Ситнику за помощь в вычитке перевода. И отдельно сказать ему спасибо за прекрасный инструмент PostCSS, без которого не было бы и Stylelint.

Линтинг файлов стилей. Так мало людей делают это. Однако, гораздо больше людей должны проверять файлы стилей, особенно в разношёрстных командах, где много человек правят код.

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

Содержание:

Вступление

Что такое линтинг?

Линтинг — это процесс проверки исходного кода на программные и стилистические ошибки. Это самый лучший способ выявления распространенных, и не очень, ошибок во время набора кода. Это как «проверка правописания» для языков программирования. В то время как линтинг полезен при самостоятельной работе, он становится незаменимым при работе в команде — когда много (неосторожных) рук касаются кода. Линт или линтер — инструмент реализующий проверку качества кода. Линтеры доступны для большинства языков: C, Python, JavaScript, CSS и прочих.

Почему мы должны линтовать наши CSS?

Есть много причин линтить файлы стилей. Линтинг поддерживает единообразие кода, показывает ошибки в кодовой базе, помогает убрать ненужный код, а также помогает избежать опасностей из-за лени программистов.

Давайте рассмотрим несколько примеров.

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

Они так же хороши в отлове описок (опечаток), как в примере с неправильным цветом. Ошибки такого типа могут сломать внешний вид страницы, если не будут отловлены.

Сегодня большинству CSS3-свойств больше не нужны префиксы. Линтинг позволяет найти ненужные префиксы и очистить устаревший код. Линтинг префиксов особенно полезен в паре с Autoprefixer — он позволит вам убрать все префиксы из исходного кода и добавить нужные, в зависимости от настроек Autoprefixer, учитывая вашу аудиторию.

Повторение свойств часто скрывает серьёзные ошибки. Что если разработчик хотел переход для обоих свойств opacity и background-color ? В этом случае эффект перехода для opacity будет утерян. Линтинг покажет эту ошибку.

Достаточно убедительно? Если нет, то продолжайте чтение.

Представляем Stylelint

Stylelint — супер-расширяемый CSS-линтер на JS, который вы можете настроить под свой вкус. Это самое новое и лучшие в мире линтинга CSS. Он поддерживает синтаксис по последним черновикам спецификаций, понимает другие CSS-подобные синтаксисы, а также расширяется с помощью плагинов. Более того, он гораздо быстрее scss-lint, поскольку написан на JavaScript, а не на Ruby.

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

Линтер разработан на базе PostCSS, так что он понимает любой синтаксис, который может распарсить PostCSS, включая SCSS (и Less, прим. переводчика).

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

Главное предназначение PostCSS — это делать одну вещь, и делать ее хорошо; всё остальное делают плагины. Сейчас насчитывается более 200 плагинов для PostCSS и, поскольку все они написаны на JavaScript, они работают супер-быстро!

PostCSS и Stylelint — это то, что мы будем использовать, чтобы линтить наши стили в следующем разделе.

Настройка

Конфигурационные файлы Stylelint

Красота Stylelint в том, что он не навязывает вам один стиль. Вы создаете свои наборы правил с нуля, так что он может быть настолько заносчивым и упрямым, насколько вы захотите. Вам не придётся тратить время на отключение ненужных правил, чтобы начать работу.

Документация правил Stylelint является хорошей отправной точкой. Так же вам доступны стандартные настройки Stylelint, которые достаточно хорошо продуманы, чтобы использовать их для ваших проектов.

Мы начнём с небольшого файла, чтобы покрыть самое важное. Лично я считаю, что иметь чистый файл, лучше, чем переопределять стандартный файл настроек от команды Stylelint — лучше добавлять, что вам нужно, а не отключать лишнее.

Он выглядит так:

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

Как линтовать ваш CSS

Давайте начнем с линтинга чистого CSS. Вы будете удивлены как легко его настроить! Инструменты, которые вам нужно установить: gulp-postcss , postcss-reporter , и stylelint . Давайте сделаем это.

И вот файл для Gulp, чтобы собрать все это вместе:

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

А ещё круче то, что вам нужно изменить только одну строку, чтобы включить поддержку SCSS. Давайте сделаем это сейчас…

Как линтовать ваш Sass

Линтовать файлы SCSS супер-просто с PostCSS. Единственное различие между линтингом CSS и SCSS в том, что вам нужно научить PostCSS понимать синтаксис .scss , и это так же просто, как установка postcss-scss и изменение одной строки в задаче выше.

Вот полный файл для Gulp, чтобы линтить файлы SCSS:

Так легко! И это всё! Теперь вы можете линтить и CSS, и файлы SCSS.

Продолжайте читать, если вы хотите узнать о расширении Stylelint с помощью плагинов, и почему вы захотите это сделать.

Расширяем Stylelint плагинами

Так же, как PostCSS, Stylelint расширяется с помощью плагинов, что на самом деле удивительно!

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

Реальный пример: линтинг на практике

Проект-менеджер, который любит кодить

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

Что может быть хуже?

Твит высказывания проект-менеджера

Вот код, который менеджер добавляет в проект:

Вложенность селекторов в Sass — это плохо! Используем линтер!

Вложенность селекторов является необходимым злом при разработке с использованием Sass; это действительно полезно при правильном использовании, но это один из способов путешествие в ад специфичности, если ей злоупотреблять. Вложенность, как правило, является последствием лени разработчика и в результате получается код, который трудно читаем, и плохо написан. Первое правило &:hover <. >может быть на 10 строк ниже определения родительского компонента, в результате сложно понять к чему оно относится. Однако, более важно то, что вложенность здесь вообще не нужна.

Вот CSS, в который будет скомпилировано правило, показанное выше:

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

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

На счастье, для этого есть плагин! С помощью Stylelint мы можем установить плагин stylelint-statement-max-nesting-depth , и установить максимальный уровень вложенности, чтобы избежать излишней вложенности.

И просто добавляем в наш файл для Gulp следующий код в таск scss-lint :

Для команд, которые знают, что они делают, я бы установил максимальный лимит вложенности равный трём. (Установите его ниже для неопытных команд)

С максимальным лимитом вложенности равным трём, Stylelint заставит проект-менеджера исправить код выше. Проект-менеджер пойдёт, подумает и вернётся с таким кодом:

Исправленная версия кода более читаемая, но всё ещё не подходит. Там всё равно есть ненужная вложенность селекторов! Линтер знает это и заставляет проект-менеджера переосмыслить его реализацию, чтобы сборка прошла.

Вот, теперь мы уже пришли к чему-то! Теперь это будет принято линтером, и сборка пройдёт. Код выше не плох, но он всегда может быть лучше! Если вы хотите быть действительно суровым, вы можете отключить вложенность вовсе, оставив только @ правила (например для @media , — примечание переводчика). Это заставит членов команды, включая проект-менеджеров серьезно думать о том, что они пишут.

Отлично! Без линтинга стилей при сборке, который заставлял рефакторить код — эта опасная лень не была бы поймана и качество кода постепенно бы деградировало.

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

В добрый путь, мой друг разработчик и дизайнер!

Послесловие

Установи сборку Sass в gulp в один клик

Хотели бы вы использовать мощь линтинга Sass, вместе с общим процессом gulp-сборки Sass бесплатно, просто установив небольшой пакет через npm ?

Я думаю да. У меня есть опенсорс проект под названием Slushie, вы можете прочитать об этом в моем блоге.

Об авторе

Scotty Vernon (Скотти Вернон) является разработчиком-творцом и директором Wildflame Studios. Он работал с такими проектами, как BBC Sport, BBC R&D и другими. Он всегда не далеко от твиттера, любит немецкое пиво, игры, а иногда и писать в третьем лице.

Как реализовать вложенность классов в SCSS?

Как правильно обратиться к дочернему элементу селектора card__avatar если имя дочернего элемента меняется вот таким образом card-avatar__image ? т.е при попытке обратиться к нему вот так:

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

Это возможно сделать или нет? Может, есть всё таки какие-нибудь варианты?

  • Вопрос задан более года назад
  • 397 просмотров

Простой 11 комментариев

  • Facebook
  • Вконтакте
  • Twitter

Ankhena

Это жестоко.
А если это БЭМ, то и нельзя.
А если это не БЭМ, то почитайте про БЭМ и сделайте нормально.

А еще, судя по виду, половина оберток просто лишняя.

Только не могу придумать зачем одной карточке и сама карточка и блок и иннер и бокс.
Дизайнеры бывают затейниками, но обычно не до такой степени.

notiv-nt

Helen_Glitch

SpiderPigAndCat

Ankhena

Kozack

На выходе получил

Так, что собственно не так?

Ankhena

Helen_Glitch

Ankhena можете показать пример?

Alex вы неправильно поняли. Мне нужно другое т.е это не то что нужно:

Нужно чтобы при конвертировании SCSS в CSS — было так:

Ankhena

Kozack

Елена Валентайн, Ну, так так и пишите

SkiperX

serjikz

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

Какое может быть решение — вы можете сделать переменную внутри родителя. То есть вот так:

Никто не спорит, что может быть миксин зайдет как-то, но сейчас не хочется с этим возиться (и смысла не вижу вообще).

Можно все переменные возможных названий повтыкать как раз в самое начало и из них комбинировать всё, что надо (как раз на основании этого можно и миксин пробовать пилить с циклом возможно и тд и тп).

Но честно — лучше воспользоваться БЭМ и всем, что он пропагандирует. Если вы у себя в профиле пишите, что вы front-end — пожалуйста, ведите себя как front-end и не пишите плохой код.

  • Facebook
  • Вконтакте
  • Twitter

Helen_Glitch

Сергей ZSA Я не хочу разводить пустые холивары, поэтому отвечу кратко и по делу: После прочтения комментариев и Вашего ответа, сложилось такое мнение что все "хорошие" разработчики слепо и безмятежно используют БЭМ. Очень странно и это с учетом того, что у него, как и у других методологий и подходов есть свои "огромные" минусы, плюс добавить ко всему этому тот факт, что есть моменты, когда использование данной методологии — станет путём в никуда. БЭМ не панацея. Поэтому не нужно при каждом удобном случае советовать данный инструмент. Я отлично знакома с ним, но мне он не понравился по многим причинам, а насчёт того, что Вы пишите про frontend — смысл ваших слов понятен, но он не к месту. Мы живём не в том мире, где всё идеально. Где каждый разработчик читает документацию, придерживается единого стиля, пишет чистый и аккуратный код и вылизывает его до блеска. Это не то место, где любая задача решается — на раз, два, три. Поэтому давайте не будем выходить за рамки: Вопрос — Ответ. Если я захочу получить критику по своему коду, я обязательно сообщу об этом, но наверное не в этот раз?

И да. Ваш код не работает. Хотя, врать не буду. Он работает если вот тут: $avatar: ".#<$parent>-avatar"; убрать точку. Но тогда конечный результат будет немного другим, хоть и работает, однако это не совсем то, что нужно. Спасибо, конечно, за попытку помочь и направить на путь истинный.

serjikz

Елена Валентайн, слышали мы много уже таких про "бэм не панацея и тд и тп". Ну дело ваше. А код да может не совсем рабочий, я на scss не писал достаточно давненько и как там что с интерполяцией не особа помню. Точку оттуда убирать не обязательно, но чуть переписать вполне себе можно.

Полной генерации классов можно добиться путем миксинов, как и писал. Допустим map-get() ещё можно использовать или написать что-то своё. То, что вам якобы надо менять __ на — как говорили в комментах — миксины сделают всё что надо, главное правильно оформить код логически и всё хорошо будет, но как — придется думать. Там и @content может понадобится и может быть (но это не точно) циклы или if/else. Дока по sass прекрасная и вполне можно написать рабочий миксин, было бы желание.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *