CSS организация с идентификаторами и классами

Question

Какой способ организации CSS сайта вы считаете лучшим?

Я хотел, чтобы за идентификаторами следовали занятия. Однако они не являются эксклюзивными.

Пример:

h4 {
    padding: 5px 5px 5px 10px;  
    font-size: 110%;
    font-weight: bold;
    color: #000000;
    font-family: Arial,  Helvetica, sans-serif;
    margin: 0px 0px 5px 0px;
    background:transparent url(/images/example2.jpg) no-repeat scroll left top;
    text-transform: uppercase;
}
#rightcol {
    padding: 0px;
    width: 306px;
    overflow: hidden;
    float: left;
    margin: 0;
    border: 0;
}
#rightcol .container {
    margin: 5px 6px 0 0;
    padding: 5px 5px 0 5px;
    background: #FFFFFF;
}
#box_info {
   border: 1px solid #AAAAAA;
   background: #4F4F4F;
   line-height: normal;
   background: #4F4F4F url("../images/example.gif") repeat-x top left;
}
#box_info.container {
    margin: 10px 5px 10px 10px;
    background: transparent;
    padding: 0;
}

Если внутри правой навигационной панели id есть информационный блок идентификаторов, вместо контейнера инфобокса будут правильные навигационные элементы!

<div id="rightnav">
    <div class="advert">
      This needs to be here as sometimes I need it without borders margins etc.
    </div>
    <div class="container">
        <div id="otherbox">
            <div class="container">
            </div>
        </div>
        <div id="info_box">
            <h4>Related Info</h4>
            <div class="container">
                <span>Info in here</span>
            </div>
        </div>
        <div id="yetanotherbox">
            <div class="container">
            </div>
        </div>
    </div>
</div>

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

Приветствия заранее.

edit: Просто чтобы вы знали, мне нравится помещать контейнеры по простой причине ширины. Я хочу 100% ширину, но я также хочу сделать отступ для своих контейнеров. Я нахожу добавление отступов в поле и добавление полей в контейнеры, я получаю то, что хочу. Если вы можете сказать мне, как сделать это с помощью всего одного div, тогда продолжайте, хотя я просто хочу лучше организовать CSS, а не html (поскольку я считаю, что делаю это как можно лучше, но сделайте попытку доказать я не прав :)). Спасибо:)

Answer 1

Я думаю, что у Натали Даун правильный подход к организации CSS, о чем она рассказывает в своей презентации CSS Systems здесь:

http://natbat.net/2008/Sep/28/css-systems/

Идея состоит в том, что вы переходите от более общего к более конкретному в нескольких частях:

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

Answer 2

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

Например, следующее:

 #container
    {
        width: 600px;
        margin: auto;
    }
    #left
    {
        width: 250px;
        float: left;
    }
    #left p
    {
        color: Blue;
    }
    #left .information p
    {
        font: normal .83em sans-serif;
        color: #000000;
    }
    #right
    {
        width: 250px;
        float: right;
    }
    #right ul
    {
        font: normal .83em sans-serif;
        list-style: none;
    }

покажет это:

альтернативный текст http://img188.imageshack.us/img188/1576/croppercapture5e.jpg

Как видите, для самой страницы нет шрифта. Но, углубившись в уровни каскада стилей, вы обнаружите, что у парагафов определен стиль, а с классом .information у вас есть синий цвет, определенный в абзаце. Подумав о том, какие стили нужны, когда вы глубже погрузитесь в свой HTML, вы увидите, что на самом деле у вас меньше HTML и лучше организованные таблицы стилей.

Удачи и надеюсь, что это поможет.

Answer 3

В вашем случае, когда вы хотите применить стили #infobox .container, вы должны переопределить #rightnav .container правилом "! Important". Если вы не хотите конфликта между именами, просто измените, например, #rightnav .container в #rightnav .mainContainer. Надеюсь, я написал что-то не столь очевидное.

Answer 4

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

Answer 5

Для таргетинга на субконтейнеры вы можете сделать #rightnav .container .container Я думаю.