Ідентифікатори та імена класів в CSS

Смислові елементи надають чудовий матеріал для побудови фундаменту сторінки. Мова (X)HTML була створена як простий засіб розмітки документів, а не як мова інтерфейсу. Через це в синтаксисі (X)HTML відсутні елементи, спеціально призначені, наприклад, для області вмісту або навігаційних панелей.

Засобами XML ви можете створити для цього власні елементи, проте в теперішній час такий підхід з багатьох причин непрактичний.

Існує інший спосіб розширення списку смислових елементів. Ви можете використовувати існуючий елемент, надавши йому додатковий зміст за допомогою ідентифікатора або імені класу. Таким способом ви добавите в документ додаткову структуру і встановите в коді "зачіпки" для ваших стилів. Наприклад, в простий список гіперпосилань за допомогою атрибуту "id" можна додати ім'я "mainNav", яке буде означати, що список використовується в якості головної панелі навігації.
<ul id ="mainNav">
<li><a hrеf="#">Головна</а></li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Контакти</a></li>
</ul>

Значення "ID" використовується для ідентифікації окремого елемента сторінки. Воно повинно бути унікальним. У наведеному вище прикладі ідентифікується елемент "ul" як засіб навігаціі по сайту. Значения "ID" корисні для ідентифікації стійких структурних елементів, таких, як область змісту або засоби навігації. Крім того, значення "ID" може бути корисним для ідентифікації окремого елементу, наприклад гіперпосилання або елементу форми.

Щоб уникнути плутанини, в межах сайту ідентифікатори слід застосовувати до концептуально схожих елементів. Якщо форма контактів і деталізація контактних даних знаходяться на різних сторінках, то технічно їм можна присвоїти одне і теж ім'я, наприклад "contact". Однак робити так не слід, оскільки згодом ви будете привласнювати елементам стилі на основі їх призначення. Набагато простіше застосувати різні імена, наприклад "contactForm" і "contactDetails".

Один ідентифікатор можна привласнити тільки одному елементу на сторінці, а ім'я класу - будь-якій кількості елементів. Класи досить корисні для ідентифікації типів вмісту або для позначення аналогічних елементів. Припустимо, на сторінці, присвяченій новинам, є дата кожної статті. Тоді замість присвоєння датам різних ідентифікаторів можна присвоїти всім елементам одне і те ж ім'я класу.

Привласнюючи імена ідентифікаторів і класам, важливо вибирати їх таким чином, щоб вони повідомляли про призначення елементів і якомога менше залежали від презентаційних аспектів сторінки. Припустимо, ви присвоїли навігаційній панелі, розміщеній праворуч, ім'я "rightHandNav". Однак згодом ви можете перемістити панель вліво, в результаті чого таблиця CSS і документ (X)HTML виявляться неузгоджені. Щоб уникнути цього, краще з самого початку привласнити елементу панелі ім'я "subNav" або "secondaryNav". Ці імена пояснюють, що робить елемент, а не як він представлений або розташований. Те ж справедливо і для імен класів. Припустимо, потрібно, щоб усі повідомлення про помилки (Еггог) виводилися червоним кольором (red). Тоді класу повідомлень про помилки краще привласнити ім'я "error", а не "red", оскільки згодом може знадобитися змінити колір.

При виборі ідентифікатора або класу звертайте увагу на чутливість імені до регістру в таблицях CSS. Однак чутливість до регістру залежить не тільки від таблиць CSS, але і від мови розмітки. При використанні XHTML імена ідентифікаторів і класів чутливі до регістру, а при використанні HTML - ні. Щоб ваш код був стабільним, дотримуйтеся одних і тих же угод про іменування при роботі з будь-якою мовою розмітки, тобто завжди припускайте, що імена чутливі до регістру. Рекомендується завжди застосовувати угоду "Camel", тобто використовувати символи верхнього регістру тільки для перших букв другого і подальших слів в імені.

Гнучкість класів надає дизайнеру багаті можливості, в той же час класи досить часто використовуються неправильно. Початківці дизайнери CSS додають класи майже до всіх елементів, намагаючись отримати повний контроль над їхніми стилями. У ранніх редакторах WYSIWYG теж була "манера" присвоювати класи при кожному застосуванні стилю. Дивлячись на код, створений цими редакторами, і навчаючись на прикладах такого коду, багато дизайнерів перейняли погану звичку додавати занадто багато класів. Іноді таку манеру роботи називають "класицизмом". По суті, класицизм так само поганий, як і верстка на основі таблиць HTML, оскільки в обох випадках документ містить багато коду, не погодженого з назначенням компонентів сторінки.

Розглянемо приклад коду:
<hЗ сlаss='пеwsНеаd'>Тема новини</h3>
<р class='newsText'>
Текст новини...
</р>
<р class='newsText'>
<a href='/news.html' class='newsLink'>Додаткова інформація</a>
</р>

У цьому прикладі кожен елемент ідентифікований як частина сайту, присвяченого новинам (news), за допомогою класу, ім'я якого містить префікс "news". Так зроблено для того, щоб заголовкам і фрагментами тексту, які присвячені новинам, було легко привласнювати стилі, відмінні від стилів інших компонентів сторінки. Однак для кожного елемента всі ці додаткові класи не потрібні. Замість них можна весь блок новин ідентифікувати за допомогою дескриптора "div" і класу "news". Після цього привласнювати стилі заголовкам і тексту новин можна буде за допомогою каскадування, як у наведеному нижче прикладі:
<div class='news'>
<hЗ>Тема новини</h3>
<р>Текст новини</р>
<р><а hrеf='/news.html'>Додаткова інформація</a></p>
</div>

Усунення додаткових класів допомагає спростити код і зменшити розміри сторінки.

Слід зазначити, що покладатися тільки на імена класів не обов'язково. Зазвичай клас застосовують до елементу, тільки якщо використовувати ідентифікатор в даній ситуації з якої-небудь причини незручно. Рекомендується не зловживати іменами класів. Якщо документ (X)HTML містить занадто багато класів, швидше за все, це вказує на те, що він погано структурований.
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь