Комментарии 13
Известны ли вам какие-нибудь полезные способы работы с кнопками, которые остались за рамками этой статьи?Мощная подборка.
Можно дополнить рекомендациями для трендового Mobile First… Впрочем, это переводная статья.
Кстати, в конце оригинала есть три ссылки на Related Articles, тоже некороткие, и там тоже слово «mobi» не находится в тексте.
0
Крутой гайдлайн, теперь заворачиваем всё в и ок =)
+1
Крутой пост
0
Спасибо за статью. Много полезной информации в одном месте.
Есть пара замечаний:
Тоже самое с модификаторами размера шрифта --md и --lg ни о чем нам не говорят, а вот если так:
то сразу понятно и у нас остается возможность управлять параметрами других свойств, ( например c-button_size_md ) и понимать что они делают.
По поводу скрытия текста:
Возможен еще такой вариант:
Есть пара замечаний:
.c-button span
Не очень хороший пример, даже в статье мы увидели, как внезапно появился второй span, который должен быть снизу и с другими стилями. Эта кнопка хорошо демонстрирует преимущества БЭМ. Практичнее было бы написать так:.c-button__title
.c-button__desc
Тоже самое с модификаторами размера шрифта --md и --lg ни о чем нам не говорят, а вот если так:
.c-button_font-size_md
.c-button_font-size_lg
то сразу понятно и у нас остается возможность управлять параметрами других свойств, ( например c-button_size_md ) и понимать что они делают.
По поводу скрытия текста:
.c-button--multiple span:after {
content: "240K+ subscribers";
display: block;
font-weight: 400;
margin-top: 0.25rem;
}
Возможен еще такой вариант:
<button class="c-button">
<div class="c-button__title">Subscribe to our newsletter</div>
<div class="c-button__desc" data-desc="240K+ subscribers"></div>
</button>
.c-button__desc:after {
content: attr(data-desc);
display: block;
font-weight: 400;
margin-top: 0.25rem;
}
+1
Вам рассказывают о работе с цсс при использовании кнопок, вы же, зачем-то, суете БЭМ, который тут вообще не при чем, еще и говоря, что автор приводит плохой пример. Не нужно так делать
-5
Простите, зачем извращаться так со вторым спаном(дивом в данном случае)? Когда существует aria-hidden?
0
Хорошие раскопки.
Но мне кажется в 2020 нужно посетить кнопки при помощи all: unset
0
любая кнопка внутри формы даже без указания типа и без обертки js будет работать как type=«submit»
+1
Кнопка работает как submit и за пределами формы, т.к. это стандартное значение атрибута type
. Просто отправлять при этом нечего.
0
Какая-то забавная некрофилия :-)
Форм на странице может быть несколько, а может не быть вообще :-) Кнопок submit внутри формы может быть тоже несколько, и у них даже value можно прописать. Я этим бывает даже пользуюсь для поиска разных сущностей из одного поля ввода (ну например фото, альбомы, пользователи)
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Стилизация старого доброго элемента button