Использование CSS-помощника Класс

Question

Я пытаюсь скопировать CSS в «Стиль класса справки» сегодня, и многие разработчики в Twitter говорят, что это плохая практика.

Вот пример:

<span class="et-margin-top-30 et-width-400 et-display-inline"> 
    <p class="et-common-frame-shadow et-inner-img-shadow"> 
     <img class="et-common-frame-img" src="img3.jpg"/> 
    </p> 
    <h3 class="et-margin-top-10 et-fontsize-26 et-fontweight-bold">foo</h3> 
    <p class="et-margin-top-10">bar</p> 
</span> 

Почему это плохая практика? Может ли кто-нибудь сказать? Когда мы должны использовать вспомогательный класс, такой как .clear?

Answer 1

Идея стилизация с помощью CSS - это разделение между содержанием и стилем. Ваш контент находится в HTML и CSS предоставляет информацию о том, как это должно отображаться визуально. Если вы хотите изменить его, вы можете сделать это, не меняя другого.

Называя свои классы et-margin-top-30, вы помещаете информацию о стиле в свой HTML. Вы также можете написать style="margin-top: 30px". Потому что, если вы решите, что этот элемент должен иметь маркер пикселя , вам необходимо изменить как CSS , так и HTML. Вот почему это плохой стиль.

Вы должны скорее назвать ваши HTML-элементы по их функции (например, class="headline" или class="call-to-action"), то опишите в вашем CSS, как это заголовок или что призыв к действию должно быть стилизовано. Если вы хотите изменить это позже, вы можете сделать это, просто отредактировав свой CSS, HTML не нужно изменять.

Не говоря уже о том, что если вы используете JavaScript, чтобы манипулировать элементы, используя document.getElementsByClassName('et-margin-top-30') а) делает его очень трудно понять смысл ваших сценариев и HTML структуру и б) требует, чтобы вы изменили свой HTML, CSS и Javascript каждый раз, когда вы хотите настроить внешний вид элемента. Использование дескриптивных имен классов становится вдвойне важным.

Answer 2

То, что вы пытаетесь сделать, выглядит ужасно. Похоже, у вас есть класс для всех разных атрибутов стиля. Это не только сделает ваш HTML нечитаемым, но и увеличит размер файла.

Что делать, если элемент имеет 15 стилей, прикрепленных к нему. Будет ли у него 15 классов?

Я также думаю, что это только сделает это медленнее, чтобы визуализировать (это только что я только что составил и для которого у меня нет доказательств), потому что он должен искать все эти классы.

Я не вижу никакой разницы в выполнении <p style="color: red;"></p>.