Как добавить состояние элементу правильно?

Question

[JackShcherbakov]

Здравствуйте! Есть код:

#selectionPanel{
	background-color: #9FD468;
	color:white;
	position: fixed;
	box-shadow: 0 0 20px white;
	height: 450px;
	width: 100%;
	top:-450px;
	user-select:none;	
	margin-top: 50px;
	transition: 0.5s;
}
.selectionPanel__open{
	top:0 !important;
}

При клике на определенную кнопку, элементу #selectionPanel добавляется класс (состояние) .selectionPanel__open. Проблема в том, что работает только с !important. Неужели у стилей в id приоритет больше? Как обойтись без !important?

Заранее спасибо!

Answer 1

[alvvi]

Неужели у стилей в id приоритет больше?

Да. Не используйте их для стилей, желательно совсем.

Comments

[JackShcherbakov]

Да, я так и сделал. Спасибо! Так и не могу понять: в учебниках про JS говорят, мол, id - самый быстрый способ получить элемент, поэтому мы будем использовать его. А вот в учебнкиах по css наоборот! Сделал этот вывод прочитав 2 книги по JS и 2 по CSS.

[alvvi]

JackShcherbakov, если честно, даже в js использую id очень редко. id - это всегда один элемент, а оперировать обычно приходиться NodeList-ами.
Конечно есть исключения, но если верстать по БЭМ-у, обычно не приходится с ними сталкиваться.