Как проектировать в чистом CSS, похожем на большие сайты

Question

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

Answer 1

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

Однако, прежде чем заглянуть в рамки, необходимо разобраться в некоторых основах. W3Schools - хорошее место для начала, за которым следует несколько хороших блогов о дизайне, таких как A List Apart .

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

Answer 2

Я собирался рекомендовать то же самое .. вот два, которые мне нравятся и кажутся наиболее популярными / поддерживаемыми

http://www.blueprintcss.org/

http://960.gs/

Answer 3

На самом деле секретного профессионального соуса для создания макетов в чистом CSS не существует. Существует МНОГИЕ способы размещения сайта в CSS, и все, что на самом деле требуется, это глубокое понимание технологии.

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

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

Ссылка на SitePoint CSS: Основные понятия - Вероятно, наиболее полное объяснение того, как работает CSS, в удобном для чтения руководстве

W3 CSS 2.1 Spec - Трудно читать, но это действительно объясняет, как все работает

Answer 4

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

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

Answer 5

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

Поскольку вы упомянули Yahoo, я рекомендую их YUI Grids CSS для макета.

Я предпочитаю blueprintcss , потому что он имеет сброс стилей для стилей браузера по умолчанию и также имеет таблицу стилей для печати.

Answer 6

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

вот хороший: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 7

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

Что касается , какие CSS-фреймворки использовать, я сам ничего не могу порекомендовать.

Answer 8

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

Обращайте внимание на такие вещи, как сопоставление с шаблоном селектора - это будет иметь большое значение для упрощения разметки.

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

Очень полезный ресурс: http://csswizardry.com/web-design+/