Beyondtheclouds Jul 9 2014 at 16:05

Приводим в порядок css-код. Опыт Яндекса

6 min

90K

Яндекс corporate blogWebsite development*CSS*

+164

Comments 70

KReal Jul 9 2014 at 16:44

Вы используете исключительно ванильный CSS, без LESS, SASS, etc.?

asavin Jul 9 2014 at 17:01

Судя вот по таким штукам в документации, не только.

Beyondtheclouds Jul 9 2014 at 17:14

Конкретно на нашем проекте пока ванильный css, да. но CSSComb.js вполне умеет работать и c SASS/LESS

UFO landed and left these words here

Beyondtheclouds Jul 10 2014 at 10:42

Насколько я знаю в планах это есть: github.com/csscomb/csscomb.js/issues/159
Про сроки к сожалению ничего сказать не могу :(

mentatxx Jul 9 2014 at 18:03

Попробовал на less в своем проекте — очень красиво все сделало.
Что интересно, форматирует даже закомментированные свойства.

M1nstrel Jul 10 2014 at 06:18

С SASS работает прекрасно.
С недавних версий вполне отлично дружит с Compass.

Hooter Jul 10 2014 at 13:27

А у меня загнулось.
На переменных вначале файла где у меня цвета забиты ругается дальше не идет.
Убрал их, всю структуру стерло и отформатировало как обычный CSS.
Чего то не хватает.
А CSS отформатировало прекрасно, хотя вещается на комментариях начинающиеся с //

M1nstrel Jul 10 2014 at 15:12

Абсолютно та же ситуация была. Проверьте, что ставите последний csscomb – ранние версии глючили с Compass. С версией 3.0.0-5 полет нормальный.

Hooter Jul 10 2014 at 15:32

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

tonyganch Jul 10 2014 at 18:53

А покажите код, на котором падает, пожалуйста? github.com/csscomb/csscomb.js/issues/new

Hooter Jul 10 2014 at 20:08

Ок, сейчас попробую локализовать проблемные места и закину.

Hooter Jul 29 2014 at 12:14

Простая декларация переменных в SCSS, все остальное вроде работает на ура…

github.com/csscomb/csscomb.js/issues/275

tonyganch Jul 10 2014 at 18:52

`// comment` = невалидный комментарий для css, поэтому появляется ошибка парсинга.

Hooter Jul 10 2014 at 20:07

Да, но блин часто используемый. Сейчас занимаюсь системой на JBoss, тут вебмастеров отродясь похоже не было, столько соплей и не валидной разметки я с прошлого века не видел.
Вот будут потихонечку все это переписывать и приводить к кошерному виду, пока все под Section 508 привожу.

illinifellow Jul 9 2014 at 16:59

Копаться в css — както неблагородно в наши дни.
Особенно, когда проект размером с самолет.

Для систематизации и оптимизации отлично подойдут функции, миксины и прочие крутые штуки, которые предалагает, например, LESS.

rWeb Jul 9 2014 at 17:09

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

rWeb Jul 9 2014 at 17:00

Имеется ли у вас общедоступный стайлгайд по стилям, который включает порядок свойств, вендорных префиксов, необходимые отступы?

Beyondtheclouds Jul 9 2014 at 17:16

Внутри комба, есть несколько заранее написанных конфигов. На данный момент наш очень похож на этот: github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

Aliance Jul 9 2014 at 17:19

Есть ли возможность обойти хук? В редких случаях такое нужно.
Можно было бы сделать через комментарий в начале файла вида /* @CSSComb ignore */

Beyondtheclouds Jul 9 2014 at 17:22

Если ты мегаотвественный и понимаешь что делаешь то ты можешь сделать.
git commit ololo --no-verify
Но вся отвественность за такое будет полностью на тебе.

vp_arth Jul 9 2014 at 20:37

по моему важно, чтобы этот коммит потом получил отлуп и на pre-receive хуке на сервере…

mishanga Jul 10 2014 at 12:04

Часто бывает, что инструменты некорректно воспринимают код и ругаются, даже если он правильный. В этом случае у разработчика должна быть возможность сознательно обойти автоматическую защиту и закоммитить код.
Мы верим, что люди умнее программ :)

Mithgol Jul 9 2014 at 19:50

Почему AST имеет форму массива (а не объекта, как это сделано в Mozilla Parser API)?.

vp_arth Jul 9 2014 at 20:36

мб потому что простого списка достаточно?

Mithgol Jul 9 2014 at 22:14

Но ведь эта достаточность подчас стесняет.

Если есть объект, то доступ к свойствам его происходит по именам их, причём некоторые свойства могут быть не заданы. Если есть массив, то приходится помнить номер вместо имени и задавать все элементы, да ещё и в строгом порядке их.

Кроме того, в массивах хуже поддерживается обратная совместимость. Получается, что на будущее нельзя отказаться ни от одного из элементов массива без того, чтобы не принудить пользователей ставить на его место всегда «null» (или что-то другое в этом же дýхе) «по историческим соображениям».

vp_arth Jul 9 2014 at 22:48

это не просто массив, а синтаксическое дерево… вроде лиспа…

Mithgol Jul 10 2014 at 09:52

Повторяю первоначальный вопрос: почему AST (это сокращение означает «abstract syntax tree», так что я знал с сáмого начала, что это синтаксическое дерево) имеет форму массива, а не объекта?

Beyondtheclouds Jul 10 2014 at 10:38

Это больше вопрос к автору парсера: github.com/tonyganch/gonzales-pe.
Достоверно, почему сделанно именно так, я ответить не могу. Но всегда можно создать issue и спросить там.

tenbits Jul 10 2014 at 16:56

Массивы — компактные и на порядок производительнее. У нас также есть один парсер, и там мы боримся с каждой мс. Сейчас у нас дерево через обьекты представлено, a вот однажды пытались на массивы перейти. И всё было очень здорово — с индексами было удобно работать через константы:

// INode [type:int, tag:string, attributes:object, nodes:array]
var tagName = node[pos_TAG];
var children   =  node[pos_NODES];

В конечном разультате код стал быстрее и после минификации стал меньше. Но пришлось отказаться — хотелось давать конечным пользивателям непосредственный доступ к дереву. А вот там ему уже эти индексы нужно помнить, ведь `pos_*` скрыты внутри библиотеки, а выносить как свойства наружу — усложнит простую работу с деревом.

Хотя заметили, что в csscomb другая структура используется: [KEY, VALUE] и такой подход немного перемешивает массивы с обьектами; как по мне — довольно не корректно.

VolCh Jul 10 2014 at 00:29

Массив упорядоченный, а объект, вроде как, не обязательно?

Mithgol Jul 10 2014 at 09:55

Да.

Но является ли упорядоченность массива достоинством или недостатком?

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

Если свойство объекта выйдет из употребления, то достаточно перестать употреблять его — а если элемент массива выйдет из употребления, то всех пользователей новых версий придётся приучить на его место в массиве ставить «null» (или что-то другое в этом же роде) «по историческим соображениям», что и выглядит похуже, и время растрачивает.

mishanga Jul 10 2014 at 12:06

В описанном случае достаточно ввести новый тип узла.

putnik Jul 9 2014 at 20:10

Есть ли какая-нибудь возможность задать такой формат?

.block {
    position: absolute;
}

Всё, что у меня получается, — это либо открывающая скобка на новой строке, либо закрывающая с отступом.

mentatxx Jul 9 2014 at 20:25

Попробуйте в конфигурации опцию space-before-opening-brace установить в " "

putnik Jul 9 2014 at 20:30

Уже пробовал. Никак не реагирует.

putnik Jul 9 2014 at 20:37

Извиняюсь, всё заработало. Нужно было указать "space-before-closing-brace": "\n", почему не срабатывало раньше — не понимаю.

hell0w0rd Jul 9 2014 at 22:42

Скажите, а зачем вы сами пишите вендорные префиксы, если есть такие прекрасные проекты, как autoprefixer?

Beyondtheclouds Jul 9 2014 at 23:10

Очень пристально на него смотрим и планируем использовать :)

mishanga Jul 10 2014 at 12:09

Редко, но бывает, что какие-нибудь хитрые случаи приходится костылять явно.
Но в целом, конечно, Автопрефиксер прекрасен :)

hell0w0rd Jul 10 2014 at 12:17

По идее есть api для своих префиксов

funca Jul 9 2014 at 23:00

del

isxaker Jul 9 2014 at 23:30

«мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает» — было недавно

Smerig Jul 10 2014 at 10:16

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

MASe Jul 10 2014 at 09:33

верните нумерацию выдачи в поиске

signumum Jul 10 2014 at 10:02

a {
	position: relative;

	color: #a00;
	span {
		display: block;
		float: left;
	}
}

можно ли как-то добавить пустую строку между цветом и спаном?

GruZZ Jul 10 2014 at 10:29

Можно группировать как душе угодно: github.com/csscomb/csscomb.js/blob/master/doc/options.md#sort-order

signumum Jul 10 2014 at 10:41

да, это понятно, $variable — переменные, $include — миксины…
но как обозначаются вложенные правила (селекторы)?

tonyganch Jul 10 2014 at 18:56

Вложенные правила сейчас никак не сортируются. Есть вот такая похожая задача: github.com/csscomb/csscomb.js/issues/210
Но если color входит в список sort-order, пустая строка должна была добавиться. Заведите таск, пожалуйста, я посмотрю: github.com/csscomb/csscomb.js/issues/new

iBear Jul 10 2014 at 12:18

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

iBear Jul 10 2014 at 12:20

На первую часть вопроса нашел ответ

tonyganch Jul 10 2014 at 18:54

Поддержка плагина для Coda 2 не планируется.

plutov Jul 10 2014 at 13:25

Вот вы описали случай, когда в одном блоке указаны 2 свойства position. В одном месте absolute, в другом — relative. Что сделает с этими свойствами CSSComb?

UFO landed and left these words here

plutov Jul 10 2014 at 14:03

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

mishanga Jul 10 2014 at 16:04

Нет, это же не ошибка, а вполне себе валидный CSS-код.
Пишут ведь костыли вида "display: inline-block; display: inline;" для старых браузеров.

loingrim Jul 10 2014 at 15:02

Код-стайл – это, конечо, важно, но что делать, если проблемы более глобальны?
Вот мне сейчас достался проект, где куча мертвого кода, костылей, переопределяющих всё и вся и прочей ереси. Я к нему подступиться боюсь.

Beyondtheclouds Jul 10 2014 at 15:15

Я незнаю инструмента который мог бы помочь в этой ситуации кроме кофе )

loingrim Jul 10 2014 at 15:30

Много кофе и переверстать. :)
И сразу привить нормальный стиль.
Вобще, у меня есть ощущение, что если не следить за стилем, то CSS в помойку превращается раньше других частей и необратимее.

mishanga Jul 10 2014 at 16:08

Очень спасает модульность. Когда кода много, он должен быть разбит на отдельные понятные куски. Например, по принципам БЭМ.

POPSuL Jul 10 2014 at 16:35

И чем модульность поможет от мертвых стилей?

mishanga Jul 10 2014 at 17:21

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

POPSuL Jul 10 2014 at 17:24

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

mishanga Jul 10 2014 at 17:31

Ну я даже не знаю… Протестировать? :)
Для этого есть unit-тесты на скрипты и вёрстку, есть регрессионные авто-тесты.
В самом простом случае можно погрепать проект и поискать там упоминание оставшихся стилей.

Вполне очевидно, что любой рефакторинг чреват багами, но делать его необходимо. Поэтому нужно максимально обложиться со всех сторон инструментами контроля, провести инвентаризацию проекта и, засучив рукава, наводить порядок.

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

loingrim Jul 10 2014 at 16:59

Это когда она есть. А когда её нет, то не спасает… :)

mishanga Jul 10 2014 at 17:21

Чтобы модульность спасла, её нужно внедрить. См. выше :)

mishanga Jul 10 2014 at 16:06

github.com/csslint/csslint + аудит в Хроме

loingrim Jul 10 2014 at 16:58

Вот спасибо! Посмотрим.

UFO landed and left these words here