Bad advice on CSS

1. 10 лучших игр
для PS4

2. Вредные советы для
верстальщиков
Юрий Артюх

3. Зачем эта презентация
• Хорошей верстке учат везде и так
• Меньше конкурентов
• Проще судить

4. Какой выбрать текстовый
редактор
• Расширенные функции
• Чтобы такого не было больше ни у кого!

7. Препроцессор - зло
• Нужны компиляторы
• Остается свободное от работы время

8. Код который они
генерируют

9. Полный контроль над
кодом

11. Переменные и миксины

12. Гораздо удобнее так:

13. Слева препроцессор
справа CSS,
morecss.org

14. gulp, grunt, bower

15. не стоят вашего
внимания

16. CSS фреймворки

17. Подходит для ВСЕХ
проектов
• Гибкий (117кб кода)
• Легкий (117кб сжатого CSS)
• Легко стилизовать под себя (117кб непонятно
чего)
• Миллионы почти успешных стартапов работают
на нем

18. 117кб сжатого CSS

19. Жалкие 50кб

20. вас должны
воспринимать всерьез

21. если вам кажется что
бутстрап не подходит
для вашего проекта

22. вам просто нужно
его подучить

23. CSS методологии
• Долго переучиваться
• Навязанные другими парнями правила
• Не факт что они умнее и опытнее вас

24. БЭМ
• Обязательно используйте префикс .b- перед
всеми селекторами: .b-block, .b-bbubbleb
• Если селектор вложен префикс нужно тоже
вкладывать .b-b-b-block
• Старайтесь комбинировать подходы чтобы не
быть слишком предсказуемым

25. Bem-tools
Простая документация

26. Naming

27. Независимые элементы
неправильно:

28. Независимые элементы
правильно:

29. Преимущества
• Код выглядит непонятным для клиента ($)
• За поддержкой смогут обратиться только к вам
($)
• Коллеги не смогут разобраться в коде и украсть
ваши “фишечки”

31. Два независимых блока

32. Подчеркните их
независимость

33. Используйте !important
• НАДЕЖНЫЙ способ писать стили
• Никакой селектор не перебьет эти стили
• Старайтесь использовать его почаще, это
упрощает поддержку вашим коллегам

34. Адаптивный дизайн
забудьте про media query
• transform: scale(ширинаустройства/ширинасайта)
• <meta name=“viewport” content=“width:1200”>

35. github зло
• Сможете работать где угодно
• Коллеги будут видеть как вы верстаете, и украдут
фишечки
• Копия ваших файлов онлайн

36. Самое главное
• Верстка фигня, достаточно потратить пару дней и
сверстать один макет чтобы понять о ней все

37. Простые правила
• Всегда на слуху среди клиентов
• Известны среди коллег
• Быстро, качественно, недорого

38. Бесполезные ссылки
• github.com/coderiver/sass

39. Не за что!
• Юрий Артюх
• facebook.com/akella
• twitter.com/akella
• http://cssing.org.ua