Существуют ли какие-либо стандарты CSS, которым я должен следовать при написании моей первой таблицы стилей?

Question

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

Буду признателен за любые ссылки или советы из первых рук.

Answer 1

Ошибка, которую часто делают новички:

CSS также является семантическим. Попробуйте выразить понятия, а не форматы. Придуманный пример:

Неправильно:

div.red
{
    color: red;
}

вместо:

Хорошо:

div.error
{
    color: red;
}

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

Answer 2

Помимо огромных ресурсов, указанных в других ответах, вот несколько советов по структурированию вашей работы с CSS:

Выполняйте работу в следующем порядке ...

1. Выложите семантическую структуру вашей страницы в HTML. Убедитесь, что это правильно без каких-либо CSS.
   • Создание основного макета страницы в CSS - столбцы, заголовки, плавающие блоки.
   • Добавить типографику - шрифты, размеры и цвета.
   • Добавить графические элементы - фоновые рисунки, логотипы и т. Д.

Поместите ссылку на свою страницу в W3C CSS-валидатор (если ваш сайт виден из Интернета) и продолжайте нажимать на него время от времени.

Держите все свои стили вне HTML.

Хорошо иметь IE6 / 7/8, FF2 / 3 и Chrome / Safari. Опера тоже подойдет. Продолжайте менять браузер, в котором вы открываете страницу во время работы (если только вы не копаетесь в конкретной проблеме браузера: -)).

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

Обновление : Как упоминал Бобби Джек, я не упомянул инструменты отладки. Вы можете использовать Панель инструментов разработчика IE (для IE) или Firebug (для FF) или встроенные инструменты проверки в Chrome, чтобы проверить, какие правила применяются к конкретному элементу, или изменить стиль элемент на лету.

Answer 3

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

<ul id="nav">
   <li class="navItem"><span class="itemText">Nav Item</span></li>
   <li class="navItem"><span class="itemText">Nav Item</span></li>
</ul>

#nav { }
#nav .navItem { }
#nav .itemText { }

Это излишне сложно, и у вас быстро заканчиваются хорошие семантические описания. Вам было бы лучше с чем-то вроде:

<ul id="nav">
  <li><span>Nav Item</span></li>
  <li><span>Nav Item</span></li>
</ul>

#nav {}
#nav li {}
#nav li span {}

Answer 4

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

Краткое (неполное) краткое изложение:

Правило для всего элемента (например, p {color:green;}) будет превзойдено:
Правило класса (например, p.sidenote {color: blue;}), которое будет перевешиваться:
Правило, специфичное для идентификатора (например, p#final {color: red;}), которое будет иметь значение:
Встроенная декларация (например, <p style="color: orange;">), которая будет перевешиваться:
Важное правило (например, p#final {color: inherit !important;})

... все это можно превзойти по правилам пользователя.

Взаимодействия могут быть сложными, но под ними лежат математические правила. Более подробное описание см. В главе 3 «CSS: исчерпывающее руководство» Эрика Мейера.

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

Answer 5

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

Используйте Firefox с расширением Firebug. Если у вас нет Firefox, я рекомендую вам установить его, даже если это только для этого. Firebug позволяет вам выбрать элемент со страницы и показывает вам примененный CSS. Затем вы можете отредактировать этот CSS с помощью пожарной ошибки без перезагрузки страницы. Если вы довольны стилем, вы можете легко скопировать определения из firbug в ваш редактор CSS.

По крайней мере для меня Firebug является абсолютной необходимостью при работе со стилями.

Пара советов для самого css. При определении ваших стилей используйте id только тогда, когда рассматриваемый элемент уникален. Таким образом, ваши стили можно использовать повторно. Используйте иерархические определения, например. #header .navigationElement a{color:red;} и #footer .navigationElement a{color:black;} Таким образом вы можете перемещать свой HTML-код, и правильный стиль применяется автоматически.

Answer 6

Мой первый совет - всегда использовать только внешние таблицы стилей - старайтесь избегать встроенных стилей или стилей заголовков.

Максимально используйте классы и идентификаторы.

Второе предложение для A List Apart

Хотя это и не очень красиво, а иногда немного устарело, Справка HTML от WDG содержит несколько хороших ссылок.

Quirksmode.org имеет великолепную таблицу совместимости css.

Answer 7

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

Еще одна вещь, которую я бы порекомендовал, - это использовать FireFox для всех основных разработок, заставить свой сайт работать и смотреть, как вы этого хотите в FF. Затем запустите IE и исправьте все проблемы, которые есть у IE. В результате вы получите намного более чистый сайт и намного более чистый CSS.

Answer 8

Не совсем материал для начинающих, но A List Apart - очень интересный блог о CSS и его тонкостях.

Я считаю страницы школы W3 на CSS отличными для справки.

Answer 9

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

Я бы настоятельно рекомендовал использовать таблицу стилей reset.css :

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

Либо скопируйте и вставьте, либо просто сохраните тот, на который я ссылался.

Кроме того, ошибка, которую я использовал в ранние годы, была из-за использования <div id="">, приписанного <div class="">. Идентификатор id = "" должен использоваться только один раз (никогда не иметь двух <div id="content">), тогда как вы можете иметь тысячи class = "" (например, <div class="box">).

И, кроме того, наличие более одного идентификатора с одинаковым именем недопустимо html

Answer 10

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

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