Должен ли я сначала написать HTML или CSS?

Есть много аналогий для разработки HTML / CSS; что может быть немного запутанным для начинающего.

• HTML = фонды / дом
• CSS = стены / план / обои

Есть ли здесь лучшая практика? Какой из них мы должны написать в первую очередь?

Сначала вы должны построить дом, а затем покрасить его.

HTML-документ может стоять сам по себе, даже если он выглядит скучно. Таблица стилей CSS не может; это ничего не отображается (кроме как в коде), но инструкции для отображения.

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

Сначала я всегда использую ручку и бумагу, полноразмерную бумагу, для чертежей

Это если вы не проработали свой дизайн. Если вы уверены в своем дизайне, у меня сбалансированный подход; HTML это структура, CSS клей. Продолжайте строить в (HTML, CSS) понятие «кортежи».

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

и так далее.

Во всяком случае, так я это делаю.

Многое зависит от типа веб-сайта / веб-приложения, которое вы делаете, и типа контекста, в котором оно будет использоваться.

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

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

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

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

Да, HTML должен быть написан до CSS, однако ...

Вы НЕ пишете весь HTML на странице , а затем возвращаетесь, чтобы написать CSS. Это очень затруднит четкое запоминание разделов при их построении, даже с правильным интервалом и комментариями.

Вы строите веб-сайт слоями, как если бы вы делали многослойный торт.

1-й слой - сначала вы строите базу, контейнер div, с минимальной высотой и шириной css.

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

3-й слой и далее - затем вы продолжаете добавлять во второй слой разделов.

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

Наконец, попробуйте использовать « * {outline: 1px dotted red} », чтобы получить схему всех ваших элементов, так как, когда вы добавляете их на страницу со стилем, вы можете видеть их контур и не беспокоиться о том, как он выглядит, пока Вы добавляете свои фоновые цвета. Я избегаю использования границ для этого конкретного случая использования, потому что границы добавляют пиксели к элементам, контур - это наложение.

Попробуйте, спасибо!

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

Это зависит от вашей реальной роли и основной цели развития. Если цель состоит в том, чтобы определить, что должно быть показано на каком сайте на веб-странице, следует начинать с HTML. Если целью является создание приятного и единообразного дизайна, можно начать с CSS. В обоих случаях лучше сначала начать с бумаги и карандаша, и если в настоящее время целью является разработка веб-приложения, не следует начинать с HTML или CSS. Лучше всего сначала подумать о том, что вы хотите разработать, а затем разделить задачу на цели и подцели, а не просто взламывать все вместе.

Дизайн дома (сетка) вместе с идеей того, как он будет оформлен; Построить дом (HTML) с сеткой; затем украсить его (таблица стилей CSS).

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

В конце концов, вы можете захотеть отремонтировать (переделать таблицу стилей CSS).

Вы выбрали действительно плохое обрамление для обучения и строительства.

Здесь есть две ортогональные проблемы.

1. Как мне создать сайт, который отвечает моим потребностям?
2. Как мне научиться создавать сайт?

Это две совершенно разные задачи, которые могут (и часто делают) требовать разных потенциально конфликтующих подходов.

Если вы знакомы с навыками, технологиями и требованиями проекта, начните с обсуждения потребностей сайта и пройдите упражнения по проектированию, чтобы определить, что именно должно быть реализовано. Это часто означает разметки и дизайн, которые часто не имеют ничего общего ни с HTML, ни с CSS (хотя некоторые люди делают макеты с HTML и CSS).

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

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

Итак, что это на самом деле означает в конкретных терминах? Создание сайта может быть похоже на строительство дома, когда вы разрабатываете архитектурные планы (макеты дизайна), а затем начинаете заниматься инженерной работой, чтобы рассчитать, подойдет ли ваш дом и будет ли он соответствовать вашим эстетическим потребностям. Но создание сайта может (и часто должно) выглядеть скорее как проведение серии небольших экспериментов и пошаговый подход к созданию продукта, который соответствует вашей первоначальной концепции.

С практической точки зрения, почти каждый одновременно работает и со своим HTML, и со своим CSS.

Это общая проблема в любом проекте разработки программного обеспечения imho, и поэтому вы могли бы извлечь выгоду из использования любой из концепций, таких как быстрое прототипирование, DSDM. Комбинируется с любым стилем, например, Agile (экстремальное программирование или Feature Driven Design (мой любимый)). Придерживайтесь общих принципов, которые вы решаете в начале, когда сталкиваетесь с ними, и держитесь за них (ПОЦЕЛУЙ, ЯГНИ).

Так что для меня это: - сначала создайте базовый функциональный «прототип», охватывающий один функциональный блок спроса. Ограничьте себя погружением в «это может быть хорошо» / «мне может понадобиться использовать это позже», если они не ЯВНЫ. Скажите себе, вам это не понадобится! (YAGNI). - Запишите решения, которые вы принимаете как «соглашение о кодировании», и придерживайтесь их, например, тегов php: я использую короткие, потому что для моего сценария аргумент .. применяется, а ... нет. - добавить базовый стиль, но ограничить себя снова.

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

Обведите свой путь к более зрелому и конечному продукту.

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

Только мои 50ct

Как вы сравниваете веб-страницу с домом:

HTML = фонды / дом CSS = стены / проект / обои

Как ты собираешься парить стены в воздухе, пока не построишь фундамент, на котором они сидят? Как вы можете написать CSS для стилизации своей страницы, пока у вас не будут написаны теги HTML, к которым вы применяете стили.

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