[UPDATE]:
Я опубликовал статью на Medium согласно предложению в комментариях:
https://medium.com/@holmesadrianh/have-you-used-these-css-selectors-5535b9e7b48f
[ОРИГИНАЛ]:
Последние несколько лет я работал над различными типами проектов, и я обнаружил, что для большинства крупных проектов, над которыми я работал, было приложено больше усилий, используя технику BEM для стилизации. Основная причина в том, что проект, цели, будь то от клиента или разработчика, постоянно меняется.
Что я сделал для более недавнего проекта, так это создал несколько более атомарных классов:
.typo__bold{}
.typo__uppercase{}
.typo__h1{}
Я нахожу это намного более полезным, когда требуются изменения для конкретной страницы и для конкретного компонента. Я также хочу упомянуть, что окружающая среда была кошмаром для работы, поэтому, возможно, именно поэтому я рассматриваю атомарный подход для более крупного проекта.
Так что я попал в использование немного БЭМ и Атомной техники.
Тем не менее, я немного больше изучал этот атомарный подход, но немного более компактен, и я провел тест, который, кажется, работает нормально, но я не уверен насчет рисков и проблем. Вот идея использовать атрибуты тега в качестве селекторов:
[bold]{
font-weight: bold;
}
[uppercase]{
text-transform: uppercase;
}
[style-link]{
/* Link styles */
}
Который успешно стилизует следующее:
<p uppercase>
Lorem ipsum dolor sit amet, <u bold>consectetur adipiscing</u>
elit, sed do eiusmod <span style-link>tempor incididunt</span>
ut labore et dolore magna aliqua.
</p>
Теперь мне действительно нравится эта простота, но моя первая мысль - почему это не было сделано? Или это было сделано, и я еще не наткнулся на эту технику? Мне очень любопытно, и я действительно хотел бы исследовать это немного больше, но я подумал, что хотел бы обратиться к сообществу, чтобы узнать, есть ли уже некоторые проблемы и ограничения с этим подходом.
Имейте в виду, что я намерен работать между двумя техниками БЭМ и Атомики, так как я обнаружил, что каждая из них приносит свою магию на стол.
Вот пример кода, где вы можете видеть, что выбор атрибутов работает просто отлично:
https://codepen.io/awinhayden/pen/OBYjjL
Любые мысли и отзывы очень ценятся.
Адриан
[EDIT]
Для большей ясности я в настоящее время использую классы CSS, но хочу исследовать это как альтернативу. Некоторые проблемы, с которыми я столкнулся при работе с классами, заключаются в том, что вам нужны префиксы, чтобы избежать конфликтов простых классов, поэтому классы должны быть более длинными и более наглядными. Кроме того, вам нужно добавить атрибут класса, которого можно избежать, если вам просто нужно одно изменение стиля:
<p class="bold"></p>
versus
<p bold></p>
Кроме того, будучи тегами, их можно добавлять в любом месте тега. Это помогает в определенных сценариях, в которых сложно выполнить внутренний код.
[РЕДАКТИРОВАТЬ 2]
Я просто понял, что в большинстве случаев я буду ориентироваться на типографику больше всего на свете. Я мог бы хотеть рассмотреть такие вещи, как поля и интервалы, но на самом деле я думаю, что это будет в основном для типографики. Не уверен, что это изменит интерес к этому вопросу сейчас: P