Это более последовательно, это конец-все будет все, честно. Если вы предпочитаете использовать атрибуты, сделайте это. Однако это просто , что намного сложнее для тех, кто должен помочь вам позже. Классы CSS предназначены для группового выбора и применения общих стилей. CSS просто может также иметь возможность выбирать атрибуты, потому что это имеет смысл в некоторых крайних случаях.
Как правило, атрибуты должны быть зарезервированы для всего, что не связано со стилем и добавляет значение для другого использования, будь то средства чтения с экрана или контейнеры переменных для JavaScript, например data-id="34" может позволить сделать асинхронный запрос с идентификатором параметр.
Рассмотрим этот пример, у него есть несколько простых кнопок на основе классов:
.button {
display: inline-block;
border: 1px solid;
padding: 4px 10px;
text-decoration: none;
margin-bottom: 4px;
}
.primary {
background: currentColor;
}
.primary span {
color: #fff;
}
.blue {
color: #0095ee;
}
.red {
color: #ee3300
}
<a href="#" class="button red">Red Button</a>
<a href="#" class="button red primary"><span>Red Button</span></a>
<br />
<a href="#" class="button blue">Blue Button</a>
<a href="#" class="button blue primary"><span>Blue Button</span></a>
Чтобы воспроизвести что-то подобное с атрибутами, мы будем делать что-то подобное с некоторыми отвратительными и довольно произвольными именами атрибутов. Делая это, я действительно все испортил, потому что в одном случае я использовал неверное имя атрибута и пару значений.
[type="button"] {
display: inline-block;
border: 1px solid;
padding: 4px 10px;
text-decoration: none;
margin-bottom: 4px;
}
[status="primary"] {
background: currentColor;
}
[status="primary"] span {
color: #fff;
}
[color="blue"] {
color: #0095ee;
}
[color="red"] {
color: #ee3300
}
<a href="#" type="button" color="red">Red Button</a>
<a href="#" type="button" color="red" status="primary"><span>Red Button</span></a>
<br />
<a href="#" type="button" color="blue">Blue Button</a>
<a href="#" type="button" color="blue" status="primary"><span>Blue Button</span></a>
Разве не имеет смысла хранить все ваши стилистические и групповые целевые атрибуты внутри атрибута class? Я имею в виду, это то, для чего оно было разработано. Я полагаю, что вы могли бы отбросить значение параметра и просто использовать имена параметров, но вы действительно отрицаете назначение атрибутов, учитывая, что class является глобальным атрибутом сам по себе.
Вот и пример JavaScript:
let classes = document.getElementsByClassName('button');
for( i = 0, n = classes.length; i < n; ++i ){
classes[i].style.background = 'red';
}
let attrs = document.querySelectorAll('[button]');
for( i = 0, n = attrs.length; i < n; ++i ){
attrs[i].style.background = 'blue';
}
a {
padding: 10px;
margin-bottom: 4px;
display: inline-block;
text-decoration: none;
color: #fff;
}
<a href="#" button>Attr 1</a>
<a href="#" button>Attr 2</a>
<a href="#" button>Attr 3</a>
<br />
<a href="#" class="button">Class 1</a>
<a href="#" class="button">Class 2</a>
<a href="#" class="button">Class 3</a>
Если не учитывать тот факт, что JS имеет обширную интеграцию с функциями на основе классов (и идентификаторов) для селекторов, вы имеете для использования querySelector и querySelectorAll для кнопок атрибутов.
Хотя это не так уж и плохо, (честно говоря, я предпочитаю querySelector над getElement(s)By… в целом), но когда вы смотрите на это, querySelectorAll('[button]') просто плохо читается, почти как будто я нацеливаюсь на <button> элемент. Семантически затрудняет чтение:
getElementsByClassName('button') - явно получает все элементы, которые имеют класс кнопки, или даже
querySelectorAll('.button') - Поскольку . универсально понимается как селектор «класса», и каждый, кто работает с HTML, CSS и JS, узнает об этом буквально в первый день любой программы / учебника по веб-разработке. Таким образом, вы вносите немного рывка в проект, удаляя такой фундаментальный кусок.
Я уверен, что вы слышали фразу «Только потому, что вы можете, не значит, что вы должны». - Я думаю, что здесь все в порядке. Я имею в виду, что мы на самом деле использовали для использования таких вещей, как <font color="red">Red</font>, и мы отошли от него, потому что имело больше смысла группировать стили в одном глобальном атрибуте. Вас ничто не останавливает, но я думаю, что это требует больше хлопот, чем стоит отбросить классы для произвольных имен параметров, не говоря уже о том, если у вас возникла проблема, и выложите свой код для помощи, первый ответ будет всегда be "Почему ты это делаешь, какой препроцессор ты используешь?"