Совет: используйте HTML комментарии к pseudo-элементам

наверх

На недавнем W3Conf объяснили, что хотя pseudo-элементы помогли нам добавить декоративное содержание наших страниц, сохраняя при этом наш HTML чистым, но они привели к некоторым вопросам. Инструменты разработчика могут в некоторой степени помочь отследить элементы, но часто динамически добавляемый контент, например, pseudo-элементы или дополнительные элементы, добавленные с помощью JavaScript, изначально отследить куда сложнее. Допустим, у нас есть следующие HTML и CSS (с pseudo-элементами):

HTML:

<div class="exampleModule">
    <p>content...</p>
</div>

CSS:

.exampleModule {  
  float: left;  
  border: solid 2px #ccc;  
  position: relative;  
}  

.exampleModule:before {  
  content: url(icon.png);  
  float: left;  
}  

.exampleModule:after {  
  content: url(corner.png);  
  position: absolute;  
  bottom: 0;  
  right: 0;  
}

В результате мы получим <div>, содержащий параграф и 2 декоративные картинки: до и после параграфа. Когда мы будем просматривать наш HTML код, мы не сможем сразу увидеть изменения в HTML. Придется лезть в CSSи анализировать классы элементов. Чтобы было легче ориентироваться, лучше использовать в верстке комментарии:

<div class="exampleModule">
    <!-- pseudo: icon.png -->
    <p>content...</p>
    <!-- pseudo: corner.png -->
</div>

Теперь вам не придется просматривать CSS или инспектировать элемент с помощью средств разработки. Теперь, как только вы посмотрите на HTML, вы сразу увидите элементы (в данном случае два изображения), добавленные с помощью pseudo-элементов. Так наглядней, правда? Аналогично этот же принцип может быть применен к контенту, который вводится с помощью JavaScript.

Спасибо за внимание!

Демонстрация

Оригинал статьи