Очень часто при написании разметки у элементов встречается несколько (если не много) HTML-атрибутов. Чтобы как-то навести порядок среди них, можно воспользоваться простой хорошей практикой — указывать атрибут в соответствии с его приоритетом из следующего списка:
classidnamedata-*src,for,type,href,valuetitlealtrole,aria-*
Классы указывают для повторно используемых компонентов, поэтому их следует указывать первыми. Идентификаторы (атрибут id) указывают на специфичность элемента и должны быть использованы осознанно (например, для указания якорей на странице), поэтому они указываются вторыми.
Это правило позволит вам быстрее обнаружить нужный атрибут, а не искать его по всей длинной последовательности.
При всём вышесказанном, если вы используете AngularJS, директивы, указываемые через HTML-атрибуты, рекомендуется указывать после перечисления стандартных атрибуты, чтобы удобно разграничить элементы фрэймворка от разметки. При большом количестве атрибутов такое разделение окажет положительное влияние на читаемость и поддержку разметки.
Пример элемента с большим количеством атрибутов:
<a class="my-class" id="link-id" data-toggle="modal" href="#anchor" title="Заголовок ссылочки" ng-show="showMe" ng-click="onClick()" my-ng-directive-1 my-ng-directive-2>
Ссылочка
</a>На этом всё! Я надеюсь, твоя разметка после прочтения этой статьи станет ещё лучше.
До новых статей!