CSS-схема "как"

Question

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

Answer 1

Я большой поклонник именования своих классов CSS по их содержимому или типам содержимого, например,

• Лучше всего используйте каскады и не переусердствуйте. Если вы дадите
  • s и их дочерним элементам, не добавляя никаких дополнительных назначений класса. ul.textNav li a: hover {}

  • Не бойтесь использовать несколько классов на одном объекте. Это совершенно правильно и очень полезно. Затем у вас есть контроль над CSS для групп объектов из более чем одной оси. Кроме того, присвоение объекту идентификатора добавляет еще одну ось. Например:

    <style>
    div.box {
    float: left;
    border: 1px solid blue;
    padding: 1em;
    }
    
    div.wide {
    width: 15em; 
    }
    
    div.narrow {
    width: 8em; 
    }
    
    div#oddOneOut {
    float: right;
    }
    </style>
    
    <div class="box wide">a wide box</div>
    <div class="box narrow">a narrow box</div>
    <div class="box wide" id="oddOneOut">an odd box</div>
    

  • Предоставление класса вашему документу тег (или ID, поскольку их должен быть только один ...) обеспечивает некоторые изящные переопределения для отдельных страниц, например подсвечивание пункта меню для страницы, на которой вы находитесь или избавиться от этой избыточной второй формы входа на странице входа, все с использованием только CSS. "body.signIn div # mainMenu form.signIn {display: none;}"

Answer 2

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

• Разделите ваш CSS на несколько файлов. Например: один файл для макета, один для текста, один для стилей сброса и т. Д.
• Прокомментируйте свой код CSS.
• Почему бы не добавить оглавление?
• Попробуйте использовать CSS-фреймворк, например 960.gs , чтобы начать работу.

Все зависит от личного вкуса. Но вот несколько ссылок, которые могут оказаться полезными:

• http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
• http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
• http://www.louddog.com/bloggity/2008/03/css-best-practices.php
• http://natbat.net/2008/Sep/28/css-systems/

Answer 3

Думайте о CSS как о создании «инструментария», на который может ссылаться HTML. Следующие правила помогут:

• Сделать class имена однозначными. В большинстве случаев это означает, что их префикс должен быть предсказуемым. Например, вместо left используйте что-то вроде header_links_object2_left.

• Используйте id вместо class only , если вы знаете, что только когда-либо будет одним из объектов на странице. Опять же, сделайте id однозначным.

• Учитывайте побочные эффекты. Правила типа margin и padding, float и clear и т. Д. Могут иметь неожиданные последствия для других элементов.

• Если ваша таблица стилей будет использоваться моими несколькими HTML-кодерами, подумайте над тем, чтобы написать им небольшое, четкое руководство о том, как писать HTML, чтобы соответствовать вашей схеме. Сохраняйте это простым, иначе вы их утомите.

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

Answer 4

Лучший организационный совет, который я когда-либо получал, был получен из презентации в An Event Apart.

Предполагая, что вы храните все в одной таблице стилей, в основном это пять частей:

1. Сброс правил (может быть так же просто, как * {margin: 0; padding: 0} правило, Сброс Эрика Мейера, или YUI сброс)
2. Базовый элемент стайлинга; этот это что-то вроде базовой типографии для абзацев, интервал для списков, и т.д.
3. Универсальные классы; эта секция для меня вообще содержит вещи как .error, .left (мне всего 80% семантический) и т. д.
4. Универсальный макет / идентификаторы; #content, #header, или что бы вы ни вырезали свою страницу в.
5. Правила для конкретной страницы; если ты необходимо изменить существующий стиль только на одну или несколько страниц, вставьте высокий идентификатор (тег body обычно хорошо) и бросай переопределяет в конце документа

Я не рекомендую использовать CSS-фреймворк, если вам не нужно макетировать что-то в HTML fast . Они слишком раздуты, и я никогда не встречал того, чья семантика имела для меня смысл; гораздо лучше практиковать создание своей собственной "структуры", когда вы выясняете, какой код используется вашими проектами с течением времени.

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

Answer 5

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

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

Answer 6

Еще несколько советов по поддержанию организованности:

• В каждом объявлении принимайте порядок атрибутов, к которым вы привязаны. Например, я обычно перечисляю поля, отступы, высоту, ширину, границу, шрифты, отображение / плавающее / другое в таком порядке, что облегчает чтение в следующем совете
• Напишите свой CSS, как любой другой код: отступ! Легко отсканировать файл CSS на наличие элементов высокого уровня, а затем выполнить детализацию, а не просто переходить к исходному порядку вашего HTML.
• Семантический HTML с хорошими именами классов может помочь с запоминанием того, какие стили применяются к каким элементам.

Answer 7

Есть два мира:

1. The human editor perspective: Там, где CSS легче всего понять, когда он имеет четкую структуру, хорошее форматирование, подробные имена, структурированные в макет, цвет и набор текста ...
2. The consumer perspective: Посетитель будет очень рад, если ваш сайт быстро загружается, если он отлично выглядит в своем браузере, поэтому CSS должен быть небольшим, в одном файле (для сохранения дальнейших соединений) и содержать CSS-хаки для поддержки всех браузеров .

Я рекомендую начать с CSS-фреймворка :

• План если вам нравятся мелкие вещи
• или YAML для большого и функционального

Существует также список CSS Frameworks ...

А затем приведите его в форму (для браузера) с помощью CSS Optimizer (т. Е. CSS Form. & Opti. )

Вы можете измерить результаты (не оптимизированные <-> оптимизированные) с помощью YSlow .

Answer 8

линия выхода из года: это зависит.

Сколько вам нужно стайлинга? Вам нужно изменить аспекты почти каждого элемента, или это всего лишь несколько?

Мое любимое место для получения такой информации: CSS Zen Garden & A List Apart .