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

Вредные советы для верстальщиков

Юрий Артюх

Зачем эта презентация

• Хорошей верстке учат везде и так

• Меньше конкурентов

• Проще судить

Какой выбрать текстовый редактор

• Расширенные функции

• Чтобы такого не было больше ни у кого!

Препроцессор - зло

• Нужны компиляторы

• Остается свободное от работы время

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

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

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

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

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

gulp, grunt, bower

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

CSS фреймворки

Подходит для ВСЕХ проектов

• Гибкий (117кб кода)

• Легкий (117кб сжатого CSS)

• Легко стилизовать под себя (117кб непонятно чего)

• Миллионы почти успешных стартапов работают на нем

117кб сжатого CSS

Жалкие 50кб

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

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

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

CSS методологии

• Долго переучиваться

• Навязанные другими парнями правила

• Не факт что они умнее и опытнее вас

БЭМ

• Обязательно используйте префикс .b- перед всеми селекторами: .b-block, .b-bbubbleb

• Если селектор вложен префикс нужно тоже вкладывать .b-b-b-block

• Старайтесь комбинировать подходы чтобы не быть слишком предсказуемым

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

Naming

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

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

Преимущества

• Код выглядит непонятным для клиента ($)

• За поддержкой смогут обратиться только к вам ($)

• Коллеги не смогут разобраться в коде и украсть ваши “фишечки”

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

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

Используйте !important

• НАДЕЖНЫЙ способ писать стили

• Никакой селектор не перебьет эти стили

• Старайтесь использовать его почаще, это упрощает поддержку вашим коллегам

Адаптивный дизайн забудьте про media query

• transform: scale(ширинаустройства/ширинасайта)

• <meta name=“viewport” content=“width:1200”>

github зло

• Сможете работать где угодно

• Коллеги будут видеть как вы верстаете, и украдут фишечки

• Копия ваших файлов онлайн

Самое главное

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

Простые правила

• Всегда на слуху среди клиентов

• Известны среди коллег

• Быстро, качественно, недорого

Бесполезные ссылки

• github.com/coderiver/sass

Не за что!

• Юрий Артюх

• facebook.com/akella

• twitter.com/akella

• http://cssing.org.ua