Comments 18
Тут к нам приходят разрабы и говорят: "кнопка классная, но нам нужна ссылка в виде кнопки"
Вот в этом месте надо было остановиться и дать разрабам хорошего леща за нарушение одного из главных законов пользовательского интерфейса: "Элементы, которые выполняют разные функции, не должны выглядеть одинаково".
В целом, складывается ощущение, что слои - очередная вещь, которая призвана упростить жизнь, но на самом деле всё усложнит.
Я и согласен, и не согласен. С одной стороны ссылка как будто действительно не должна мимикрировать под кнопку, с другой — это настолько часто встречающийся паттерн почти во всех дизайн системах, что хош не хош приходится его реализовывать.
Ну и я могу изи привести пример, в котором нет нарушения закона, о котором ты говоришь, но есть описанная проблема. Представь, что ты делаешь компонент заголовка и сбрасываешь ему браузерный margin до нуля. Его так же сложно будет перебить потом пользователям либы.
Щас вопросики полезут как червячки (с)
1. Зачем сбрасывать браузерный маргин, чтобы потом его заново устанавливать?
2. Почему бы не использовать природную специфичность стилей:
h1{margin:0}
h1.myfancystyle{margin: 1em 0 2em}
#myveryownmodal h1.myfancystyle{margin: 0 0 2em}
3. Почему бы не использовать природный усилитель !important ?
4. Почему бы не использовать style="margin:25vw", если уж припёрло?
Затем, что допустим большинству нужен
margin, сброшенный до какого-то значения, а части пользователей требуется его переопределить.Твой
h1будет аффектить ваще все `<h1 />` на странице. На больших проектах с несколькими независимыми фронтендами такой ресет приводит к проблемам.Использую
!importantв самых патовых ситуациях и не считаю, что он подходит для решения проблемы, которую я описал.Скажу то же самое, что сказал пунктом ранее.
Кнопка для перехода на другую страницу сайта. Как сделать "Открыть в новой вкладке" в контекстном меню без использования ссылки?
Переход на другую страницу это функционально ссылка. Кнопки про действия на текущей странице.
Кнопка открывает карточку товара в модальном окне, но по правому клику можно открыть страницу товара в отдельной вкладке?
Ваша «кнопка» загружает содержание другой страницы, то есть, это ссылка. То, что это происходит без фактического перехода на другую страницу с точки зрения браузера или пользователя, это другой вопрос, такие вот прокачанные ссылки современного веба. Представьте, что js ломается/отключается — ваша «кнопка» становится обычной ссылкой, как изначально было задумано (открыть страницу товара).
более специфичное сочетание
.Button.hidden {} ?Это норм решение, но мне кажется, что в долгосрочной перспективе такое повышение специфичности — дорога в ад. С каждым следующим витком будет сложнее вносить правки в стили.
слои это такое же повышение специфичности, только другими методами
Слои и специфичность — это два разных уровня каскада. Не понимаю, как их можно сравнивать. Слои позволяют декларативно один раз описать приоритет правил вместо бесконечной войны за бОльшую специфичность.
Не претендую на правоту, но способ, который предлагает Layer кажется гораздо более простым, чем определение приоритета на уровне специфичности.
Эта проблема решена в Angular.
Создаем компонент который не имеет своего тега, а добавляется в виде атрибута
@Component({selector: '[app-button]', template: `<ng-content></ng-content>`})
export class ButtonComponent {}а потом навешиваем его куда хотим, на кнопку или ссылку
<a href="/" app-button>Link Text</a>
<button app-button>Button Text</button>Для стилей в angular есть :host который привязывается напрямую к компоненту, ему не важно какой тег у него тег
// будет как работать как для a, так и для button
:host {
display:inline-flex;
}
Инлайновый элемент проигнорирует этот
margin.
Это не так. Для inline-элементов работают margin-right/margin-left, но не работают margin-top/margin-bottom
Практический пример использования CSS Layer