Есть ли парадигма веб-макета, которая делает CSS немного менее ... непредсказуемым? - PullRequest
Новая
       11

Есть ли парадигма веб-макета, которая делает CSS немного менее ... непредсказуемым?

4 голосов
/ 16 января 2010

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

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

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

Поэтому я спрашиваю вас: есть ли парадигма, пошаговое руководство или что-нибудь, что могло бы помочь мне почувствовать, что я делаю это правильно?

Ответы [ 5 ]

4 голосов
/ 16 января 2010

Использование Объектно-ориентированный CSS . Их подход действительно методичен; страницы имеет смысл, просто взглянув на разметку. Компонент макета особенно хорош.

Например: 

 <div class="line">
  <div class="unit size1of2">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="unit size1of2 lastUnit">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
 </div>
</div>

Разве приведенная выше разметка не имеет смысла? Вы можете найти больше образцов сетки здесь .

Кроме того, вы, вероятно, должны знать, что OOCSS создан на основе таблицы стилей CSS Reset и шрифтов из библиотеки YUI. Хотя в OCSSS не определены реальные «стили», он предоставляет отличную основу для того, чтобы сделать ваш CSS более предсказуемым и непротиворечивым.

2 голосов
/ 16 января 2010

Изучите использование таблицы стилей сброса CSS, например Eric Meyer . С этой отправной точкой все 1) начинает приобретать немного больше смысла и 2) не имеет столько кросс-браузерных проблем.

1 голос
/ 16 января 2010

Вы ищете CSS-фреймворк (и CSS-сброс, который обычно доступен поблизости - см. Yahoo или Эрик Майер). Yahoo делает отличную игру под названием Grids . Это личный фаворит, и я часто его использую. Другие популярные варианты - 960 Grid System и Blueprint .

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

1 голос
/ 16 января 2010

Звучит просто, но это один из лучших советов, которые я когда-либо читал:

Список отдельно: Статьи: Исправьте свой сайт с правильным DOCTYPE!

0 голосов
/ 22 января 2010

Использование CSS-фреймворка - хорошее начало. Blueprint и YUI являются хорошими и адаптируемыми. Объектно-ориентированный CSS тоже интересен, но всегда казался мне лучшей презентацией и теорией, чем реальной отправной точкой. Я все еще предпочитаю использовать фреймворк CSS.

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

...