Те же теги на теге тела для большей специфики css

Я не хочу использовать! Важно или писать новое правило для каждого случая, который может обрабатывать вспомогательные классы. Например, я хочу это сделать;Те же теги на теге тела для большей специфики css

HTML

<body id="sameId"> 
    <div class="wrapper"> 
     <div class="article text-center text-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 

     <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
    </div> 
</body>

CSS

/* Helper Classes */ 
#sameId .text-center { 
    text-align:center; 
} 

#sameId .text-bold { 
    font-weight: bold; 
} 


/* Article Styles */ 
.wrapper .article { 
    padding: 10px; 
    margin-bottom: 20px; 
    border: 1px solid #ddd; 
    text-align:left; 
    font-weight: normal; 
}

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

https://jsbin.com/tamaxetuse/1/edit?html,css,output

источник

2015-10-27 midstack

Есть причина, почему вы явно установить 'текстовый align' и' шрифта weight' в '.wrapper .article'? Если они не будут перезаписаны другим правилом ранее в вашем CSS, вы можете просто [пропустить их] (http://jsfiddle.net/8uedncgm/). – insertusernamehere

Если вы используете вспомогательные классы, как, что вы можете точно также использовать !important в них или написать стиль непосредственно в HTML-тег. Они просто заменяют встроенные стили, поэтому вы не отделили контент от стиля.

Правила CSS должны предпочтительно отражать то, что вы хотите передать, а не точный вид. Пример:

<body> 
    <div class="wrapper"> 
     <div class="article first-article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
    </div> 
</body>

CSS:

/* Article Styles */ 
.wrapper .article { 
    padding: 5px; 
    border: 1px solid #ddd; 
    text-align:left; 
    font-weight: normal; 
} 

.wrapper .article.first-article { 
    text-align:center; 
    font-weight: bold; 
}

источник

2015-10-27 09:11:51 Guffa

@insertusernamehere: Вы думаете о конкретном случае, когда первый элемент в списке имеет разные стили. но пример должен был показать, как назвать правила, основанные на аспектах информации, а не на визуальном появлении. – Guffa

Те же теги на теге тела для большей специфики css

ответ

Смежные вопросы