Илья Андриенко: Вёрстка в проекте глазами ...

Верстка в проекте глазами “неверстальщика”

Андриенко Илья, DataArt

“I am wondering, why are you here? Hmm?”

Основная цель этого доклада:Предотвратить возможную катастрофу в будущем

CSS-препроцессоры

Популярны в среде фреймворков

.. и многие другие

• Родом из 2009 года.

• CSS => LESS => CSS

• Написан на JavaScript (NodeJS)

Переменные как возможность повторяться

@background_color: #ffffff;@foreground_color: #000000;

.content{ background: @background_color; color: @foreground_color;}

.footer{ background: @foreground_color; color: @background_color;}

.content { background: #ffffff; color: #000000;}.footer { background: #000000; color: #ffffff;}

Примеси как возможность не повторяться

.get_rid_of_text(){ text-indent: -9999px; white-space: nowrap; overflow: hidden;}

.logo_header{ width: 200px; height: 50px; background: url("logo.png") no-repeat; .get_rid_of_text();}

.logo_footer{ width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; .get_rid_of_text();}

.logo_header { width: 200px; height: 50px; background: url("logo.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden;}

.logo_footer { width: 75px; height: 50px; background: url("logo-foot.png") no-repeat; text-indent: -9999px; white-space: nowrap; overflow: hidden;}

Вложенность или возможность писать стройные таблицы

.parent{ background:#ff0; .child{ background: #0f0; }}

.parent{ background: #ff0;}

.parent .child { background: #0f0;}

Включения – коллективная работа

@import "style";@import "layout";

/* Layout */.content{ width: 80%; margin: auto;}

.footer{ height: 200px;}

/* Styles */.content{ color:#ff0; background: #000;}

.footer{ background: #000; color:#f00;}

/* Styles */.content{ color: #ff0; background: #000;}.footer{ background: #000; color: #f00;}

/* Layout */.content{ width: 80%; margin: auto;}.footer{ height: 200px;}

Проблема:

не вся команда готова использовать,а правки в верстку вносить приходится всем

(не дёргать же верстальщика по мелочам)

Хорошая верстка(с препроцессором)

CSS-результат

Глазами фронтендщика

Глазами бекендщика

Большой уродливый CSS-файл

Глазами бекендщика

Большой уродливый CSS-файлМаленькие правки

Большой уродливый CSS-файл(с правками)

Хорошая верстка(с препроцессором)

CSS-результат

Глазами фронтендщика

Большой уродливый CSS-файл(с правками)

Мелкие правки бекендщика затёрли.

Причины

•Тяжело настраивать

•Страх дебага

•Лень собирать

Настройка и установка

Особенно актуальна эта проблема для пользователей Windows.

Люди не хотят ставить Node или Ruby только для работы с версткой

Решения проблемы

• Курить маны и ставить

• Скачать велосипед (их десятки)

• Портативная версия компилятора Например, http://tinyurl.com/tools-css

Проблема с дебагом:

Трудно понять, откуда взялась та или иная строка.

..решение: source maps

• Вотчеры в IDE.

• Родные вотчеры процессоров

• Планировщики задач

(сборка на сервере)

Спасение от лени

Резюмируя:

• Можно добавить в вёрстку программистскую логику

• Можно не пользоваться и толком, но быть готовы должны все

• Попробуйте! Это не больно :P (http://tinyurl.com/tools-css)

Всем спасибо!

http://tinyurl.com/pugdnepr

ilia.andrienko

ilya.andriyenko@dataart.com

Контакты автора

Имеет смысл вступить: