Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
slide1
slide 2
Всякое про верстку
Юрий Артюх
Привет
• Меня зовут Юра
• Я лентяй
y = 70 – 1/x;
каръера
сколько готов потратить на Sublime
y = 70 – 1/x;
каръера
сколько готов потратить на Sublime
Причины не покупать
• И так работает
• А вдруг мне нужен WebShtorm
• Это стоит денег
• Atom попробую
• Стать объектом шуто...
Причины покупать
¯_(ツ)_/¯
Emoji
Flex Box
https://github.com/xieranmaya/blog/issues/6
всегда изучайте что-то
новое
Самое тяжелое
начинать проект
Сборка фронтенда,
2004 н.э.
Потом появился Sass
и Compass, 2008
Grunt, 2011
Gulp, 2013 и Yeoman
Автоматизируйте все
Данные
https://www.npmjs.com/package/generator-man
Зачем PostCSS
• Когда вы постоянно оптимизируете свою
работу
• Когда вы хотите понимать что происходит (на
самом деле нет)
Что можно делать?
• Autoprefixer, очевидно
• mq-packer
• rtlсss
• Все что позволяет фантазия
Если вы ленивый китаец
.foo {
定位: 相对;
背景颜⾊色: 三⽂文⻥鱼;
背景图⽚片: ⽆无;
字体家族: Helvetica, Arial;
颜⾊色: ⽩白;
⾏行行⾼高: 1.68;
字⺟母间距: 2px;
浮...
Как я привык писать Sass
Как я пишу PostCSS
Все равно лень!
Визуальная проверка
Backstop
https://github.com/garris/BackstopJS
Проверка зависимостей
webpack-bundle-analyzer
Stylelint
Простые ошибки
DIV
disPlay: block
width: 100px

Перезапись свойств
.block
margin-top: 10px
margin: 0 auto
Специфичность селекторов
.superclass .block
display: block
.block
margin: 0 0 0 0

Близкие цвета
.block .class1 .class2 .class3
background: #010101
color: #000 

{
"rules": {
"property-case": "lower",
"no-indistinguishable-colors":true,
"selector-type-case": "lower",
"no-unknown-anim...
ошиблись два раза –
правило
Проверка БЭМ
(SUIT, или любого другого кодстайла)
//* @define component
.component
display: block
&__element
display: none...
// BEM
.block
.block__element
.block_modifier
// SUIT
.MyComponent
.MyComponent.is-active
.MyComponent--modifier
// MINE
....
WTF
{
"plugin/selector-bem-pattern": {
"componentName": “[a-z0-9-_]+$”,
"componentSelectors": "^(?:.(?:
{componentName}|is...
WTF
WTF
WTF
Что даст
http://regexr.com/
• лучше понимать конфиги, .htaccess, делать
поиск по тексту, и быть крутым пацаном
(девчонкой)...
На самом деле нет
Lint-staged
package.json:
{
"lint-staged": {
"*.css": "stylelint",
},
"pre-commit": "lint-staged"
}

git-guppy
(run gulp task on git hook)
husky, pre-commit
gulp.task('pre-commit', function () {
return gulp
.src(‘*.css’)
.p...
Делитесь правилами
и воруйте
{
"extends": “stylelint-akella-krasavchik",
"rules": {
"indentation": "tab",
"number-leading-...
Будьте ленивыми!
Три заповеди
верстальщика
1) Сделать счастливым дизайнера
2) Сделать счастливым программиста
3) Сделать счастливым следующ...
Спасибо!
• Юрий Артюх
• facebook.com/akella
• twitter.com/akella
• cssing.org.ua
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Перевірка і оптимізація верстки
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
CSS по БЕМ
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Перевірка і оптимізація верстки

Download to read offline

C'n'C #27 - Front-end

Юрій Артюх

CEO у Coderiver, фронтенд розробник, дуже багато верстав :)

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Перевірка і оптимізація верстки

  1. 1. slide1
  2. 2. slide 2
  3. 3. Всякое про верстку Юрий Артюх
  4. 4. Привет • Меня зовут Юра • Я лентяй
  5. 5. y = 70 – 1/x; каръера сколько готов потратить на Sublime
  6. 6. y = 70 – 1/x; каръера сколько готов потратить на Sublime
  7. 7. Причины не покупать • И так работает • А вдруг мне нужен WebShtorm • Это стоит денег • Atom попробую • Стать объектом шуток для коллег
  8. 8. Причины покупать ¯_(ツ)_/¯
  9. 9. Emoji
  10. 10. Flex Box https://github.com/xieranmaya/blog/issues/6
  11. 11. всегда изучайте что-то новое
  12. 12. Самое тяжелое начинать проект
  13. 13. Сборка фронтенда, 2004 н.э.
  14. 14. Потом появился Sass и Compass, 2008
  15. 15. Grunt, 2011
  16. 16. Gulp, 2013 и Yeoman
  17. 17. Автоматизируйте все
  18. 18. Данные https://www.npmjs.com/package/generator-man
  19. 19. Зачем PostCSS • Когда вы постоянно оптимизируете свою работу • Когда вы хотите понимать что происходит (на самом деле нет)
  20. 20. Что можно делать? • Autoprefixer, очевидно • mq-packer • rtlсss • Все что позволяет фантазия
  21. 21. Если вы ленивый китаец .foo { 定位: 相对; 背景颜⾊色: 三⽂文⻥鱼; 背景图⽚片: ⽆无; 字体家族: Helvetica, Arial; 颜⾊色: ⽩白; ⾏行行⾼高: 1.68; 字⺟母间距: 2px; 浮动: 左; 显示: ⽆无; 层级: 1000 !重要; }
 .foo { position: relative; background-color: salm background-image: none font-family: Helvetica color: white; line-height: 1.68; letter-spacing: 2px; float: left; display: none; z-index: 1000 !importa }
  22. 22. Как я привык писать Sass
  23. 23. Как я пишу PostCSS
  24. 24. Все равно лень!
  25. 25. Визуальная проверка Backstop https://github.com/garris/BackstopJS
  26. 26. Проверка зависимостей webpack-bundle-analyzer
  27. 27. Stylelint
  28. 28. Простые ошибки DIV disPlay: block width: 100px

  29. 29. Перезапись свойств .block margin-top: 10px margin: 0 auto
  30. 30. Специфичность селекторов .superclass .block display: block .block margin: 0 0 0 0

  31. 31. Близкие цвета .block .class1 .class2 .class3 background: #010101 color: #000 

  32. 32. { "rules": { "property-case": "lower", "no-indistinguishable-colors":true, "selector-type-case": "lower", "no-unknown-animations":true, "indentation": "tab", "selector-max-compound-selectors": 3, "no-duplicate-selectors": true, "shorthand-property-no-redundant-values": true, "max-nesting-depth": 2, "no-descending-specificity": true, "declaration-colon-space-after": “always", …
  33. 33. ошиблись два раза – правило
  34. 34. Проверка БЭМ (SUIT, или любого другого кодстайла) //* @define component .component display: block &__element display: none .other-component // Ошибка, зависимость display: none 

  35. 35. // BEM .block .block__element .block_modifier // SUIT .MyComponent .MyComponent.is-active .MyComponent--modifier // MINE .block.is-active .block .block__element.is-rotating .block_modifier.is-active
  36. 36. WTF { "plugin/selector-bem-pattern": { "componentName": “[a-z0-9-_]+$”, "componentSelectors": "^(?:.(?: {componentName}|is[-](?:[a-z0-9-_]*)) [ ]?(?:__[a-z0-ಠ_ಠ9-_]+)?(?:_[a-z0-9]+ (?:-[a-z0-9]+)*){0,2}[ ]?)+$" } }

  37. 37. WTF
  38. 38. WTF
  39. 39. WTF
  40. 40. Что даст http://regexr.com/ • лучше понимать конфиги, .htaccess, делать поиск по тексту, и быть крутым пацаном (девчонкой) • Наконец-то напишете свою регулярку для email • Сможете лениться еще больше • Завоевать девушку своей мечты
  41. 41. На самом деле нет
  42. 42. Lint-staged package.json: { "lint-staged": { "*.css": "stylelint", }, "pre-commit": "lint-staged" }

  43. 43. git-guppy (run gulp task on git hook) husky, pre-commit gulp.task('pre-commit', function () { return gulp .src(‘*.css’) .pipe(stylelint()) });
  44. 44. Делитесь правилами и воруйте { "extends": “stylelint-akella-krasavchik", "rules": { "indentation": "tab", "number-leading-zero": null } }
  45. 45. Будьте ленивыми!
  46. 46. Три заповеди верстальщика 1) Сделать счастливым дизайнера 2) Сделать счастливым программиста 3) Сделать счастливым следующего парня работающего с твоим кодом
  47. 47. Спасибо! • Юрий Артюх • facebook.com/akella • twitter.com/akella • cssing.org.ua

C'n'C #27 - Front-end Юрій Артюх CEO у Coderiver, фронтенд розробник, дуже багато верстав :)

Views

Total views

209

On Slideshare

0

From embeds

0

Number of embeds

41

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×