Здравейте приятели. В един интересен разговор в зала 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
Това беше като цяло. Целта на материала е да ви представи моя подход, които ми помага да преценя кога какво да използвам. Искрено се надявам да съм бил полезен. Понеже съм убеден, че могат да се дадът много по-добри примери, да се споделят още по-добри идеи и виждания по темата, та … ще съм благодарен ако го направите.
Благодаря ви за отделеното време.
Живи и здрави !
Зравейте приятели,
