CSS nesting – вече нямаме нужда от препроцесори?

Често съм чувала от колеги, че една от основните причини, поради които използват препроцесори (ако не знаеш какво прдставляват препроцесорите, може да научиш всичко от този урок), е възможността за вложено селектиране, или т.нар. nesting.

Какво е CSS nesting (влагане)?

Така, както в HTML влагаме един елемент в друг (parent – child връзка), вече можем да влагаме и селектори в CSS (цъкни тук, ако не си сигурен какво представляват CSS селекторите). Нека разгледаме следния пример за традиционно CSS селектиране:

.parent .child {
    background-color: #404040;
    border-radius: 1rem;
}

Интервалът между първия и втория селектор означава, че втория такъв е „дете“ на първия. Всеки, който е писал традиционен CSS знае какъв pain in the @ss е това и колко забавя и утежнява процеса на писане на код.

Затова и често се обръщаме към препроцесори като Sass и Less (които добавят и много други функционалности и благинки).

Но CSS е динамичен и ъпдейти и подобрения в писането и интерпретирането му се реализират непрестанно. Така стигаме и до native nesting – влагане на селектори в чист CSS. По този начин примера от по-горе би изглеждал така:

.parent {
    .child {
        background-color: #404040;
        border-radius: 1rem;
    }
}

Предимства

Предимствата от това да използваме native css nesting са няколко, но като най-основни може да посочим:

• писане на по-модуларни и лесни за поддържане стилови файлове – вместо да имаме един и същи селектор и неговите деца по няколко пъти (и на няколко реда), вече можем да „скъсим“ това изписване и да изберем един основен (родител) селектор, а в него да вложим всички негови „деца“, например:

.title-section {
    .title {
        font-size: 2rem;
        line-height: 1;
    }
    .description {
        width: 60%;
        margin: 0 auto;
    }
}
        

• влагане на media queries – всички ги използваме (ако не знаеш какво представляват, виж тук), а вече можем да ги влагаме директно в конкретен селектор по следния начин:

.article {
  font-size: 40px
  @media (max-width: 420px ) {
    & {
      font-size: 24px;
    }
  }
}

• няма нужда от използване на препроцесор – с развитието на CSS можем да пишем все по-бърз и по-ефективен код, а също и да имаме по-малко стилови файлове (ако досега имахме един style.less и един style.css файл, то сега ще имаме само style.css)

Правила за влагане

Може да влагаме всякакви селектори в други такива, но разбира се, спазвайки някои правила. Вече знаем за специалните символи в CSS – . (за селектиране по клас), # (за селектиране по ID), @ (за media query) и др.

Какви са особеностите за влагане на селектор?

Всъщност, аз намирам само една. И тя се изразява в употребата на & символ. Нека разгледаме следните два примера:

.article {

  /* няма да работи */
  a {
      color: blue;
  }

}

В горния пример приложеният син цвят на всички линкове в елемент с класс име „article“ няма да сработи, тъй като влагането на селектор по таг се случва с употребата на символа & преди самия таг:

.article {

  /* работи */
  & a {
      color: blue;
  }

}

Бележка: употребата на символа & е необходима само когато влагаме селектор по таг.

Ако влагаме селектор по клас или ID, не е необходимо да добавяме & пред него, интересно е, че дори да го добавим, обаче, отново ще работи (в тази връзка, ако искаш да си изградиш практика и стил на писане, може винаги да слагаш & независимо пред какъв селектор).

Browser support

В сайта caniuse може да видиш всички браузъри и техните версии, които поддържат CSS nesting. Chrome, Edge, Safari и Firefox поддържат native влагането от няолко версии насам, като тенденцията е все повече браузъри и rendering engines да възприемат този модел на писане на CSS:

Въпроси

Тук ще разгледаме най-често срещаните въпроси, които могат да ти възникнат по отношение на CSS влагането на селектори:

Мога ли да използвам CSS nesting с frameworks?

Да, може да използваме влагане с frameworks. Имай предвид, че преди да започнеш с този подход на писане трябва да провериш дали дадения framework го поддържа. Но вземайки предвид развитието на CSS и бързите темпове, с които CSS nesting се имплементира, скоро няма да има ограничения.

Отразява ли се влагането на т.нар. specificity?

CSS влагането не влияе на приоритета на селекторите. Той се определя от крайния, напълно разрешен селектор. Това означава, че вграденият селектор има същия приоритет, както ако беше написан изцяло без влагане.

Мога ли да използвам влагане в комбинация с други CSS features?

Разбира се, може да използваш метода на влагането, комбинирайки го с променливи, media queries, функции и др. По този начин ще пишеш дори по-оптимизиран и лесен за надграждане код 🙂

Вместо заключение

В заглавието на тази статия задавам въпрос – „вече нямаме нужда от препроцесори?„. Истината е, че препроцесорите все още намират своето приложение за предстоящи проекти, а убедена съм, са вече имплементирани в огромен брой реализираи такива. CSS се развива стремглаво и се добавят все повече функционалности, които да направят писането и надграждането на код по-ефективно. Повече от препоръчително е да се интересуваме от тези новости и да ги имплементираме в проектите си, но е добре да сме запознати и с технологиите и способите, отговорни за създаването на почти всички съвременни уеб сайтове.