Как ускорить вёрстку

24 Dec, 2007

Несколько идей помогающих мне верстать быстрее и приятнее.

Я обожаю что-либо обобщать, а в последнее время так много занимался своим любимым хобби(вёрсткой), что решил поделиться простыми идеями помогающими мне делать это быстро, и уставать меньше.
Всё это субьектив фрилансера, который работает дома, и в основном верстает сайты с нуля.

Войти в транс

Обычно вход в транс происходит после 15-30 минут непрерывного труда, без ответов в аську и других дел. Это такое чудесное состояние, когда вы полностью в вёрстке, и все что есть в этом мире, это текстовый редактор и Фотошоп (да, я фанат). Состояние очень похоже на "счастье", максимальная самоактуализация, LSD и ecstasy курят.

Общепринято, что идеальная работа должна происходить блоками по 90 минут. Обязательно нужно делать перерывы каждые полтора часа, иначе можно сгореть. Хоть бы самому не забыть это делать :)

Разделять HTML и CSS

Удобно разделить весь процесс кодинга на этапы HTML+CSS. Хотя бы потому, что на обоих этапах нужны разного рода навыки, хоткеи и мыслительные процессы.

Фактически, 99% HTML можно написать заранее, просто глядя на дизайн. Затем, я обычно делаю небольшой перерыв и принимаюсь за CSS. Часто перерывом служит ночь. Во сне можно придумать как сверстать самые трудные места дизайна. Я уже давно привык решать трудные задачи во сне.

У меня при таком разделении на HTML и CSS вёрстку остается ощущение легкости после работы. Да и мозгу как-то попроще, меньше нужно переключаться. Много маленьких задач лучше чем одна большая.

От общего к деталям

Начинать легче с общего. Я обычно начинаю с построения лэйаута сайта. То бишь, некоего общего каркаса. Затем постепенно начинаю спускаться в детали.

Когда после 5 строк в CSS файле, у вас уже трехколоночный центрированный сайт. Создается ощущение, что сайт вобщем-то готов, только нужно доделать детали.

Такой же подход, кстати, используется и при проектировании интерфейсов — человеку первым полем дают заполнить самое важное(e-mail при регистрации, например), после чего все остальные поля кажутся просто формальностями.

"Фреймворки"

Чисто психологически проще начинать не с нуля, не создавать все файлы и папки, а использовать некий шаблон. Я например ощущаю, что переименовывая папку "template" в "novaya-verstka", я уже практически сделал полдела.

Проще самому выработать свой стартовый шаблон, просто посмотрев, что вы делаете в начале каждого проекта. Так, например, сделал я.

Последний год стали очень популярными так называемые CSS-фреймворки, можно использовать один из них:

CSS-Framework.ru — русский фреймворк, поддерживает и разрабатывает Алексей Романовский
Blueprint — один из самых старых фреймворков
YUI Grids CSS — мощнейший инструмент, преопределенные имена классов для практически всех видов лейаутов

У меня они не прижились, и я использую просто набор файлов, о котором я уже писал. Самую новую версию моего "фреймворка" можно скачать отсюда. Он настолько гибкий(в нем почти ничего нет), что может даже кому-то пригодится.

Помните, лучший фреймворк — ваш фреймворк. Эта идея подтверждается во всех отраслях.

Хоткеи или куски готового кода

Трудно переоценить возможности современных текстовых редакторов, главное не забывать их использовать. Раньше я редко обращал внимание на использование хоткеев и писал много руками, однако Textmate все изменил. К примеру у меня стоят на таб-хоткеях следующие кусочки кода:

<div class="name">
</div>

Это помогает оставлять код легко читаемым, и соответственно, ускоряет внедрение сайта программистами. Для таких сниппетов я использую: div и нажатие TAB.

<form action="/">
<fieldset>
<legend>name</legend>
<p><label for="ff1">Имя</label> <input type="text" id="ff1" /></p>
</fieldset>
</form>

Список ссылок — атрибут практически 90% сайтов на сегодня:

<ul>
<li><a href="#">name</a></li>
</ul>

По опыту — это три самые часто встречающиеся для всех сайтов кусочка, стоит поставить их на горячие клавиши, вы уже сэкономите несколько минут жизни. Но никто не запрещает сделать 10 хоткеев.

Не верстать два сайта в один день

Во-первых, при такой скорости, вы станете неприлично богаты. А во-вторых, у меня лично начинает все путаться в голове, пытаешься вписать классы из одной вёрстки в код другой... Вобщем, это не для слабонервных.

В конце

Разумеется, все это вещи помогающие лично мне. Но как часто мы осознаём, что очень похожи друг на друга... Был бы рад услышать Ваши приемы ускоряющие работу!

31 комментариев к “Как ускорить вёрстку”

1.Samter | 06 Sep, 2009: честно, сколько не пытался сохранять старые работы - всегда наступаю на одни и теже грабли - пишу с нуля. единственное, что делаю с недавнего времени постоянно - reset.css со сброшенными маргинами и паддингами. кому интересно - http://divyou.com/reset.css
2.Dimox | 25 Dec, 2007: Мне хоткеи ОЧЕНЬ помогают при верстке. CSS- и HTML-шаблоны, естественно, тоже имеются, поэтому при создании нового файла вставляю их опять же комбинацией горячей клавиши. Шаблоны постоянно дополняю, когда замечаю, что при каждой верстке прописываю одни и теже стили или контейнеры. Кроме того, использую дополнительные скрипты к моему редактору. Например, у меня есть текстовый список: слово1 слово2 слово2 Одним кликом я его превращаю в хтмл-список со ссылками на словах. Существенно экономится время. > Я пишу одновременно “сверху вниз” и HTML и CSS файлы, также одновременно проверяю это в браузерах и ОС Делаю точно так же (кроме ОС). > Не верстать два сайта в один день В принципе я давненько так не делал, но если верстаю 2 сайта за день, то у меня никакой путаницы при этом не возникает :)
3.ganges | 25 Dec, 2007: Про таб-хоткеи ты мне глаза открыл, спасибо. Все, кроме "Разделять HTML и CSS" у меня прижилось. И, кстати, все стимуляторы, действительно вредны при работе, в том числе и декалитр кофе. Я пишу одновременно "сверху вниз" и HTML и CSS файлы, также одновременно проверяю это в браузерах и ОС
4.DEFF | 25 Dec, 2007: Хорошо и приятно работать, когда предугадываешь реакцию браузеров на код. Тогда получается разделять HTML и CSS (писать HTML блоками, а потом делать к ним CSS, весь док вечером, а оформление утром - ещё не удавалось). А когда начинают вылазить глючки и приходится экспериментировать, сильно падает не только производительность, но и работоспособность вообще
5.Sam | 25 Dec, 2007: О, да... транс - это самое оно :) Иногда забываю в процессе про время и засыпаю утром.
6.Snork | 25 Dec, 2007: На ClientSide Бесков-Доронин рассказывал про состояние "потока" близкое к счастью, в которое входит увлеченный своей работой человек. Думаю, это как раз то, что вы называете "чудесное состояние, когда вы полностью в вёрстке, и все что есть в этом мире, это текстовый редактор и Фотошоп". И этот пост - замечательная инструкция по вхождению в этот самый "поток".
7.Oracle | 25 Dec, 2007: > Я пишу одновременно “сверху вниз” и HTML и CSS файлы, также одновременно проверяю это в браузерах и ОС У меня похожая техника. Вот хочу попробовать разделять html и css как было написано в статье. Думаю, при умелом подходе, должно сильно сократить время разработки. Два сайта в один день делал - тяжеловато, много путаницы, согласен. Про транс, да, есть такое, иногда даже забываю поесть ;-)
8.Serhiy Valchuk | 25 Dec, 2007: Перший розділ це просто шик - сам за собою таке помічав, але не акцинтував на цьому. Хоткеї не пробував, але треба. Взагалі стаття дуже піднесена і сонячна. Маю питання: 1. Чи часто приходиться писати чи розбиратись у php i Javascript? І як це впливає на загальний стан при верстці сайту? 2. Чи розробляєш шаблони (теми) для CMS і яке це теж впливає :)
9.akella | 25 Dec, 2007: При единичных случаях "двух сайтов в один день" — еще можно жить, но при повторениях, все равно начинаются перегрузки... Я, кстати, удивился что мало кто разделяет HTML и CSS, я уже проектов 50 так сделал, и при большой текучке, облегчает мозг, хотя это может быть субьективно — нуждается в тестировании =) Пробуйте на свой страх и риск! Мне это кажется выгодным, еще и потому, что закончив HTML мы уже ощущаем некоторое облегчение, "полдела" сделано, сайт готов, только приукрасить осталось. Баги неприятная штука, но через определенное кол-во проектов вы их будете знать наизусть =) @ Snork: Дада! Я так жалел что прозевал его доклад! Вообще многие психологи подтвердили, что состояние счастья у человека, наступает именно в эти моменты, когда он напрягает все свои силы для любимого дела. В последнем psychology.ru вычитал, вот. @ Serhiy: 1. Часто делаю javascript, в основном правда для ненаших заказчиков(xhtmlized), так что иметь опыт обращения c jquery, prototype, domass нужно 2. Делал темы для wordpress, textpattern @ Dimox: Ухты! Полезный хоткей, а я для этого обычно выделял "вертикаль" и на ней во всех строках одновременно писал <a href.. В каком редакторе, если не секрет, ты такой хоткей используешь? Думаю был бы полезен всем.
10.lusever | 25 Dec, 2007: Хоткей в TextMate для списков — яблоко+контрол+шифт+w Гениальная вещь :)
11.akella | 25 Dec, 2007: А у меня такого нет =) Делись!
12.Тормоз | 25 Dec, 2007: Прикольно! У меня примерно также ) Только отдыхать забываю, блин... Или работаю сутками напролет, или нифига не делаю. Про CSS-фреймворки первый раз услышал. Не знаю, мне ближе подход с template.html (в нем фактически только head и body) + template.css (три строчки).
13.akella | 25 Dec, 2007: Мне тоже это ближе =) Правда в свой темплейт я вписал чуть больше, просто чтобы удалять лишнее, а не писать самому. Ломать -- не строить. =)
14.Dimox | 26 Dec, 2007: > В каком редакторе, если не секрет, ты такой хоткей используешь? Думаю был бы полезен всем. Я использую PSPad (не однократно упоминал это на своем блоге). На сайте редактора есть множество различных скриптов. Вот и я нашел этот однажды. Таким образом, у меня есть несколько пунктов: Convert: Text To List Text To List With Links Text To Table Причем, при выборе первых друх пунктов выскакивает запрос вида: "Использовать нумерованный или ненумерованный список?". Весьма удобно :) По аналогии можно сделать и конвертацию просто в ссылки, о чем ты говорил выше.
15.lusever | 26 Dec, 2007: akella, если нет: 1. Создай Команду «Wrap Each Selected Line in Open/Close Tag» и вставь туда «perl -pe 's/[\$`\]/\$&/g; s/([ \t]*)(.+)/$1<\${1:li}>$2
16.romand | 26 Dec, 2007: ви завжди користуєтусь глобальним ресетом? * { margin:0; padding:0; }
17.Vladson | 26 Dec, 2007: Хоткеи кстати самый идеальный способ ускорить работу, но я бы ещё добавил такую вещь как заготовки HTML файлов (с DOCTYPE, BODY, TITLE, и.т.д)
18.akella | 26 Dec, 2007: @romand -- да, практически во всех проектах. Вроде как есть более "обнуляющий" ресет, но я честно говоря против. Он ведь по сути преследует идею -- "сайт должен быть одинаковым везде", а я не фанат этого @lusever -- спасибо большое! =) А то я уже начал на пхп писать свой... @Vladson -- полностью поддерживаю! Я свои темплейты уже больше 2х лет использую =)
19.dp | 26 Dec, 2007: Экстези не курят, а употребляют перорально. Зачем курить LCD непонятно, как и то, как вообще курить жк-мониторы... q:
20.akella | 26 Dec, 2007: Ну имелось ввиду что не "их курят", а "они курят", но вот с LSD спалился, не профи, хорошо хоть не TFT или OLED =)) Айтишников все же больше прёт LCD чем LSD :D Спасибо!
21.0Т0 | 26 Dec, 2007: простите, ну почему "хоткей"? он же "ки" а не "кей"..."хотки" (hot key; от key [kee])!! это тоже самое, что говорить "дедуст", "бигборд" или "варчар"... а по поводу транса — то да!! очень разделяю..
22.akella | 26 Dec, 2007: Дедаст все же как то звучнее, действительно, подумал,"хотки" -- ведь так правильнее было бы, но видимо нам всем удобнее узнавать слово по его транскрипции-в-кириллицу, чем по правильному произношению. Разве вам не кажется, что хотки, совершенно чужд русскому языку, уж лучше тогда "горячая клавиша". Писать хотки, это как писать "килле" вместо киллер, не находите? Наверняка для этого есть какие-то лингвистические правила импорта слов, но я это чувствую как-то интуитивно =)
23.anycolor | 28 Dec, 2007: Два сайта за день..Никому такого не пожелаю. У меня редко получалось раньше 1 сайт в день (естественно хорошо, а не как попало), да и 2 - зачем?:) @akella Приглашаю тебя на интервью к моему блогу ;) Думаю будет взаимноинтересно.
24.akella | 28 Dec, 2007: 2 полноценных в день это уже стреляться =) Но для меня сайт это только вёрстка -- так что еще можно жить... @anycolor: С удовольствием, хотя по моему мнению, я еще не дотягиваю до тех у кого интересно брать интервью =)
25.anycolor | 29 Dec, 2007: Юра, я думаю, что как раз наоборот. В любом случае - так может сказать любой, что он не достоен - мы сделаем интересное интервью ;)
26.Андрей | 06 Jan, 2008: Спасибо, познавательно.
27.tobto | 07 Jan, 2008: Самый лучший фреймворк - в голове. Я, обычно, работаю как Роден - хватаю проверенную html-страницу и отстригаю лишнее. Периодически посматривая в FF2, IE6, IE7, Op9. За прошлый год усвоил правило - чем меньше кода, тем лучше. position:absolute - извращение. Все работает кроссбраузерно прекрасно и relative. Много времени занимают оригинальные формы с выкрутасами. А мой рекорд 17! оригинальных страниц с оригинальным дизайном, сделал с 12.00 до 20.00 без обеда. Правда припух однако )) А свой сайт лень трогать. З Різдвом!
28.Девайс | 07 Jan, 2008: прочитал пост - прямо как в зеркало посмотрел =) и правда определенные группы людей похожи друг на друга (верстальщики, программеры...)
29.Юрий | 19 Jan, 2008: Ага, «феномен ночного программиста» — великая штука. В эти моменты мне даже удается «сдать себя в аренду» по трансерфингу: над версткой работают руки и 5% мозга, а все остальное смотрит на работу со стороны и думает о чем-то другом, изредка попаливая процесс.
30.Дмитрий | 08 Feb, 2008: tobto "position:absolute - извращение Все работает кроссбраузерно прекрасно и relative. " Ну это вообще зря сказал - relative и absolute совсем разные вещи и используются по-разному и кроссплатформенность здесь непричем. Сам же я не пользуюсь никакими фреймворками, шаблон делаю с нуля всегда. Сначала HTML, что-бы правильно было с точки зрения семантики, а затем уже чисто CSS. Самое сложное это конечно первоначальная раскладка, что бы работала во всех браузерах, разрешениях и ОС. Ну и от дизайн-макета отходить нельзя, во-всех браузерах долно выглядеть одинакого, на то он и дизайн.
31.bumbu | 02 Sep, 2008: было время когда я шляпал в один день по 3-5 работ сразу, и даже было такое что работал по 30 чясов почти без перерывно, н это самоубийство во всём смысле слова... не повторяйте такого

Next: cssing 2007
Previous: Микроформаты в жизнь!