Стилизация с помощью CSS классов на JavaScript

В предыдущем уроке мы с вами научились менять CSS стили элементов через изменение атрибута style. Чаще всего это не очень хорошая идея. Дело в том, что, если раскидать CSS стили по JavaScript коду, в дальнейшем будет проблематично изменить дизайн сайта, так как придется ковырять JavaScript код в поисках зашитых туда стилей.

Более удобно для дальнейшей поддержки будет добавлять или убирать элементу CSS классы, тем самым стилизуя их нужным образом.

Давайте посмотрим на примере. Пусть у нас есть несколько абзацев:

<p>text1</p>
<p>text2</p>
<p>text3</p>

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

.colored {
	color: green;
}

Преимущество использование класса в том, что теперь легко можно будет поменять желаемый цвет - для этого нужно будет просто внести изменение в CSS файл, не ковыряя JavaScript код. Особенно удобно это будет в том случае, если JavaScript код пишете вы, а в дальнейшем стилизовать его будет кто-то другой (возможно менее квалифицированный человек, умеющий работать только с CSS).

Итак, теперь, после введения класса, по клику на любой абзац можно изменить его цвет, просто добавив ему наш класс:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // добавляем абзацу класс
	});
}

Объясните, почему я выбрал для названия класса слово colored, а не слово green, явно указывающее на желаемый нами цвет.

Дан абзац. Даны кнопки 'перечеркнуть', 'сделать жирным', 'сделать красным'. Пусть по нажатию на каждую кнопку заданное действие происходит с абзацем (становится красным, например).