Существует ли порядок присвоения css?

Question

[vasIvas]

Есть html .container>.rect и есть под него стили

.container
    ...
.rect
    ...

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

.container .rect{...}
.container
    ...
.rect
    ...

И даже так все работало пока я не решил переписать с вложенностью классов, так -

.container
    ...
    .rect
        ...

И в конечном результате получилось так -

.container .rect{...}
.container .rect{...}

И с этого момента верстка слетела. И от сюда вопрос - есть ли поряд выполнени css кода? Вот почему без вложенности классов не переписали сгенерируемый код, а с вложенностью переписали?

Answer 1

[Сергей delphinpro]

Существует понятие "специфичность селектора". Т.е. его "вес". Стили применяются те, у которых специфичность выше.
Чтобы мне тут не писать много слов, дам ссылку , ну еще погуглить можно.

У вас получается
.container .rect{...}
.container{}
.rect {}

в третьей строке один идентификатор в селекторе - .rect специфичность будет равна 1
в первой строке два идентификатора .container и .rect специфичность будет равна 2
поэтому стили из первой строки перекроют стили из третьей строки

Далее, вы пытаетесь сделать вложенность. Но почему-то упускаете тот момент, что изначально вложенности нет.
у вас есть селекторы
.container{}
.rect{}
после ваших правок они превратятся в
.container{...}
.container .rect{...}
Как мы видим, селектор
.rect{} пропал. а он должен быть.

UPD
Вы писали что на выходе у вас
.container .rect{...}
.container .rect{...}
Вторая строка - это то что было раньше селектором .rect{} специфичность=1
А теперь у него вес вырос, и стал равным =2
В первой строке вес тоже равен =2
Ранее, когда у второй строки вес был равен=1, то стили из первой строки перекрывали стили из второй.
Теперь вес селекторов одинаковый, и применяются те, что ниже по коду.
В результате, не имеем необходимого перекрытия стилей, и все ломается.

С какой целью вы пытаетесь переписать код?

Comments

[vasIvas]

Спасибо за объяснения. Я хочу иметировать namespace, ведь в css это единственный способ избежать перезаписывание стилей? Ведь в коде ниже второй перезапишет первый..

.label {1}
.label {2}

А ещё ниже ведь не перезапишет?

.container-a.label {1}
.container-b.label {2}

[Сергей delphinpro]

vasIvas: Для имитации неймспесов умные люди придумали методологию БЭМ :)

специфичность селектора .container-a.label выше чем просто .label, так вне зависимости от их расположения в коде стили из .label перекроются стилями из .container-a.label

[vasIvas]

Сергей: но ведь именно это и нужно или я чего-то не понимаю? Вот например если я напишу как в коде ниже, то все первые буквы будут черного цвета.

.superman {}
.first-letter {color: red;}

.batman {}
.first-letter {color: black;}

И по этому лучше же писать вложенными не боясь что будет перекрытие..

.superman {}
.superman .first-letter {color: red;}

.batman {}
.batman .first-letter {color: black;}

Или есть способ лучше? Пока прочту про БЭМ, но мне кажется что вложенные классы же лучше, тем более на sass, ведь их так легко писать..?

[vasIvas]

Что-то я не смог понять что это такое БЭМ, но если это типа - superman, superman-label и batman, batman,-label, то я впринципе так и пишу, но просто пытаюсь на всякий случай подстраховаться. Или БЭМ это не то что я описал?

[vasIvas]

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

[Сергей delphinpro]

Минус вложенных классов, это как раз то, что вы считаете плюсом - повышенная специфичность :)
Но можете забить на это, тем более вложенность вполне себе решает ваши задачи.