Эффективный CSS: стилизация ссылок для большинства случаев, избегая перерасходов

Question

Эффективный CSS: стилизация ссылок для большинства случаев, избегая перерасходов

Мне часто задают следующую проблему:

У меня есть разметка, которая похожа на следующее:

<body>
  <div id="wrapper">
    <div id="header"><a href="/">home</a>
    </div>
    <div id="left-column">
      <ul>
        <li><a href="/1">one</a></li>
        <li><a href="/2">two</a></li>
      </ul>
    </div>
    <div id="main-content">
      <p><a href="#">some link</a> lorem ipsum</p>
    </div>
  </div>
</body>

Вообразите это в большом масштабе, со множеством различных элементов навигации, параграфов и дополнительных вещей в целом.

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

Таким образом, чтобы стилизовать все ссылки в основном контенте с рамкой, я в итоге должен сделать:

a {border:1px solid #000;}

Но тогда как-то все мои ссылки в left-column в конечном итоге с границами. Тогда я должен пойти и переписать:

#left-column a {border:0;}

И это начало хаоса. За каждое изменение, которое вы делаете в a Вы должны пойти добавить стили сброса для всех "исключений".

Тогда я пытаюсь

#main-content a {border....}

Но это еще хуже. Зачем? Потому что id является мощным селектором и будет перезаписывать ссылки внутри # main-content, к которым обычно не должна применяться граница.

Любые предложения, чтобы сделать эффективный стиль ссылок без перезагрузки? Если CSS "Scope" еще не является модулем-кандидатом Release, какие инструменты CSS изначально предоставляет нам для решения этой проблемы? Поможет ли, например, порядок появления правил?

1

html css oocss

Источник

user458060 23 май '13 в 15:37

2 ответа

Другие вопросы по тегам html css oocss

user1288251 23 май '13 в 16:00 2013-05-23 16:00 · Answer 1 · 2013-05-23 16:00

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

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

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

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

Во-вторых, что касается ссылок на ссылки, подумайте, какие ссылки вы хотите выбрать. Вы хотите выбрать все якорные ссылки или просто якорные ссылки, найденные в тексте абзаца? В этом случае вам не нужно писать глобальный селектор типа (например, a { border: 1px solid #000; }) так как это также включает в себя другие связанные элементы.

Все ваши текстовые ссылки в параграфах, верно? Тогда выбор якорных ссылок, которые являются дочерними для абзацев, часто может оказаться достаточно: p a { border: 1px solid #000; }, Если он все еще слишком глобален, ограничьте его основной областью, используя имя класса близкого родителя в селекторе.

user1173383 23 май '13 в 15:57 2013-05-23 15:57 · Answer 2 · 2013-05-23 15:57

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

<body>
    <section class="wrapper">
        <header class="site-header"><a href="/">home</a> </header>
        <nav class="main-nav">
            <ul>
                <li><a href="/1">one</a></li>
                <li><a href="/2">two</a></li>
            </ul>
        </nav>
        <main>
            <p><a href="#" class="emphasis">some link</a> lorem ipsum</p>
        </main>
    </section>
</body>

Нужно строить свои стили снизу вверх: от базового -> к более сложному. Здесь мы видим, что стили базовых тегов содержат больше, чем просто базовые стили. Этого следует избегать. Ниже представлен прогрессивный подход, который позволяет лучше использовать Каскад в CSS.

a {color:red; font-family:coolfont,arial;}
.emphasis {border:1px solid #000;} /* or */
main a {border:1px solid #000;}