И сейчас я расскажу то же самое, что я рассказывал в апреле,
плюс еще дикие изменения, которые произошли с апреля
месяца.
В общем, доклад полностью про ЦСС, первую его часть
про то, как правильно писать и как заводить хорошие привычки
и струрировать ваш ЦСС, а вторая часть она продемонстрирует
мой инструмент, который я написал, называется ЦССКОМ.
Вот, собственно, чтобы рассказывать о том, какие хорошие привычки
есть в ЦСС, я решил найти какой-нибудь вопиющий пример
кода, который написали российские разработчики, а точнее,
верстачи.
Я очень долго искал, какой сайт выбрать, и я подумал,
что нужен какой-нибудь вопиющий, такой технологический
пример, и я нашел сайт skolkovo.ru, это CSS, который там skolkovo.ru
slashstyle.css, это его небольшая часть, я его сейчас чуть-чуть
подобреличил, да, но не важно, что не влезает, но я просто
хочу, чтобы вы ухватили основную суть, там весь сайт написано
в таком стиле, и я не хочу опять делать доклад такой
монолог, такой доклад-доклад, я бы хотел с вами поговорить
и у меня к вам вопрос, вот вы видите такой код, наверняка
у многих из вас пишут CSS, можно даже каждый день, может
быть это даже как-то связано с работой, как говорят, но
в общем, вы как думаете, что здесь плохо и что можно
сделать лучше, вот если смотреть на общую картину, то есть
вот есть какие-то определенные детали, если вы их разглядите,
это круто, но в общем, вот какая у нас и приходится.
Пробелы, переносы, а еще вот не приходит голос,
такая мысль, что вот он, скажем, плохо читабельный,
какой-то непонятный, я хочу что-то найти, а что-то
значит, что-то нужно найти, причем, как выяснилось,
ну то есть можно пройдить специальное серьезное
исследование, это не роботы генеренной код, это человек
написал, и это правда, там есть признаки, если бы
это был робот и генеренный код, там не было бы ни
комментариев, ни каких-то других признаков того, что
человек так намеренно взял и сделал, в общем, найти
по порядку, вот первое, что я предлагаю, взять этот
код и сделать его мультилай, вот такая штука получится,
тот же самый код, только без подсветки в об адспекторе
и я сделал его мультилай, вот такая получила штука,
сейчас буду опоментировать, почему так, а не вот так,
вот есть такой пример весеннего кода, ну это было в апреле,
поэтому я даже не стал этот весенний код отправить,
вот такая стройка, это всего одна стройка, просто
когда она не влезает, она переносит, это то же самое,
что там написано, у меня сразу вот тест такой, скажите,
я Настеньку полюбил или нет, вот сколько времени
потратите, чтобы понять, нет, нет, здесь написано
Наташенька, в общем, я вам настоятельно рекомендую
так не писать, потому что это реально спортивное
ретир, то есть вы будете тратить не только какие-то
свои эмоциональные силы, но и реально прилагать
физические усилия, чтобы копаться в этом коде, пришлите
вот так, это легко, это номерованный список, это фактически
обычный список, и если вам задам какой-нибудь вопрос
относящийся к этому коду, вы сразу не скажете ответ,
потому что вы все, что вы делаете, бегаете глазами
вот по этой линии, дальше вы смотрите, что там, то есть
одно свойство на одной строке, какие еще профиты, вы
можете вот так вот сделать, вы можете делать вот так
быстренько раз, кто знает, как быстро вот так
уйдет, как раз, что три человека только могут вот
так вот нажать и все, то есть есть совершенно точный
способ, поставить сюда курсок, нажать что-то в вашем
любимом редакторе, и закомментировать целиком стручку, а потом
если понадобилось, обратно раскомментировать, вот
потом вы можете взять вот, например, вот шестая строка,
там что-то написано, а вам не нравится, что именно
там это написано, и вы хотите вверх поточить, или еще
вверх поточить, вы знаете такой способ, ну иногда
это нужно, и дальше я покажу, зачем это нужно и почему
это особенно важно, почему я про это говорю, вот, и
у меня такой вопрос есть в зале какие-нибудь тим-лиды
или технические руководители, то есть люди, которые присылают
код на проверку, вот есть такие люди, есть, отлично,
вот такая типовая ситуация, например, вы делегировали
кому-нибудь что-то написать, а она вам присылает результат,
вы смотрите изменения и понимаете, что, ну да, клево
написал что-то, ну а как это вяжется с остальным, то
есть что мне там, как-то вот, хочется вот так сделать,
и теперь я понимаю, что, ну да, пози션 абсолютно,
что там флот, флот, смотри-ка ты, нельзя писать пози션
и флот, и как-то взаимоскучающие вещи, я отправляю такой
код назад, пускай человек думает, в общем, мы преследуем
цель, чтобы все было наглядно, то есть наши записи должны
быть понятны прежде всего человеку, и если следует
такой наглядности, то есть вот исключения, которые
подтверждают правила, вы пишете вот такие конструкции
и можете чуть-чуть там октабулировать, чтобы все было
чистое аккуратно и понятно, то же самое с селекторами,
вот есть такая штука, легко можно запутаться, что
тут где, потому что точки запятые, они не очень привлекают
внимание, вы не понимаете, сколько тут человек, вот
сколько их здесь, долго думать, так не надо делать,
шлетет, так, есть дополнительный профит в том, что вы повторяете
дом, то есть понятно, что есть что-то, в нем лежит
что-то, и в нем лежит уже а, все как бы на ладони, есть
еще такой момент, про который я хотел забыть, но не
задумал, есть расходшее мнение, что значит, когда вы пишете
все онлайн, вот так вот такие, спагеттиобразный такой
код, который уходит куда-то там в дай, то, где-то кода
вылезает в один экран больше, я его вижу весь, и я вот
прямо весь вижу, у меня этого хорошо, а когда я пишу
вот так мультинег, он слишком длинный, и мне приходится
не мотать, так вот не нужно никуда мотать, есть две
операции, которые реально нужно делать, первая операция
это найти по слову, то есть поиск обычной, по данной
поиске, и второе это, если вы знаете номер строки,
где дело происходит, просто перейдите на эту строчку,
все, аргумент о том, что я вижу много, ну он сразу
перестает быть привлекательным, дальше порядок свойств,
я там показывал, что я что-то двигал, и я попробовал
в интернете поискать инструменты, которые автоматически
что-то там двигают, то есть сортируют мои свойства,
как будто в порядке, и я увидел много разных всяких
причудливых инструментов, и примерно с точностью до
100% из увиденного делала вот так вот, они из моего кода
делали вот такие штуки, древние, непонятные какие-то сортировки,
основные то ли на алфавите, то ли на длине свойства,
то есть мне это непонятно, почему в голове не приходит
функциональная группировка, то есть вот на полном серьёзе
вот это скрешёт одного из инструментов, где есть
галочка сортировать свойства по алфавиту, вот, а не
есть галочка, которая вообще на пределами добра из
влах, селекторы по алфавиту, то есть от того, что один
из них переоперелит другой, я не понял, я так для себя
решил, что это, видимо, программисты научились что-то
там программировать, и решили в миру явить свои науки,
а зачем, ну, видимо, ещё не подумали, или не дошёл
видимо час, в общем, правильный вариант, это группировка
по функциональному признаку, и есть несколько вариантов,
точнее, версии этой группировки, одна активность используется
в замкотинге, то есть это не только в дыре, что
именно селекторы есть целые концепции, где свойства
собраны, и там более старший штук, и они сгруппированы
по функциональному признаку, вот у меня здесь не выписаны,
наверное, вы все это не рассмотрите, да и нет смысла
по каждому говорить, потому что их больше ста, то есть
сюда же входят и свойства с префиксом, но это не важно,
они все сгруппированы, вот, мы в Яндексе, когда пишем
ЦСС, мы обязательно придерживаемся этого порядка, и я вообще
рекомендую вам тоже это делать, потому что, собственно,
вот потому, рассмотрим такой пример, у вас был код, потом
какой-нибудь человек, которому понадобил что-нибудь сделать,
пришел, дописал вот десятую строчку, он дописал, ну
просто потому, что вниз, как бы, в конец хода, он
дописал, а Маджен Лэвд сверху не заметил, если бы он
пришел, посмотрел, что тут, чё, знаешь, что, отсортировал,
и дописал бы куда следует этот Маджен, он бы увидел,
что есть какие-то тут противоречия, то есть, ну, как бы, любой
порядок, даже в мелкой уровне, он, как бы, не то что
за коллега, а он даёт людям некую защиту от ошибок,
от таких банальных, которые, какой-нибудь ваш там,
выледатор или другое какое-нибудь ЦСС-люд не отлоет, а может
это не отлоет, но это вряд ли, зачем на него полагаться,
а у нас есть ещё один приём, Вядок Север, в частности,
в Сиферополе, люди пишут вот так, они прямо группы
разделяют, это удобно, когда на один селек, как бы,
я ж на очень много стилей, там, ну, бывает вот, целая
батарея эти декларации и их разделить, бывает удобно.
Вот, следующий момент, это такие два правила, вот
первый из которых, вы все знаете, что есть маржаны
пандинги, бодры и всякие прочие вещи, у которых
есть вверх, там, лево, право, низ, вот, в каком порядке
их писать, казалось бы, неважно, но очень удобно писать
их в одно порядке, просто, чтобы потом что-нибудь
день не переопределить, и я придумал такой простой
штуку с часами, что, собственно, топ-райт-ботом и левт,
они по часовой стрелке, то есть, топ-райт-ботом-левт,
в таком порядке вы их и записываете, это работает
для всех свойств, где это есть, запоминается железно
и быстро.
Вот, сейчас момент, когда я покажу доклад Вадима Макеева
за один свойт, вот, тут был какой-то текст, но он уже
все сказал, я надеюсь, я запомнил, и у Рома тоже была
одна такая вещь, она у него была довольно молча,
но, и даже он произнес, то есть, он пишет префиксы
таким образом, чтобы само свойство становилось
столбиком, и было табулировано, и значения были придуманы,
то есть, да, точно, Рома это произнес, это делается
как раз ради того, что в некоторых ваших любимых
редакторах можно выделить область по значению и
просто заменить.
Значит, я говорю тут про какой-то порядок, и есть два
способа поддерживать этот порядок, вы можете писать
это все руками и контролировать, но есть такая еще идея,
которая у меня родилась примерно в 2009 году, что CSS можно
сортировать.
Я вот поискал, кроме вот этих алфавитных сортировщиков,
я ничего хорошего не нашел, и решил, что мне просил
написать вот такой проектик, в общем, все на сайте CSS.com
можно посмотреть, я просто хочу отдельно рассказать
про то, как он работает и почему вообще я сделал
еще что-то.
То есть, есть много всяких beautifier, есть какие-то минимизации,
есть другие вещи, но нет абсолютно ничего, что сортировает
свойства.
То есть, вы даете ему порядок, скармливаете там, мне,
допустим, 150 свойств в таком порядке, я хочу, чтобы
весь CSS пришел в такой порядок, не селекторы, а свойства
селектора.
И скармливаете ему этот порядок, и он вам сортировает
ваши написанные уже готовы к CSS.
Такого я нигде не обнаружил, именно по этой причине решил
написать.
И написал.
Значит, это у меня уже давно написано было, я хочу
просто рассказать, что с апреля, с рита, меня произошли
две новинки.
Во-первых, я написал плагин для ВИМА, и я понял, почему
клубной герст тут, а второе, более интересно, я написал
такую тузу, которая работает и с консолью, значит, я преследую
цель, чтобы можно было повесить расческу на ковид, или просто
использовать ее, как консоль на утилитов, при работе с
большим количеством CSS-файлов, так, например, в Яндексе есть
такой практик, как Лего, и там много-много разных CSS-файлов,
они достаточно маленькие, но их много, и они по папочкам
распиханы.
И мы сейчас пытаемся Лего пробовать сортировать расческой
вот так массово, чтобы вести порядок и поддерживать
ее.
Вот, если это получится, то будет грандиозно, я буду
очень рад, и, возможно, это пригодится кому-нибудь из
вас.
А ближайший план, это вот то, что уже готово, абсолютно
точно.
А ближайший план, это я хочу сделать плане для sublime,
и хочу опубликоваться где-нибудь в западном блоге, то есть
в каком-нибудь хорошем, в таком типа, в нашем магазе,
написать статейку, почему именно так, написать про
то, что у меня не парся, что эта штука действует
как человек, она видит строчку, она передвигает ее в
вниз относительно других, то есть это то же самое,
что если бы руками делали, но только автоматически,
то есть не происходит никакого разбора, кода, не происходит
потом его сборки, просто передвижение туда-сюда.
Соответственно, вы можете пойти на сайт, сразу увидите
как это все работает, потому что там есть онлайн-версия.
На сайте также вы можете найти тесты, которых уже
было 70 штук, и они сгольперованы, там тесты по комментариям,
тесты по SAS, которые сейчас не в очень хорошем состоянии,
но тесты по CSS, по-честному CSS, проходятся там на 100%,
если вы увидите какой-то код, который падает, вы обязательно
присылайте его мне, но такого еще не было, ближайшее,
сколько-то месяцев я не видел такого кода, был только
один момент, когда Рома Комаров мне присылал код с
комментариям в CSS, в котором был код, что я мы, и в нем
еще что-то было, я подумал, что ладно, я это исправлю,
вот остальные все тесты проходятся, я вам сейчас
покажу, просто живьем, покажу, что и как, есть такой в
об интерфейс, который я запилил, чтобы показать вам,
на сайте вы увидите примерно то же самое, только еще там
какого-то текста и каких-то менюшек, куда можно пойти,
значит, есть настройки сортировки, собственно говоря,
все свойства перечислены в том порядке, в котором
я хочу получить результат, вот они, я могу что-то
написать и сравнить, ну вот с такой, видимо, в виде
результатов, вот, сейчас я вам покажу, как я, так же,
как Рома, одну руку пишу много кода, вот, это что
такое, это пример кода, где CSS третьего уровня, где
довольно сложная индентация, вот с такой там, у свойства
Ground есть несколько значений, они еще там как-то оттабулированы
и я хочу, чтобы это все от сортировалось, пожимаю
и вижу, что пози션 переместился наверх, хотя он был внизу,
ну и все куда-то переместилось, но все отства, по которые
были, все отства сохранились и вся моя запись не побилась
и все форматирование осталось прежним, ну понятно, что
позиция у меня первая, поэтому он наверх переместился,
вот, если у вас что-то закомментировано, вот так вот, то над этим я тоже
долго работал и получилась вот такая штука, что комитарик,
который привязан к свойству, он упалзет вместе со свойством,
а свойства, которые закомментированы целиком, оно от сортироваться
и так, как если бы оно не было закомментировано вовсе,
ну то есть, вы хотели бы, чтобы оно там оказалось,
вот оно оказалось, мы просто его потом закомментировали,
вот, вы не замечаете разницу, есть вот такой пример, когда
все у вас отформатировано, все красиво, повторяет все
дом дерева и все остается как бы, Рома опять-таки мне
предлагал давно-давно сортировать его экспрессионы, у него есть
на сайте очень замороченные экспрессионы под ешечку
и тоже было очень интересно над этим поработать, оно
все прекрасно сортировается, я там чуть увеличил, чтобы
было видно, вообще видно, просто оно не очень близает,
а если уменьшить, то совсем не увязать, в общем все
работает и даже если вы экспрессион напишете маленькую
игру для детей, как предлагал Стойк, дальше поехать, ну
как я показал, что иногда по вае выгодно написать
в онлай и таким образом получается, что тут нет никаких
символов вообще-то, ваша декларация через точку
запятой тут заплатную, ну и что, я и с этим умею
справляться, то бы оказался впереди, просто потому что
в настройках именно так, есть еще такая подробность,
когда вы пишете что-то, а потом его переопределили,
конечно же это ошибка, но в некоторых случаях это
не ошибка, в некоторых случаях вам нужно написать какой-нибудь
хак или еще что-нибудь, то есть моя цель была написать
сортировщик для реального кода, а не для кода, который
описан в спецификациях каких-то, то есть иногда
действительно нужно написать там хайт 100% и переопределить
хайт или что-то такое, какие-то хаки для чего-то, происходит
следующее, свойства, переходят на нужную позицию, а его
дубль переходит следом за ним, просто потому что
в таком порядке они встретились, если бы у меня было сначала
позиция абсолютно потом, позиция миллэтью, мы бы
увидели результат соответствующий, то есть все дублирующие
свойства становятся на место, но в том порядке, в котором
он их встретил, ну это такое же поведение, как если
вы руками сортировали, что будет, если какое-то ошибочное
или просто свойство, которое вы не указали в порядке,
будет очень простая вещь, оно попадет в конец, просто
потому что ничего про него неизвестно, на какую
позицию его поставить, и опять-таки оно попадет
в конец, а если будет еще какое-то неизвестно, они
поставятся в конец в том порядке, в котором они встретились,
ну еще парочку примеров в последних, иногда бывает
нужно вот этого сортировать, то есть у меня есть эта штайбелька
и мне лень оттуда ЦСС подирать, я прямо его написал в стайл
и хочу, чтобы она сортировалась, да не проблема, пожалуйста,
вот все, что внутри стайла, все сортировалось, тут у
меня банальный пример, потому что место маловатый,
вы можете проверить это все в онлайне, либо скачать
любое из плагинов, есть плагина для текстмейта, есть
плагина для коды, есть плагина для веб-шторма, для идеи,
для ВИМА, и скоро будет саблайм, уже очень скоро
я уже сам, очень жду, когда я его доделаю, я его
тестирую сейчас и что-то как-то все, не зарелизится,
и вот тут у меня друзья хотели подколоть, а если
ЦСС 4 уровня, а как, что будет, ты ничего не смотрел,
я вот нашел парочку ревер, ЦСС 4, то есть этот код
реально еще не используется, ну так, для интереса решил
попробовать, и вижу, что в общем-то ничего не ломается,
то есть вот эта штука указывает, что стиль будет применен
именно кулу, а не к вот этому, ну вот это, наверное,
мы уже все слышали, и проект тоже понятно, вот и последний
примерчик, что будет, если совсем какой-нибудь ерунду
запихать него, интересно же, да, сломать, что-нибудь,
она останется, потому что есть, ну у меня один из самых
важных принципов было, когда я писал о насчетку,
чтобы код вообще не портился, то есть не знаю, что с ним
делать, ничего не делать, не порти, не трогай, и все.
Собственно, это все, вы можете сходить, попробовать
расческу, вы можете у меня что-то спросить, и можете
посмотреть презентацию позже.
Спасибо.
Спасибо за вопросы.
Я пока бегу сам, но просто, да, у тебя там есть момент,
когда ты говоришь, что хочу повесить вот эту расческу,
или уже повесил на комит, и еще что-то такое, весь
такая ситуация происходит, когда ты пишешь код, а потом
его комитешь, а потом снова открываешь, он не такой,
как ты его написал, поэтому использовать расческу,
наверное, имеет смысл момент написания кода, как плаги
для брауза, как плаги для редактора и так далее, делать
это на комите, это значит потом не узнавать свой
код, ну просто вот представить на подход.
Надо обсуждать, и скорее все будет так, что по браузе
мы выступаем так, мы что-то пишем, у нас появляются какие-то
изменения, и перед тем, как закомитить, мы смотрим
див, всегда смотрим див, ну по крайней мере, я и те
люди, с кем я работаю, я знаю, что они всегда смотрят
див, и есть идея просто делать хук, чтобы расческа работала
до того, как я смотрю на див, то есть в диве я уже вижу
то, что она изменила, и лишний раз убеждаю, что ничего
страшного не произошло, я ответил, я пытался как-то
применить этот сортировщик, но на самом деле для меня
было большой проблемой то, что он описан на ПХП, и
я хотел спросить, почему так делом.
Да, это спасибо за вопрос, это очень просто, на тот
момент, когда я начал писать, я был уверен, что я знаю
ПХП как, ну как сказать, это был мой основной скриптовый
язык, то есть я вообще не программист, но при этом
так случилось в воле судеб, что я умею писать на ПХП,
и так как у меня максимально большой опыт был на ПХП,
были другие языки, но я подумал, что лучше написать
что-то на языке, которым я больше уверен сам, а потом
еще подумал, что возможно не будет лишним то, что
большой очень комьюнити, то, что ПХП распространен
среди по крайней мере русскоязычных разработчиков,
то есть если кому-то там что-то не нравится, есть больше
вероятность, что он зайдет и поправит, чем если я это
напишу на таком неведомом всем языке, но он очень
хороший, как все думают.
У меня еще один вопрос, вот для Дима есть плагин ПХ8,
который примерно то же самое делает, но для Петона,
но он не форматирует код, он просто сообщает о том,
что неплохо было бы в этом месте форматировать код,
и не собираешься ли ты сделать то же самое для, например,
того случая, как ты показывал, когда указано позициональный
абсолютный позициональный реалитив, сообщить пользователю
о том, что тут есть ошибка и нужно бы ее исправить.
Мне кажется, ты мне предлагаешь написать ЦСС-Линд, или что
вы за тематом можете, вроде.
У меня была задача реализовать одну функцию, всего одну,
это сортировка.
Я часто слышу, что говорят, а вот сделай еще, чтобы там
не знаю, префиксы добавлялись, а сделай еще, чтобы вот
из онлайна, который ты так ругаешь, чтобы был мутилай,
на что я отвечаю всегда, что есть такие вещи, и если
нужно, то можно поискать и найти какие-то плаги для
даже встроенной вещи в редактор.
Наверняка есть еще вот какая-то штука, которая тебе
рекомендует, а начнется, она просто сортирует, и пока
я не думаю, что она будет делать что-то другое, пока
она не будет делать это же из-за Петона, для, скажем,
Сас и каких-то других млэсов, есть у меня идея развивать
ее в этом направлении.
Что-то попришло, найду, не приеду, а открой ко мне,
Василий Зас-4 свадьбик.
Вы не свадьбик, это код.
Напомню мне, что у тебя расческа, сколько ты думаешь?
Как что, свойство?
А где, где свойство, сердце С-4?
Ну, дорогой звук, вот пожалуйста.
Вот, пожалуйста, один фронт.
Стоп, стоп, все убедил.
Обращайтесь.
Так, еще вопросы?
Да.
Может быть кто-то хочет переписаться на Петоне?
Я хочу.
С тобой все понятно.
Просто если, не знаю, если я тут за Слава поговорю,
если я за такие, не знаю, какие-нибудь редакторы,
если у вас вы умеете писать плагин для ноутпад плюс-плюс.
Да, будет круто, если вы умеете писать плагин.
Да, если вы тоже знаете, куда это можно портировать
и сделать это легко, потому что, не знаю,
плагин для Вима, я так понимаю, написал какой-то умелец
с Беликов в Пайкала.
Вот, неожиданно появившись.
Если вы тоже умеете с Беликов чего-нибудь еще.
Оказалось, что он гораздо лучше меня знает в Вимске,
и я его знаю на любом уровне.
А каким образом работает плагин?
Присохранение или там есть клопочка нажима?
Плагин работает так.
Ты нажимаешь вот кей, а он работает.
И он все отсоцервал соответственно?
Да, и вот у тебя был один всего,
а стал другой код.
Причем это даже не обязательно файл какой-то.
Просто кодзик, копипастик в свой редактор.
Отнутри не будете там.
Вот как я взялся с колкого.
От копипастиков вот туда, в свой редактор.
Нажимаешь от кей, и все.
Дальше.
Работает ли это с выделетьми?
Да, обязательно.
Здесь вы можете сортировать не только весь файл,
а и его часть.
Хотя я не знаю, зачем теперь это нужно,
если все что угодно.
Хоть петоновский код.
Ну если не знаю, я хочу оставить
часть манакода и часть своего трасси.
А-а-а.
Чтобы начальник понял,
что я написала, что осталось.
Может быть, да, ты можешь выделить что-то.
И нажать опять
свой любимый код кей,
и расческой сделать только
с выделенным кодом.
А то ты понимаешь премию всем дадут,
что у него нет.
Для этого надо на один расческой.
Еще вопрос.
А вы сколько вот сообщили?
Нет.
Но я сейчас сообщу,
я думаю, что я уже не буду их,
ни кому не буду рассказывать про код.
Может быть, вдруг кто-то в зале
писал этот код, молчи.
Нет таких?
Если больше нет.
А у меня еще есть
клевая штука, которая...
Мальчик, угомонись. Третья докладка
это бы слишком.
Нет, ну просто что раз у меня
про это спросили, и я подумал, что это
хорошо бы показать.
Если вы пишете что-то,
а потом за этим что-то еще
чего-то,
и делайте
вот так, как это делать
некоторые люди,
открывают вопросы, что делать,
где, вот я сейчас по деле местами
то было, а то, что за кодой нет.
Так вот, она на самом деле
есть.
И это все.
То есть это единственная больность,
это просто...
