Процесс веб-дизайна с помощью CSS - во время или после?

Question

Какая практика лучше?

При добавлении CSS во время веб-проектирования вы можете увидеть результат (или закрыть) как можно раньше и внести необходимые изменения. Вы также знаете, сколько дивов или промежутков вам может понадобиться (например, для создания изогнутого кросс-браузерного фона при наведении курсора). Но по мере того, как вы добавляете все больше и больше компонентов на страницу, иногда все становится хакерским, так как вам нужно патчить тут и там, чтобы получить точный требуемый дизайн.

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

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

Спасибо.

Answer 1

Я немного сбит с толку тем, под каким углом вы задаете вопрос такого рода.

Как правило, фактический дизайн выполняется на бумаге или в таком приложении, как Photoshop или Illustrator.Процесс превращения этого дизайна в HTML / CSS происходит позже.Определите ваши основные области контента и разместите их как div на странице.Получите некоторый базовый CSS для работы базовой структуры.Затем начните добавлять div-оболочки и другие элементы страницы по мере необходимости, чтобы HTML-версия выглядела как бумажный дизайн.

(Определенно, не все дизайнеры следуют этому процессу - например, ваш типичный рисунок (не веб)дизайнер собирается добавить фрагменты и выполнить «экспорт в HTML» из фотошопа, который сгенерирует ужасный необслуживаемый HTML).

Приятно то, что если вы работаете под другим углом зрения как разработчик, вы можете просто выполнить минимальный HTML-код - определить основные области контента (такие как основной текст, некоторая навигация,поле, показывающее, кто вошел в систему и т. д.) и делающее эти div-ы.Затем, когда дизайн добавлен, нужно добавить правильный CSS и добавить дополнительные элементы по мере необходимости в HTML.

Вы говорите так, как будто вы делаете творческий процесс проектирования с HTML.Честно говоря, это неправильный путь.Карандаш и бумага идут длинным путем.Кроме того, если вы разработчик, найдите дизайнера.В самом деле.Есть очень мало людей, которые могут сделать оба.Я знаю многих разработчиков, которые ДУМАЮ, что они могут проектировать, потому что они знают, как писать HTML и использовать Photoshop - но на самом деле они не могут.

Answer 2

Я всегда предпочитал каркасный подход. Вы начинаете свой сайт с разметки базового каркаса, вы можете использовать CSS здесь, чтобы получить наброски ваших столбцов или разделов контента. После этого вы переходите к заполнению функции / данных / контента сайта. Вы убедитесь, что у вас есть необходимая разметка, чтобы соответствовать вашему контенту. Как только у вас есть контент, который вам нужен, вы можете применить к нему свою тему.

Этот вид вперед и назад дает вам хороший холст для работы. Вы можете увидеть некоторые из основных строительных блоков, но не застряли в определенной структуре. Применение CSS в конце должно работать с разметкой и быть менее «хакерским», как вы выразились.

Answer 3

Я думаю, что большая проблема со вторым подходом заключается в том, что вы серьезно напугали бы «бизнес» каждой демоверсией!

Даже если функциональность есть, и вы говорите им, что стиль будет добавлен позже, они могут потерять уверенность.

Только по этому вопросу я думаю, что с самого начала требуется определенный уровень CSS.

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

Answer 4

Что я делаю, так это начинаю добавлять CSS к концу процесса структурирования, в основном для макета. Такими стилями будут поля, отступы или иногда размер шрифта. Когда структура закончена, можно сделать прогрессивное улучшение для полировки дизайна.