Препроцессоры (LESS, SASS). Вопрос о вложенности.

[advokatua]

Не так давно несколько расширил свои приемы работы с препроцессорами, включая эти самые вложенности. Раньше их не применял, ибо как-то и не думал о том, что это может быть сколь-нибудь удобно/полезно/выгодно. По факту работы понял, что пускай не на 100%, но на процентов 20 в данном вопросе точно ошибался. В итоге после внедрения данного приема в свою работу не прошло и пару недель как встал вопрос об этикете. Есть ли предел вложенности? 2 уровня? 3? 4?

 

Например у меня после очередного строения 3-его уровня начало закрадываться чувство, что 3 это уже перебор, и якобы 2 это максимум.

 

Пример 3ех уровней. В данном случае, если для ссылок дописать еще и состояния, то и вовсе 4 будет, что будет выглядеть довольно увесисто, имхо. 

 

 

Используете ли вложенность в своей работе вы? (вопрос очевидно тем, кто использует препроцессоры CSS)

Волнует ли вас количество огорода, который вы собираетесь нагородить, и думаете ли вы о других людях, которые потом будут этот огород разбирать?

Edited March 24, 2015 by advokatua

[Sergik+]

Постоянно использовал раньше, но пришел к выводу что скорее от них больше вреда чем пользы,

единственное применение хорошее это там всякие ховеры. От вложенности классов лучше вообще

отказаться.

Edited March 25, 2015 by Sergik+

[Vlad]

Обычно два уровня вложения вполне достаточно. А если не помогает, то надо задать вопрос, всё ли правильно делаете.

[raptor-dm]

Лично я использую препроцессоры по полной, особенно less, вложенность делаю столько сколько на мой счет нужно. лично для меня это на много удобней, чем в нативном css указывать пути селекторов.

Edited March 25, 2015 by raptor-dm

[Zverushka]

При чем тут препроцессоры вообще непонятно, правила построения вложенности ничем не отличаются от обычного css. Главное правило и так и там, как обычно - разумная необходимость.
И кому как, а мне вложенность всегда было легче читать, чем самостоятельные селекторы вида #slider_form_round_prev_disabled- здесь нужно вчитываться и парсить слова, задумываться.

А вот так (код внизу) - я вижу сразу словно перед мной дерево. Вижу, что все эти элементы относятся к конкретному элементу родителию #block1 и .slider, я в них даже не вчитываюсь, а автоматически отсекаю первые столбцы и четко вижу иерархию. Так даже проще выделить нужный блок, если правишь его стили - видно и начало и конец. 

#block1 .slider .bx-prev.disabled,#block1 .slider .prev.disabled {  display: none;}#block1 .slider .bx-next,#block1 .slider .next {  z-index: 15;  right: 90px;}#block1 .slider .bx-next.disabled,#block1 .slider .next.disabled {  display: none;}#block1 .slider .slogan {  bottom: 55px;  left: 0;  position: absolute;}

 

Edited March 25, 2015 by Zverushka

[Sergik+]

 

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

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

А вот так (код внизу) - я вижу сразу словно перед мной дерево. Вижу, что все эти элементы относятся к конкретному элементу родителию #block1 и .slider, я в них даже не вчитываюсь, а автоматически отсекаю первые столбцы и четко вижу иерархию. Так даже проще выделить нужный блок, если правишь его стили - видно и начало и конец. 

#block1 .slider .bx-prev.disabled,#block1 .slider .prev.disabled {  display: none;}#block1 .slider .bx-next,#block1 .slider .next {  z-index: 15;  right: 90px;}#block1 .slider .bx-next.disabled,#block1 .slider .next.disabled {  display: none;}#block1 .slider .slogan {  bottom: 55px;  left: 0;  position: absolute;}

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

Представьте себе что есть куча .scss файлов и довольно разумно названных, лезем туда пытаемся

чего нибудь поправить а оказывается в каком нибудь base.scss стоит display: none - это как минимум

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

красиво и удобно (и пофиг на лишние 10 строчек). Надо прекращать экономить на спичках.

Edited March 25, 2015 by Sergik+

[advokatua]

Постоянно использовал раньше, но пришел к выводу что скорее от них больше вреда чем пользы,

единственное применение хорошее это там всякие ховеры. От вложенности классов лучше вообще

отказаться.

Да вот собственно в этом и проблема. "Лучше  вообще отказаться" - вы же понимаете что это не аргумент, а собственное восприятие вопроса. Если это неудобно, то чем? Я хочу подобраться к фактам, которые дадут понять каким образом писать код наиболее производительно, а не просто говорить себе, что-то типа - "мне так не нравится, лучше напишу так, а не так". 

 

Момент для сравнения. Обычный слева и вложенный справа. 

 

 

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

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

 

 

Еще пример. На 44:15 4 уровня, что собственно говорит скорее о том, что он мог бы сделать и больше, если бы так было необходимо. И ведь этот чувак не одну сотню макетов сверстал. Получается он все равно не прав отчасти?

 

Edited March 25, 2015 by advokatua

[raptor-dm]

закройте эту тему уже.
паритесь из-за какой-та фигни.
вложенность или не вложенность дело каждого.
с опытом у вас свое мнение сложится.

[advokatua]

raptor-dm, тему только открыли, а тебе уже закрой. И дело не в опыте. Не представляю как после 100-ого макета ты сможешь понять, что вложенность лучше чем ее отстутствие, если изначально ты ее вообще не будешь использовать, или наоборот будешь всегда использовать. Максимум что случится это то, что ты выберешь более удобный лично тебе метод написания селекторов и все.

[Sergik+]

Да, это мой собственный опыт, конечно наверное полностью отказываться не надо но

делать как можно меньше желательней (я раньше был огромным фанатом вложенности).

Пока css на выходе был 1000строк было все норм, а когда средний размер стал

3000-4000 строк так вдруг перестала нравится вложенность избыточная.

Хотя конечно это все индивидуально, если вам нравится то делайте вложенность,

фигню пишут что это правильно а это нет, верстка это все таки творческая профессия.

[advokatua]

Пока css на выходе был 1000строк было все норм, а когда средний размер стал 3000-4000 строк так вдруг перестала нравится вложенность избыточная.

 

Да ну, это какой-то extended режим компиляции у тебя был походу. Не говоря уже о том, что минификацию никто не отменял. 

[klierik]

глубина до 3х включительно - обычное дело.

от 3х до 5ти - ну бывает и такое, ситуации разные, не всегда целесообразно вносить изменения в html.

бывает и глубже 5ти приходится ходить, а бывает что и с #id приходится рассказывать браузеру как выглядит элемент.

 

но при этом это не говорит о том что весь проект такой. это исключения которые присутствуют да и не более того.

а так по умолчанию чем меньше глубина тем лучше.

 

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

 

в целом если опустить все выше сказанное -- главное что бы код было легко читать и поддерживать со стороны разработчика(ов), а остальное это уже вполне ожидаемые "затраты".

[Sergik+]

Кстати раз уж флудим про sass, кто использует нативный sass синтаксис ?

Я полностью сейчас отказался от html в пользу jade (открыл случайно генерируемый

html и вообще ничо не понял ), в js перешел на coffee (сомнительно с приходом es6

ну уж очень нравится без скобочек писать), ну и теперь конечно для полного счастья

охота похерить скобочки в sass но интересно если я импортом буду тянуть библиотеки

на .scss чо мне сборщик gulp-sass скажет ? Я еще не пробовал, лень © Сержик

[klierik]

я пользуюсь скобками "{}" как минимум потому что код читабельнее с ними

[Sergik+]

я пользуюсь скобками "{}" как минимум потому что код читабельнее с ними

Спорить не буду, это всего лишь кому как нравится )

[klierik]

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

[Sergik+]

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

Не совсем согласен, дали переделать верстку на stylus (видел реально первый раз), так не

только переделал а еще страничку на stylus сделал и никакого дискомфорта вообще.

[Zverushka]

Момент для сравнения. Обычный слева и вложенный справа. 

 

 

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

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

Эммм. В твоем скриншоте "вложенный и невложенный код" абсолютно эквивалентен друг другу. Просто слева - это результат компиляции кода справа. Никто не будет в less/sass писать вложенность как в css через пробел.

Тогда вообще непонятно о чем речь. 

Не надо путать, это совсем не вложенность.

 

А что это? 

Edited March 28, 2015 by Zverushka