Как сделать более аккуратный код когда много строк стилей в DOM (element.style... = '...')?

Question

[YarikLtv4k]

https://jsfiddle.net/gxa5vmwe/2/
(Первые 20 строк CSS)

.text-content p:after{
	background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
  display: block;
  content: "";
  height: 2px; /* Высота линии */
  width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}
.text-content p:hover:after,
.text-content p:focus:after{
	width: 100%;
}

Нужно чтобы применялись эти стили, но через js (при наведении и при смене картинки (слайдер)). К каждому отдельному тексту одинаковые стили. Может сделать через присвоение класса отдельного и туда все записать. Или задать переменную и ее просто выводить? Но нужно чтобы применялось только к одному эллементу, не все выделялись

Comments

[Владимир Овчинников]

Разве к p можно применять :focus?
P.S. jsfiddle не открывает(

Answer 1

[Vindicar]

Я бы вынес это в отдельный класс и назначал его тем элементам, которые нужно стилизовать. Упрощает JS, упрощает HTML разметку, оставляет стили там, где им место - в CSS файле.