Повторное использование класса, слегка изменив его, не копируя класс и не переименовывая его - PullRequest
Новая
       10

Повторное использование класса, слегка изменив его, не копируя класс и не переименовывая его

0 голосов
/ 14 марта 2012

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

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

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

Например, я создаю правило "h1", "h2", "p", которое практически одинаково по всем направлениям. Если мне нужно изменить его, я просто создаю класс или использую тег span, когда мне нужно измените эти теги для определенных частей дизайна, не знаю, является ли это лучшим способом справиться с этим, но я пытался справиться с этим.

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

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

Страница под названием: Продукты и цены - 

    <div id="primaryContent_pp">
         <h1 id="introHeader">Products & Pricing</h1>
         <p id="introText">...generic text...</p>   
             <img id="serversImg" alt="..."></img>      
    </div><!---end primaryContent_pp--->

Страница называется: Поддержка - 

    <div id="primaryContent_support">
             <h1 id="introHeader">Support</h1>
             <p id="introText">...generic text..</p> 
             <img id="supportImg" alt="..."></img>     

    </div><!---end primaryContent_support--->

Страница называется: Контакт - 

    <div id="primaryContent_contact">
             <h1 id="introHeader">Contact Us</h1>
             <p id="introText">...generic text...</p> 
             <img id="contactImg" alt="..."></img>     

    </div><!---end primaryContent_contact--->

Итак, вы видите, что я здесь делаю?

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

Вы также можете заметить, что я не изменил ни (h1 id = "introHeader"), ни (p id = "introText"), потому что я верю, что кто-то здесь может показать мне свет, как не ходить необходимость создания нового правила "h1" или "p" для каждой страницы на случай, если я захочу изменить это деление ширины, высоты, отступов, полей, поплавка и т. д.

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

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

Имеет ли это смысл? Извините за многословное объяснение, и спасибо, что уделили мне время.

Ответы [ 3 ]

2 голосов
/ 14 марта 2012

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

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

Поэтому я бы сделал это следующим образом.

  1. Создайтеуниверсальный регистр
  2. Добавьте дополнительные классы, которые (заимствуя из синтаксиса OOCSS) расширяют ваш универсальный регистр

универсальная разметка: 

<div class="content">
     <h1 class="content-header">Content header</h1>
     <p class="content-text">...generic text...</p>   
     <img id="serversImg" alt="..."></img>      
</div>

Extendedразметка, со скриптами-хуками и дополнительными возможностями стилизации: 

<div id="primaryContent_contact" class="content content-contact">
     <h1 class="content-header">Contact Us</h1>
     <p class="content-text">...generic text...</p> 
     <img id="contactImg" alt="..."></img>     
</div>

CSS: 

.content {
  padding: 10px;
}

.content-header {
  font-size: 16px;
  font-weight: bold;
}

.content-text {
  font-size: 12px;
  font-weight: normal;
}

.content-contact .content-header {
  color: red;
  padding: 0 10px;
}
2 голосов
/ 14 марта 2012

  1. Пометьте тег HTML семантически, например:
    Продукты: <body id="products"> ... </body>
    Поддержка: <body id="support"> ... </body>

  2. Внесите одноразовые изменения какнеобходим в вашем CSS 

    #introHeader                { /* common styles */ }
body#products #introHeader  { /* page-specific tweaks */ }
body#support  #introHeader  { /* page-specific tweaks */ }

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

1 голос
/ 14 марта 2012

Вы можете создать class, который вы примените ко всем трем элементам div. Затем дайте каждому отдельному div уникальный id. Вы должны применить стили, одинаковые для каждого div, к class, а стили, которые являются отдельными для каждого div, к ids. Смотри ниже. 

<div class="primaryContent" id="pp">
     <h1>Products & Pricing</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#pp--->

<div class="primaryContent" id="support">
     <h1>Support</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#support--->

<div class="primaryContent" id="contact">
     <h1>Support</h1>
     <p>...generic text...</p>   
     <img src="..." alt="..."></img>      
</div><!---end .primaryContent#contact--->

Ваш CSS будет выглядеть так: 

.primaryContent{
    ...rules that are the same for all divs goes here...
}
#pp{
    ...rules for first div goes here...
}
#support{
    ...rules for second div goes here...
}
#contact{
    ...rules for third div goes here...
}

Вы можете настроить таргетинг на элементы внутри, как: 

.primaryContent h1{
    ...rulles for all primaryContent h1s goes here...
}

Вы должны указать каждый внутренний элемент, имеющий те же правила, просто отключив тег h1. .primaryContent p будет предназначаться для всех p элементов внутри любого элемента с классом .primaryContent. Чтобы указать отдельный внутренний элемент переключателя .primaryContent с помощью id, который вы хотите указать. #contact h1 будет нацелен на тег h1 внутри элемента с идентификатором #contact.

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

Надеюсь, это поможет! Мы все где-то начали, и задавать вопросы - единственный способ учиться!

Опубликуйте свой CSS, если вам нужна дополнительная помощь.

...