id class

В чем разница между class и id

Для начала нужно понять что это совершенно разные понятия.

Id – это уникальный идентификатор,  он может приментся лиш раз.  Class – может групировать разные теги с помощью чего применять css намного проще. Классов может быть сколько угодно.

Классы стоит использовать если нужно сгрупировать елементы.

Например у нас на странице есть текст <h1> и <p>, мы хотим что бы у них был разный размер но одинаковый цвет, напримере применим class="text":

p{
font-size: 20px;
}
h1{
font-size: 24px;
}
.text{
color: red;
}

Конечно это можно было сделать и через запятую

p{
font-size: 20px;
}
h1{
font-size: 24px;
}
p, h1{
color: red;
}

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

id часто используют для распределения сайта на части, например:

<div id="head">
//шапка сайта
</div>
<div id="content">
//контентная часть 
</div>
<div id"sidebar">
//боковое меню
</div>
</div id="footer">
//футер вашего сайта
</div>

То есть они уникальны. Еще не мало важный фактор, ваш код страницы не пройдет валидацию, если вы иcпользуете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.

Валидация это процес некой проверки на соответствие веб-стандартам и выявление существующих ошибок. Соответственно, валидным является такой веб-документ, который прошел подобную процедуру и не имеет замечаний по коду. Код веб-страницы должен подчиняться определенным правилам, которые называются спецификацией, ее разрабатывает W3 Консорциум (www.w3c.org) при поддержке разработчиков браузеров.

Идентификаторы имеют специальную функциональность для браузера

Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку http://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.

Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.

При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.

Если не нужны, то и не испольуйте

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

И на последок, не стоит забывать о разнице между обращением к class и id:

#text{} // для id
.text{} // для class

Это касается не только css, а и все языки программирования.

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *