Кога използваме Class и кога ID?

Публикувано в xHTML/CSS, Други на 21.06.2011

Здравейте приятели. В един интересен разговор в зала 200 на ФМИ съвсем случайно се промъкна, нещо между въпрос, тема за разговор, размишление … или нещо от сорта, което звучеше така: „Кога използваме Class и кога ID?“. В итерес на  истината това е интересна тема и заслужава да и се обърне внимание. Може би за мнозина от вас, темата ви изглежда доста проста и много незначителна, но според мен не е точно така. Убеден съм, че правилната употреба на тези инструменти много помага на работата ни. Ще я направи, по-приятна, по-ефективна, по-безболезнена и още много по по… :)

Рецептата която ще споделя с вас е личното ми виждане за това как трябва да се пише HTML и CSS. Разбира се всеки един от вас, които се занима по-сериозно с това, може би има свой личен подход за проблема и евентуално няма да съвсем съгласен с мен. Ако наистина е така ще се радвам да го споделите за да можем да обогатим мирогледа си :)

По същество

Мисля, че първия въпрос който трябва да си задаете след като се запитате ID или Class е, какво ще пиша и кое ще ми е по-полезно. Звучи доста тривиално, но е факт. В различните ситуации трябва да се подхожда различно.

Ето как примерно аз правя когато правя дизайн(на кода) на едно уеб приложение/сайт:

  • Пърото нещо, което правя е да го погледам едно известно време 5, 10, 20 минути за да мога да го видя в модули.
  • Разбирам на какво ще пиша xHTML, HTML5 и спрямо това си избирам подход на работа.
  • Търся информация как ще работи сайта (малко различни картинки или някакво демо ако има)

След като премина през тези стъпки мога да реша вече къде и какво да правя.

Нека да видим стъпка по стъпка каква е идеята:

1. Ако можем да си рацепим сайта на модули освен за удобството при разработа и поддръжка, това ще ни даде допълнителна информация за това:

  • Имаме ли сходни модули (менюта, боксчета и тнт.)
  • Кое да направим еднакво навсякъде и кое да разширим

Например, ако си представим, че поради някаква причина имаме 3 „менюта“ на сайт-а които се различават по нещо малко. Горно меню, футър меню и пейджинг.

  • И 3-те менюта ще са изградени да кажем от ul > li > a
  • Горното меню ще бъде със син фон
  • Пейджинга ще бъде без фон и ще бъде центриран
  • Футър менюто ще бъде в дясно с лилав фон

Както виждате визуално може да изглеждат доста различно но като код са горе долу еднакви. Ето едно примерче:

<div class="site_navgation" id="topmenu">
	<ul>
		<li><a href="#">Начало</a></li>
		<li><a href="#">За Нас</a></li>
		<li><a href="#">Карта на сайта</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</div>

<div class="site_navgation" id="paging">
	<ul>
		<li><a href="#">prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li>...</li>
		<li><a href="#">next</a></li>
	</ul>
</div>

<div class="site_navgation" id="footermenu">
	<ul>
		<li><a href="#">Начало</a></li>
		<li><a href="#">За Нас</a></li>
		<li><a href="#">Карта на сайта</a></li>
		<li><a href="#">Контакти</a></li>
	</ul>
</div>

2. Ако сме на ясно на какъв HTML ще пишем това доста може да ни помогне в подбора на тагове и структурирането на кода. Ето отново няколко примера.

<!-- xHTML example -->

<div class="column" id="leftcolumn">
	<div class="module" id="mainmenu">
		<div class="heading">
			<h3>Главно меню</h3>
			<p>Това е нашето главно меню</p>
		</div>
		<div class="content">
			<ul class="menu">
				<li><a href="#">Начало</a></li>
				<li><a href="#">За Нас</a></li>
				<li><a href="#">Карта на сайта</a></li>
				<li><a href="#">Контакти</a></li>
			</ul>
		</div>
		<div class="more">
			<a href="#">Вижте още в нашето разширено главно меню.</a>
		</div>
	</div>
</div>

<!-- HTML5 example -->

<aside id="leftcolumn">
	<section id="mainmenu">
		<header>
			<h3>Главно меню</h3>
			<p>Това е нашето главно меню</p>
		</header>
		<article>
			<menu>
				<li><a href="#">Начало</a></li>
				<li><a href="#">За Нас</a></li>
				<li><a href="#">Карта на сайта</a></li>
				<li><a href="#">Контакти</a></li>
			</menu>
		</article>
		<footer>
			<a href="#">Вижте още в нашето разширено главно меню.</a>
		</footer>
	</section>
</aside>

3. За да можем да си представим още по-добре картинката е хубаво да знаем как ще работи пустия му сайт. Но защо ни е необходимо това?

Както знаете в модерния уеб се случват доста неща без да се презарежда нашата страница или казано на наш език с JavaScript. За да създадем по-голямо удобство на човека който пише JavaScript-a (ако това не е наша работа) трябва да си структурираме правилно кода и да преценим каде ще ни е по-удобно да използваме #селектор, къде .селектор и къде да използваме елемент като селектор или нещо друго. Като цяло в по-малките проекти може да се правят компромиси и неправилната употреба на ID или Class няма да се отрази особенно. Както казват повечето хора мога да си направя целия сайт както сасмо с ID-та така и само с класове.

Още няколко важни неща

Освен  използването на ID, class, element като логически описване в самия HTML/CSS също така трябва да се мисли и за концептуалните идей като:

  • ID – трябва да бъде уникално
  • Class – може да са много
  • Element – спестява клас или ID селектор при описание
  • Важно!!! Различни селектори различни приоритети!

От изключително голямо значение е да знаете какви са подводните камъни:

<div id="leftcol">
	<div class="module" id="somemodule">
		<div>
			<div>
				<div>
					<h3>...</h3>
					<div class="content">
						...
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style type="text/css" media="all">
	.module div div div h3 {...}
	div.module div div div h3 {...}
	#somemodule div div div h3 {...}
	#leftcol .module div div div h3 {...}
	#leftcol div#somemodule div div div h3 {...}
	.module div {...}
	.module div div {...}
	#leftcol div div > div {...}
</style>

В ситуации от този тип, ще се натъкнете с тонове проблеми с наследяване, приоритети при наследяване и тнт. Затова внимавайте.

Четейки този материал моят приятел и колега Павел Иванов ми напомни за следното нещо:

Използването на ID-та и class-ве не се отнася само до удобствота на този който пише JavaScript, но също така се отнася и до това, до колко имаме нужда от думичката „Cascading“ в нашия CSS код.
Така наречените „тежести“ могат да изиграят много важна роля, особедно при все по-голямата подръжка на „Attribute selectors“ от съвремените браузъри.
Знаем, че големината на кода е много важна и за това има значение как определяме нашите селектори.

Ето тук има малко повече информация за въпросните тежести: ( Calculating a selector’s specificity – http://www.w3.org/TR/CSS2/cascade.html#specificity )

Разбира се, всичко е много относително и зависи от конкретната ситуация :)

Fin

Това беше като цяло. Целта на материала е да ви представи моя подход, които ми помага да преценя кога какво да използвам. Искрено се надявам да съм бил полезен. Понеже съм убеден, че могат да се дадът много по-добри примери, да се споделят още по-добри идеи и виждания по темата, та … ще съм благодарен ако го направите.

Благодаря ви за отделеното време.

Живи и здрави !

Етикети: , , , ,


Един коментар по “Кога използваме Class и кога ID?”

  1. Джават Ушев казва:

    Здравей.
    Доста полезна и информативна статия. Сложих линк към нея в пост от сайта ми, в който съм описал начин на използване и прилагане на class атрибута.
    Поздрави.

Вашият коментар