Почему это не вещь? Атомные селекторы атрибутов, например [синий] или [жирный] - PullRequest
0 голосов
/ 30 октября 2018

[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

1 Ответ

0 голосов
/ 30 октября 2018

Селекторы имеют присущую эффективность, порядок от большего к меньшему эффективные селекторы CSS идут так:

  1. ID, например, # Заголовок
  2. Класс, например .promo
  3. Тип, например ДИВ
  4. соседний брат, например, h2 + p
  5. Ребенок, например li> ul
  6. Потомок, например ul a
  7. Универсальный, т.е. *
  8. Атрибут, например [Тип = "текст"]
  9. Псевдоклассы / -элементы, например а: зависать

Использование селекторов атрибутов также требует большего количества символов для нацеливания на элемент. Лучше определять короткие и краткие имена классов, чтобы ваша таблица стилей была маленькой.

Пример:

// 17 Characters (attribute)
[title="example"] {
 ...
}

// 5 Characters (class)
.class {
 ...
}

Ссылка: https://csswizardry.com/2011/09/writing-efficient-css-selectors/

...