Вкладені правила · Less
У добре структурованих таблицях стилів немає необхідності надавати кожному елементу класи. Досить детальніше описувати стилі елементів, використовуючи можливість вкладати селектори в інші селектори. До речі, такі селектори називаються вкладеними і є об'ємною структурою.
Приклад 2.2.1
Нижче наведено так званий «докладний CSS», в якому представлена модель вкладеності одних селекторів до інших селекторів.
Вирішення проблем
Все це добре, але рівно доти, поки імена класів короткі, глибина вкладеності не велика, а ваші очі можуть встежити за цією структурою. Особисто я, доки не став користуватися CSS-препроцесорами, писав код саме так, попутно розділяючи CSS-файл на логічні блоки і намагаючись встежити за його чистотою. Це зручно і практично, але мені швидко набридло сортувати код за вкладеністю, і моя таблиця стилів іноді була схожа на мішанину з букв і цифр. Зрозуміло, що перед фінальним складанням проекту все це виправлялося, але це не той випадок, на який хочеться витрачати час.
Уявіть собі зміст найпростішої книги, наприклад, таке:
Тут досить легко зрозуміти, що пункт 1.1 це наслідок першого пункту. Проте, якщо переписати це в більш читальному форматі, можна заощадити час на обробці цифр у голові. Абстрактно можна представити наступний формат:
Саме така модель вкладеності присутня в Less, коли один селектор, у буквальному значенні слова, вкладається в інший селектор. Таким чином виходить структура, що легко підтримується, читається і приємна оку. Якщо ж спробувати спроектувати таку модель на CSS-код, то вона матиме вигляд:
Для більшої наочності я пропонуюзвернутися до конкретного прикладу, в якому я постараюся зіставити класичний CSS та Less код.
Приклад 2.2.2
Тут я переписав код прикладу 2.2.1, замінюючи класичний синтаксис на препроцесорний.
На зображенні нижче представлена модель вкладеності, що описується в цьому прикладі. Для наочності і розуміння суті того, що відбувається, екран розділений на дві частини, де ліворуч код написаний препроцесорною мовою, а праворуч «чистим» CSS.
Думки та поради
Погодьтеся, тепер ваш код стає інтуїтивно зрозумілим та зручним для читання. У такій структурі складно заплутатися та загубитися серед селекторів, адже тут чітко видно їхню вкладеність і не треба пам'ятати ім'я батьківського селектора — за нас це робить компілятор.
Застереження!
Постарайтеся запам'ятати раз і назавжди, що вкладати селектори один в одного можна нескінченно, але робити це не рекомендується! Багато розробників радять стежити, щоб структура, у випадку, не перевищувалатрьох вкладень. Немає необхідності вкладати селектори, починаючи з батьківського, на таку глибину. Максимально допустимий рівень у крайніх випадках п'ять вкладень. Намагайтеся уникати крайніх випадків, якщо це не потрібно.