CSS - эффективное использование классов

Question

Я написал класс для текстового поля с определенным стилем. Поле появляется в 2 очень разных местах на веб-сайте с разными родительскими элементами. Второй нужен другой край. Что такое эффективный способ изменить исходную маржу, поскольку я не могу использовать псевдоклассы?

js fiddle

HTML

<div class="some_parent"> 
    <div class="my_styled_field"></div> 
</div> 
..... 

<div class="some_other_parent"> 
    <div class="my_styled_field"></div> 
</div> 

CSS

.my_styled_field{ 
    margin-top: 2rem; 

} 

Answer 1

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

Если добавить еще один класс вашего второго styled_field, вам нужно будет только 1 оплавления, чтобы добраться до него:

.newclass{margin-top:5px;} 

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

.parent .styled_field 

Если вы не хотите, чтобы добавить класс по какой-то причине, более высокую производительность, чем потомка селектор будет селектор ребенка:

.parent > .styled_field 

Если вы думаете о производительности css, помните, что, хотя мы читаем слева направо, браузеры читают справа налево.

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

Answer 2

.some_other_parent .my_styled_field{ 
margin-top:3em; //what ever you want 
} 

это способ применить некоторые другие стили к тому же классу, имеющих разные родители.

Answer 3

Youc может это сделать:

FIDDLE EXAMPLE

.some_parent .my_styled_field{ 
    width: 3rem; 
    height: 3rem; 
    margin-top: 2rem; 
    background-color: red; 
} 
.some_other_parent .my_styled_field{ 
    width: 4rem; 
    height: 4rem; 
    margin-top: 4rem; 
    background-color: green; 
} 

Таким образом, вы APLY стиль .my_styled_field в зависимости от его родительского элемента.

Answer 4

Использование класса CSS иерархии:

.some_other_parent .my_styled_field { 
    margin-top: 2em; 
}