Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Bad CSS advice

642 Aufrufe

Veröffentlicht am

Bad advice on CSS

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Bad CSS advice

  1. 1. 10 лучших игр для PS4
  2. 2. Вредные советы для верстальщиков Юрий Артюх
  3. 3. Зачем эта презентация • Хорошей верстке учат везде и так • Меньше конкурентов • Проще судить
  4. 4. Какой выбрать текстовый редактор • Расширенные функции • Чтобы такого не было больше ни у кого!
  5. 5. Препроцессор - зло • Нужны компиляторы • Остается свободное от работы время
  6. 6. Код который они генерируют
  7. 7. Полный контроль над кодом
  8. 8. Переменные и миксины
  9. 9. Гораздо удобнее так:
  10. 10. Слева препроцессор справа CSS, morecss.org
  11. 11. gulp, grunt, bower
  12. 12. не стоят вашего внимания
  13. 13. CSS фреймворки
  14. 14. Подходит для ВСЕХ проектов • Гибкий (117кб кода) • Легкий (117кб сжатого CSS) • Легко стилизовать под себя (117кб непонятно чего) • Миллионы почти успешных стартапов работают на нем
  15. 15. 117кб сжатого CSS
  16. 16. Жалкие 50кб
  17. 17. вас должны воспринимать всерьез
  18. 18. если вам кажется что бутстрап не подходит для вашего проекта
  19. 19. вам просто нужно его подучить
  20. 20. CSS методологии • Долго переучиваться • Навязанные другими парнями правила • Не факт что они умнее и опытнее вас
  21. 21. БЭМ • Обязательно используйте префикс .b- перед всеми селекторами: .b-block, .b-bbubbleb • Если селектор вложен префикс нужно тоже вкладывать .b-b-b-block • Старайтесь комбинировать подходы чтобы не быть слишком предсказуемым
  22. 22. Bem-tools Простая документация
  23. 23. Naming
  24. 24. Независимые элементы неправильно:
  25. 25. Независимые элементы правильно:
  26. 26. Преимущества • Код выглядит непонятным для клиента ($) • За поддержкой смогут обратиться только к вам ($) • Коллеги не смогут разобраться в коде и украсть ваши “фишечки”
  27. 27. Два независимых блока
  28. 28. Подчеркните их независимость
  29. 29. Используйте !important • НАДЕЖНЫЙ способ писать стили • Никакой селектор не перебьет эти стили • Старайтесь использовать его почаще, это упрощает поддержку вашим коллегам
  30. 30. Адаптивный дизайн забудьте про media query • transform: scale(ширинаустройства/ширинасайта) • <meta name=“viewport” content=“width:1200”>
  31. 31. github зло • Сможете работать где угодно • Коллеги будут видеть как вы верстаете, и украдут фишечки • Копия ваших файлов онлайн
  32. 32. Самое главное • Верстка фигня, достаточно потратить пару дней и сверстать один макет чтобы понять о ней все
  33. 33. Простые правила • Всегда на слуху среди клиентов • Известны среди коллег • Быстро, качественно, недорого
  34. 34. Бесполезные ссылки • github.com/coderiver/sass
  35. 35. Не за что! • Юрий Артюх • facebook.com/akella • twitter.com/akella • http://cssing.org.ua

×