Download to read offline
![12
Gonzales AST
color: rgb(255,0,0)
"
['declaration',
['property',
['ident', 'color']],
['propertyDelim'],
['value',
['s', ' '],
['function',
['ident', 'rgb'],
['functionBody',
['number', '255'],
['operator', ','],
['number', '0'],
['operator', ','],
['number', '0']]]]]](https://image.slidesharecdn.com/csscomb-140626082611-phpapp02/75/CSScomb-js-MoscowJS-12-12-2048.jpg)
![13
Преобразование узлов
processTree: function(tree) {
this._handlers.forEach(function(handler) {
this.processNode(['tree', tree], 0, handler);
}, this);
return tree;
},
processNode: function(node, level, handler) {
node.forEach(function(node) {
var nodeType = node.shift();
handler.process(nodeType, node, level);
node.unshift(nodeType);
this.processNode(node, level, handler);
}, this);
}](https://image.slidesharecdn.com/csscomb-140626082611-phpapp02/75/CSScomb-js-MoscowJS-12-13-2048.jpg)
![14
Обработчик
process: function(nodeType, node) {
if (nodeType === 'string') {
if (node[0][0] === '"' && this._value === 'single’)
node[0] = node[0]
.replace(/"/g, '"')
.replace(/([^])'/g, '$1'')
.replace(/^"|"$/g, ''');
else if (node[0][0] === ''' && this._value === 'double’)
node[0] = node[0]
.replace(/'/g, ''')
.replace(/([^])"/g, '$1"')
.replace(/^'|'$/g, '"');
}
}](https://image.slidesharecdn.com/csscomb-140626082611-phpapp02/75/CSScomb-js-MoscowJS-12-14-2048.jpg)
Uploaded byMoscowJS
"CSScomb.js — вторая жизнь" — Михаил Трошев, Яндекс — доклад на MoscowJS 12
Документ описывает использование csscomb.js в проекте, включая статистку команды, методы коллективной разработки и инструменты для управления кодом. Приведены примеры использования, а также ссылки на полезные ресурсы и советы по оптимизации CSS. Также упомянуты текущие функции и планы на будущее для улучшения работы с csscomb.js.
"CSScomb.js — вторая жизнь" — Михаил Трошев, Яндекс — доклад на MoscowJS 12
- 1. 1 CSScomb.js вторая жизнь Михаил Трошев,Яндекс MoscowJS, 26 июня 2014
- 2. 2 Статистика Наша команда: 6 городов 30разработчиков ~10 пул-реквестов в день
- 3. 3 Статистика Наш код: > 1Мб исходного CSS > 40 000 строк ~140 Кб после минификации
- 4. 4 Коллективная разработка большой истарый проект непрерывная интеграция автобусное число коллективное владение кодом
- 5.
- 6. 6 Инструменты JavaScript: JSHint, JSCS,JSLint, ESLint CSS: ???
- 7. 7 Инструменты CSScomb: + сортировка – ничегобольше – PHP – RegExp
- 8.
- 9.
- 10. 10 Ингридиенты парсер — Gonzales обвязка— JSCS модули — TODO тесты — TODO
- 11.
- 12. 12 Gonzales AST color: rgb(255,0,0) " ['declaration', ['property', ['ident','color']], ['propertyDelim'], ['value', ['s', ' '], ['function', ['ident', 'rgb'], ['functionBody', ['number', '255'], ['operator', ','], ['number', '0'], ['operator', ','], ['number', '0']]]]]
- 13. 13 Преобразование узлов processTree: function(tree){ this._handlers.forEach(function(handler) { this.processNode(['tree', tree], 0, handler); }, this); return tree; }, processNode: function(node, level, handler) { node.forEach(function(node) { var nodeType = node.shift(); handler.process(nodeType, node, level); node.unshift(nodeType); this.processNode(node, level, handler); }, this); }
- 14. 14 Обработчик process: function(nodeType, node){ if (nodeType === 'string') { if (node[0][0] === '"' && this._value === 'single’) node[0] = node[0] .replace(/"/g, '"') .replace(/([^])'/g, '$1'') .replace(/^"|"$/g, '''); else if (node[0][0] === ''' && this._value === 'double’) node[0] = node[0] .replace(/'/g, ''') .replace(/([^])"/g, '$1"') .replace(/^'|'$/g, '"'); } }
- 15. 15 На сегодняшний день —консольный и модульный режимы работы — lint-режим — поддержка LESS и SASS — сортировка + 24 модуля — автоматическая генерация конфига (!!!) — плагин для grunt — плагины для IDE TODO: — поддержка Stylus
- 16. 16 На сегодняшний день github.com/csscomb/csscomb.js $npm i csscomb версия — 2.0.5 мейнтейнер — @tonyganch
- 17. 17 Пример .test{ -webkit-transition: -webkit-transform .6s; transition:transform .6s; -webkit-transform: scale(.6,.6); transform: scale(.6, .6)} .test { -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); }
- 18. 18 Пример .select__separator{position:relative;z-index:3;float:left;width: 100%;margin-top:-1px;border-top:1px solid;font:0/0 a} .select__separator { font:0/0 a; position: relative; z-index: 3; float: left; width: 100%; margin-top: -1px; border-top: 1px solid; }
- 19.
- 20.
- 21. 21 Михаил Трошев Руководитель службыпоисковых интерфейсов mishanga.pro @ya_mishanga Яндекс
- 22. 22 Бонус-трек: оптимизация 170585 search.sort.css 165145 search.css 143685 search.csso.css 143685 search.csso.sort.css 142842 search.clean.sort.css 142744 search.clean.css 29315 search.sort.css.gzip 29117 search.css.gzip 27784 search.csso.css.gzip 27663 search.clean.css.gzip 27648 search.sort.css.gz 27619 search.csso.sort.css.gzip 27532 search.clean.sort.css.gzip 27495 search.css.gz 26357 search.csso.css.gz 26319 search.clean.css.gz 26208 search.csso.sort.css.gz 26099 search.clean.sort.css.gz *.gz — zopfli --i15 *.gzip — gzip -7 *.sort.* — после запуска csscomb *.csso.* — после csso *.clean.* — после clean-css Победитель: clean-css + csscomb + zopfli