Hayaku — пишем CSS быстрее

    Hayaku это сборник полезных скриптов, помогающих при быстрой веб-разработке.

    Hayaku предоставляет способ быстрого способ написания и поддержки CSS кода в редакторе. К сожалению, он пока доступен лишь для Sublime Text 2, поддержка других редакторов ожидается позднее.

    Установка


    Preferences → Package Control (CTRL+SHIFT+P) → Install Package → Hayaku
    Перезапускаем Sublime Text 2.

    Возможности


    Нечеткие аббревиатуры CSS свойств

    Если вы работали с Sublime Text 2, то наверняка знакомы с его функцией нечеткого поиска. Здесь реализовано примерно то же самое, но для CSS. Напечатав wi, а потом нажав TAB, вы получите width. Тот же самый результат будет, если вы напечатаете wid или wdt — это же нечеткий поиск :) Для большинства свойств сокращения весьма короткие, и состоят из пары букв, но вы можете напечатать столько букв из названия свойства, столько хотите, Hayaku справится.
    Иногда вам может показаться, что Hayaku не совсем правильно расшифровывает ваши аббревиатуры, например, b превращается в bottom, а не background или border, это происходит потому, что свойства left, right, top, bottom имеют наивысший приоритет.

    Умные сокращения значений

    Вы можете записать вашу аббревиатуру как свойство + значение, но не требуется использовать никакие разделители между ними. Например: por (или pore, posrel, и т.д) превратится в position:relative. Опять таки, магия нечеткости в действии :) Если вам так уж хочется использовать разделитель в этой аббревиатуре — добавьте двоеточие между свойством и значением, результат не изменится. Однако, использование двоеточия все же имеет смысл в некоторых случаях: например использование pr может быть истолковано как padding-right, а добавление двоеточия между ними может устранить двусмысленность; padding не принимает никаких значений, начинающихся на r, следовательно, пропускаем этот вариант, и идем дальше:
    p:r → position: relative
    pr →  padding-right: 
    


    Цифры в сокращениях

    Hayaku понимает много способов написания аббревиатур с цифрами
    • Вы можете просто написать число после аббревиатуры, чтобы использовать его как значение. Например,
      w10 → width: 10px (ага, пиксели добавились автоматически)
      
    • Отрицательные значения тоже поддерживаются:
      ml-10 →  margin-left: -10px
      

    • Если вы поставите точку где-нибудь в аббревиатуре, Hayaku будет считать, что вам нужен em. Например,
      w10.5 → width: 10.5em
      
    • Аббревиатура для процентов — percents, например:
      w10percents = w10perc = w10p →  width: 10%
      
    • Остальные единицы тоже поддерживаются, например:
      h2pt → height: 2pt
      w10h → width: 10vh
      


    Цвета в сокращениях

    Помимо строк и чисел, Hayaku поддерживает расшифровку цветов в аббревиатуре. Есть несколько способов указать, что вы имеете в виду цвет:
    c0 → color: #000
    cF → color: #FFF (Используйте верхний регистр, чтобы сказать Hayaku расшифровывать это как цвет)
    cFA → color: #FAFAFA
    c#fa → color: #FAFAFA (Верхний регистр не требуется, если вы используете #)
    


    Модификатор !important

    Просто удобная фича — добавьте ! после аббревиатуры, чтобы получить !important после расшифровки:
    dn! →  display:none !important;
    


    Автоматические вендорные префиксы.

    Вам нужны вендорные префиксы? Hayaku поддерживает и их!
    bra1.5  →   -webkit-border-radius: 1.5em;
            border-radius: 1.5em;
    


    Для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки Sublime Text 2.

    Некоторые значения по умолчанию

    Если вы напишете только свойство, то Hayaku вставит значение по умолчанию, и перенесет курсор внутрь него, позволяя вам продолжить написание своего значения. Например:
    w →  width: |100% (| - каретка)
    h → height: |100%
    c →  color: |#FFF
    etc...
    


    Пост-раскрытие значений

    Ещё одная фишка, позволяющая вам вначале написать свойство, а потом использовать авдополнение для значений.

    po →  position: (Теперь вы можете писать значение. Например, если вы напечатаете a, Hayaku предложит авдополнение значением absolute)
    po →  position: a| →  position: absolute
    


    Поддерживается в том числе и для значений единиц и цветов.

    Inline комментарии

    Ещё одна приятная фишка:
    // →  /*  */
    


    Использование Hayaku вместе с препроцессорами.

    Конечно, вы можете сказать, что вам не требуется писать CSS быстрее, вы и так используете препроцессор CSS:) Препроцессоры серьёзно повышают скорость и читабельность кода, но вам по прежнему надо писать все эти чертовы лишние символы! К счастью, Hayaku легко работает с препроцессорами Sass, Less, Stylus, и т.д.

    Добавление фигурных скобок шорткатом

    CTRL + ENTER после написания селектора автоматически создаст фигурные скобки и перенесёт курсор внутри селектора. (@CyberAP)
    Удачной верстки!

    UPD: Как оказалось, авторы Hayaku — хабралюди kizu и TheBits
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 58
    • +4
      Всё хорошо, всё удобно, но если ты пишешь только CSS.
      Когда пытаешься использовать похожие модули для php/html/js/wp. У которых свои взгляды на сокращения, — голова начинает сходить с ума, и думается, что лучше уже продолжать писать в plain :)
      • +1
        В смысле какие похожие модули? Дайте пример.
        • +1
          Идея Хаяку во многом именно в том, что, как таковых, сокращений-то и нет. Есть набор алгоритмов, разбирающих аббревиатуры и подбирщих наиболее подходящую пару свойство-значение из словаря.

          Да, сами алгоритмы могут быть не всегда очевидны и верны. Но зато, из-за нечёткой структуры, всегда можно попробовать найти такую аббревиатуру, которая попадёт под алгоритм. Это быстрее, чем добавление новой статичной аббревиатуры в настройки и лучше запоминается — ведь ты сам экспериментируешь и находишь нужную работающую аббревиатуру.
          • 0
            Плагины (пакеты в терминах ST2) и сниппеты завязываются на тип файлов. Так что сокращения в CSS и PHP неплохо уживаются вместе.
          • 0
            Спасибо, попробую. Иногда напрягает, что в пустом файле ST2 не понимает с полуслова.
            • +2
              Зачем еще один Дзен-Кодинг? code.google.com/p/zen-coding/
              К тому же ZC реализован почти везде (в виде плагинов или нативно), где только можно.
              • +14
                Уже кстати Emmet docs.emmet.io/
                • 0
                  Спасибо, не знал. В *Storm он до сих пор называется Zen, хотя у них там своя реализация, не дословная.
                  • +1
                    в саблайме пушат сообщение что поддержка Дзена остановлена, и предлагают скачать Эмметт (он, кстати, весьма силен в CSS)
                • +7
                  Лично я использую Emmet (ex ZenCoding) для HTML, но вот для CSS больше понравился Hayaku. Главное его отличие: нечеткая логика подстановок. Там, где в Emmet/ZC нужно точно помнить все правила (это как раз характерно для многочисленных CSS-правил) или пользоваться шпаргалками, в хайаку (все время хочется написать хуяку ^_^) можно просто написать то, что тебе кажется подходящим и оно (чаще всего) сработает как ожидаешь.
                  • 0
                    Да ну, бросьте. До Emmet использовал схожую «систему» собственной разработки, поставил Emmet, за пару дней верстки выучил все нужные сокращения назубок. Там все логично и просто.
                    • +3
                      Для хаяку надо просто знать что такое свойство есть в CSS. По-этому любое свойство доступно пользователю как короткая аббревиатура.

                      Например есть свойство pointer-events. Попробуйте сказать, не заглядывая в cheat-sheet, какая аббревиатура у этого свойства в emmet?

                      В хаяку можно написать piev, pevs, point-even или так как вам удобно написать сокращённо это свойство.
                      • +1
                        Ну, раз уж на то пошло, то у Hayaku тоже есть проблемы.

                        Например, я хочу получить свойство font-style, пишу аббревиатуру fs, однако получаю font-size. Или хочу получить border-radius: пишу bdr, а получаю border-right.

                        В итоге фича «пиши что хочешь» превращается в игру «угадай, что сейчас появится». И в этом плане статические аббревиатуры гораздо лучше, потому что их всегда можно увидеть и они всегда дают однозначный результат.

                        К тому же, в ST2 уже есть fuzzy search по вводимым CSS-свойствам (который Hayaku зачем-то удаляет) с визульным фидбэком, чтобы пользователь всегда видел, что сейчас появится.
                        • +3
                          Конечно, есть проблемы, это же первая публичная альфа всего лишь :) если возникнет необходимость изменить какую-то аббрвиатуру, заменив её на статичную — такая возможность в будущем будет. Но у нас задача сделать такой алгоритм, который бы без хардкожа максимально «угадывал» то, чего хочет пользователь. И, конечно, без телепатии всем не угодишь :)

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

                          И да — Хаяку не претендует на идеальность, это всего лишь ещё один способ быстро писать CSS. Если кого-то он не устроит — всегда есть как минимум несколько альтернатив. Конкуренция — это хорошо.
                          • +5
                            Да я не против конкуренции, я просто свой продукт защищаю :)
                          • +1
                            Хорошие примеры с аббревиатурами fs и bdr. Статические аббревиатуры от них тоже не спасают, когда пользователь ощущает что свойство в аббревиатуру на самом деле надо было сокращать по другому.

                            Я собрал статистику по частоте использования свойств вебмастерами, font-size — 1.72% вхождений, font-style — 0.06%. При ранжировании лучшую оценку получает font-size. В естественных языках наиболее употребимые слова короткие и что для короткой аббревиатуры будет раскрываться более частое свойство кажется очевидным. Для bdr стоит статическое исключение, по алгоритму оно раскрывается в border-radius (из-за частоты 0.77 против 0.29 у border-right).

                            «Угадай что появится» есть первые 10 минут работы. Это как поисковый запрос, если пользователь не нашёл что искал — он дополняет запрос, конкретизирует. Второй раз уже пишет сразу работающий вариант.

                            Не понял про встроенный fuzzy search в ST2. Вам не хватает выпадающего списка?
                            • 0
                              Я собрал статистику по частоте использования свойств вебмастерами, font-size — 1.72% вхождений, font-style — 0.06%.

                              А как эти данные должны мне помочь получить желаемый результат? :)

                              Для bdr стоит статическое исключение, по алгоритму оно раскрывается в border-radius (из-за частоты 0.77 против 0.29 у border-right).

                              Но почему тогда bdr сейчас раскрывается в border-right: 1px solid;?

                              «Угадай что появится» есть первые 10 минут работы.

                              Не соглашусь. За первые 10 минут можно спокойно изучить основной набор статических аббревиатур, а всё остальное писать с помощью стандартного автокомплита. Нечёткий поиск отлично работает для случаев, когда аббревиатуре соответствует ровно один результат. В остальных случаях это довольно длительный процесс проб, ошибок и в конечном итоге запоминания аббревиатур (зачастую неуклюжих), которые дают нужный результат.

                              Не понял про встроенный fuzzy search в ST2. Вам не хватает выпадающего списка?

                              Да, чтобы я мог сразу видеть, что получится в итоге.
                              • 0
                                bdl -> border-left,
                                bdr -> border-right

                                Буду очень благодарен если Вы покажите примеры последовательности поиска нужной аббревиатуры и примеры неуклюжих аббревиатур. За всё время этой первый раз когда я получаю отзыв о плохих аббревиатурах.
                                • 0
                                  ОК, вот примеры:

                                  bdra (border-radius) вместо bdrs (border-right-style)

                                  trnsform (transform) вместо trf (transition-timing-function)

                                  bsha (box-shadow) вместо bsh (border-style:hidden;)

                                  con (content) вместо cn (cursor:none;)

                                  anam (animation-name) вместо an (animation:none)

                                  piev (pointer-events) вместо poi (position)

                                  и т.д.
                                  • 0
                                    Спасибо. Буду смотреть.
                          • 0
                            Всё гораздо круче, ведь можно написать просто pe. В большинстве случаев достаточно вводить первую букву из словосочетаний свойств. То есть к примеру нужно задать background-position-x и вводим только первые буквы из трёх слов, bpx. Но как уже выше отметили не со всеми свойствами это работает.
                            • +1
                              Положа руку на сердце, как часто вам доводилось использовать свойство pointer-events? :) Подобное, при случае, можно и руками набрать.

                              Как уже отметили, статические аббревиатуры имеют свои преимущества. В конце концов, CSS тоже не разрешает нам писать podding, poding, pading и padding, хотя, может быть, это кому-то бы и упростило жизнь.

                              Но вообще, безусловно, пусть засыхают сто цветов и так далее. Конкуренция — это отлично, как и богатый выбор инструментов. Успехов Хаяке :)
                        • +3
                          Fuzzy typing, вот зачем.
                        • 0
                          А чем zen-coding не устраивает. Работает под большинство IDE и текстовые редакторы поддерживающие плагины. И ускоряет работу не только в CSS но и HTML. Например ul>li*5->a[href='#']{Ссылка номер $} Создаст список из пяти элементов с ссылками и нумерованным текстом.
                          • +1
                            Вполне можно автоматизировать это через ctrl+D в том же notepad++
                            • +2
                              Вы можете использовать zen-coding для html и hayaku для css.
                              • 0
                                Попробовал так и сделать. Поставил Emmet и Hayaku. В настройках Emmet указал «не работать в CSS-файлах», однако Hayaku «не заводится» — сокращения не срабатывают. Может быть подскажете, как это сделать?
                                • 0
                                  Разобрался. Hayaku почему-то попал в опцию «ignored_packages».
                            • +14
                              Святые небеса, какое милое название :)
                              Скрытый текст
                              «Хаяку», яп. 早く — «быстрее», «поторопись»
                              • +9
                                Хаяку — и все готово :)
                                • +2
                                  Вы неправильно произносите. Надо так:

                                  Хайййййй-аку! — и всё готово.
                                • +3
                                  Во-во! Я сначала на него внимание обратил. Теперь вот ещё статью заодно почитаю. Афтар — хитрец! Знает, как народ то завлечь :)
                                  • +2
                                    Я сначала на него внимание обратил.
                                    Я, признаться честно, тоже :)
                                • –19
                                  извините за прямолинейность, НО: ** ап стену.
                                  • +2
                                    Кстати, в статье забыли упомянуть ещё одну хорошую фичу как Ctrl+Enter после написания селектора, который добавит фигурные скобки и перекинет курсор сразу на написание свойств.
                                    • 0
                                      Добавил. Приятно, что даже со Stylus'ом работает адекватно :)
                                      • +1
                                        Сам ST2 можно легко настроить таким образом, чтобы после ввода символа { после селектора автоматически добавлять закрывающий } с нужным форматированием и позицией курсора:

                                        github.com/sergeche/emmet-sublime/issues/78#issuecomment-9738519
                                    • 0
                                      Подскажите, пожалуйста, как быть в следующей ситуации. У меня настроены свои сокращения, к примеру:

                                      { "trigger": "bcol", "contents": "border-collapse: collapse;" }

                                      Однако, после установки Hayaku при вводе bcol я получаю border-color: #FFF; вместо border-collapse: collapse;. То есть совпадающие сокращения в Hayaku имеют больший приоритет.

                                      Как поменять приоритет на мои сокращения?
                                      • +1
                                        Писать как bcc, мне помогло.
                                        • 0
                                          Такое решение не подходит. Мне нужно сохранить мое сокращение.
                                          • 0
                                            Можно в core/probe.by переопределить, но естественно, оно не переживёт обновлений. После изменения, ST2 надо перезапустить.
                                            • 0
                                              Тоже не выход. Видимо, придется отказаться от использования плагина =(
                                              • 0
                                                Если так уверены, заводите Issue на гитхабе.
                                        • +1
                                          Пока почти никак — но в будущем появится возможность определять в настройках свои сниппеты и статические аббревиатуры, если такая необходимость возникнет. К сожалению, в саблайме нельзя нормально управлять приоритетами сниппетов и команд, так что можно либо использовать только статичные сниппеты, либо что-то более умное, но переопределяющее нажатие на таб.
                                          • 0
                                            Спасибо за ответ. Буду ждать такой возможности.
                                        • +4
                                          Спасибо за обзор!

                                          Пара замечаний:

                                          1. Префиксы поддерживаются не только для вебкита, просто для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки саблайма.

                                          2. Хочется уточнить про значения по умолчанию: они не просто вставляются, а вставляются с выделением — оставляя возможность продолжить написание своего значения. Сейчас в посте это не совсем очевидно написано.
                                        • 0
                                          У меня почему то не работают сокращения так, как описано в статье. Posrel — не реагирует вовсе, w10 — тоже, wdt превращается в webkit-search-decoration, а pr в pull-right. Ну и так далее, может я что-то не так сделал?

                                          Mac OS X Mountain Lion, Sublime Text 2 и Hayaku последних версий.
                                          • 0
                                            Наверно конфликтует с каким-нибудь ZenCoding'ом? Посмотрите в плагины.
                                          • +1
                                            FIXED. Сам дурак :)
                                          • 0
                                            Hayaku в переводе с японского: «быстрее», «поторапливайся» или типа того.
                                            • 0
                                              Спасибо, за перевод, избавился от дурного. А то у меня до этого момента только один нецензурный русский вариант близкий по звучанию в голове крутился… :)
                                            • 0
                                              Подскажите, а для таких файлов как style.css.sass он подхватывает настройки как для sass или css?
                                              • 0
                                                Должен как для sass — за это отвечает сам ST2 — какой синтаксис он подхватит, тот и будет использоваться.
                                                • 0
                                                  синтаксис sass берется, но при написании стилей подставляются ";" что не нужно
                                                  • 0
                                                    Попробуйте перезапустить Саблайм — сейчас проверил — почему-то после установке через package control саблайм не подхватывает настройки для отдельных синтаксисов пока его не перезагрузишь :(

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

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое