Что должно быть написано в первую очередь, XHTML или CSS? - PullRequest
5 голосов
/ 27 февраля 2010

Что должно быть написано первым при создании макетов CSS XHTML-кода или CSS-кода?

  1. Сначала напишите весь HTML, затем напишите CSS согласно HTML
  2. Напишите HTML для элемента дизайна и CSS одновременно
  3. Сначала напишите весь CSS, затем напишите HTML в соответствии с HTML

Я прочитал статью 7 «Сначала создай свой HTML» лучше ли следовать этому совету?

Edit:

и в этом уроке автор также пишет HTML. Сначала пишите CSS, используя опцию Edit CSS панели инструментов веб-разработчика Я думаю, что это лучший способ.

Ответы [ 15 ]

17 голосов
/ 27 февраля 2010

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

4 голосов
/ 27 февраля 2010

Раньше я размышлял об этом при разработке веб-сайтов.

Мой вывод был, и я считаю, что он остается в силе и сегодня, что, хотя XHTML и CSS должны быть изолированы друг от друга как контент и презентация соответственно, реальность этого вопроса все еще делает внешний вид веб-сайта в значительной степени зависимым. на структуру документа - т.е. разметку, XHTML - и, следовательно, один только CSS не даст вам волшебную палочку, которая заставит ваш сайт полностью изменить свой внешний вид на основе таблицы стилей. Однако мне бы хотелось, чтобы это было так - конечно, это главная цель CSS. И, конечно, в этом была бы прелесть - поскольку каждый из них полностью изолирован от другого, разработчики веб-сайта могут в спокойной обстановке программировать структуру документов веб-сайта, в то время как авторы CSS могут работать параллельно и писать таблицы стилей. Затем оба комбинируются, и с осознанием того, что разметку больше не нужно менять. Это теория в любом случае.

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

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

Откуда это XML? Что ж, вы преобразуете (либо в браузере, либо на стороне сервера) его с помощью XSLT в документ XHTML, который вы считаете уместным в процессе оформления. То есть если у вас есть список исполнителей из 1000 записей, и вы хотите настроить внешний вид страницы, вы используете следующий контент XML:

<artists>
    <artist name="Moby" />
    <artist name="Cocorosie" />
    <!-- and so on -->
</artists>

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

<xsl:transform>
    <!-- XSLT is beyond the scope of this... -->
</xsl:transform>

преобразует XML в нечто вроде:

<h1>Artists</h1>
<h2>Page 1 of 10</h1>
<ul>
    <li><a>Moby</a></li>
    <!-- Only 100 artists per page -->
</ul>

А потом ты его стилизируешь.

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

Многое из того, что XSLT делает с XML, вместо этого может быть сделано с помощью JavaScript на XHTML, но я считаю, что сценарии на стороне клиента являются дополнением, а не заменой таких вещей, как XSLT. С другой стороны, Firefox и большинство других современных браузеров могут выполнять XSLT на стороне клиента, что стирает различие между сценариями и обслуживанием документов.

2 голосов
/ 28 февраля 2010

Я думаю, что это ошибка - делать одно раньше другого. Программирование - это итеративный процесс. Напишите им обоим, пока у вас не появится что-то маленькое, что работает, а затем сделайте это снова. Построй на нем. Итерации.

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

1 голос
/ 20 июня 2010

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

Несколько советов.

  1. повторно использовать уже созданные CSS и HTML. то есть. если у вас уже есть шаблон с основными обертками HTML сохраните его для следующего проекта или страницы или если вы установите все изображения на границы: нет в вашем CSS вы можете легко сохранить файл CSS с основные настройки
  2. вижу предмет в вашей голове раньше проектирование
  3. регистрация в 5 основных браузерах (т.е. 6 и 7) ie8 хром и firefox)
0 голосов
/ 28 февраля 2010

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

Из-за этого HTML и CSS должны использоваться параллельно при создании веб-страниц и отдельных элементов.

0 голосов
/ 27 февраля 2010

Я пишу их одновременно, итеративно, в модулях.

Я создам общий шаблон (или базовый шаблон) в формате html / css, проведу полный кросс-браузерный тест, а затем перейду к дополнительным шаблонам.

Это хорошо вписывается в .net, где я использую мастер-страницы и вложенные мастер-страницы.

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

0 голосов
/ 27 февраля 2010

Мои 3 цента:

Какова цель веб-страницы? В большинстве случаев эта цель тесно связана с ее содержанием.

Таким образом, первое - это содержание. HTML дает контенту семантику. CSS дает семантику контекст.

Итак, заказ:

  1. содержание
  2. HTML
  3. CSS

Но, конечно, это итеративный процесс.

0 голосов
/ 27 февраля 2010

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

Как только у меня появятся основные стили, HTML - это просто вопрос ...

<wrapper>
<div header>
<div this>
<div that>
<form>
<div footer>

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

0 голосов
/ 27 февраля 2010

Создавая сначала HTML, вы можете гарантировать, как будет выглядеть страница в самых простых браузерах - она ​​будет читаемой на старом телефоне, все в логическом порядке, и вы не заставляете программы чтения с экрана повторять свои Навигация по сайту первым делом на каждой странице. Это дизайн № 1.

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

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

См. Также: Прогрессивное улучшение .

0 голосов
/ 27 февраля 2010

Извините, я никого из них не выбираю ..

Во-первых, вы не можете написать весь CSS для своей страницы. хотя лучше писать в классах first.ie общие классы CSS и макеты страниц, после создания макета страницы вы просто создаете страницу с использованием тегов table или div. после, добавляя элементы управления на страницы, вы просто указываете общие стили, которые вы используете. Эти стили вы можете использовать как классы CSS. или отдельный идентификатор. Я следую этому методу для моего проектирования.

Я думаю, что лучше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...