JavaScriptда CSS класслар билан стиллаш

Элементларни style атрибути орқали стиллаш баъзан қулай бўлса-да, кўпчилик ҳолларда - энг яхши фикр эмас. Муаммо шундаки, стиллар JavaScript файли бўйлаб тарқалиб кетади ва уларни ўзгартириш меҳнатталаб қўйади. CSS файлларда стилларни белгилаш ана шунча қулайки, уларни JavaScript кодига чуқур қозишмай осонгина ўзгартириш мумкин.

Мисол учун бизда бирор хабар чиқарувчи элемент бор дейлик. Хабар "яхши" бўлишиб, яшил рангда чиқса ва "ёмон" бўлишиб, қизил рангда чиқса. Бундай ҳолда энг яхши ҳал бу́зиш учун мос CSS классларни ясаш бўларди:

css.success {
  color: green;
}
.error {
  color: red;
}

Энди "яхши" хабар чиқарганда биз элементга "яхши" классни берамиз:

javascriptelem.textContent = 'good';
elem.classList.add('success');

"Ёмон" хабар чиқарганда эса биз элементга "ёмон" классни берамиз:

javascriptelem.textContent = 'bad';
elem.classList.add('error');