Как вы бы назвали этот блок?

Question

[Genri_Rus]

Вот пример:

<div class="catalog-right__block">
                   // тут нужна обертка, кукую вы бы посоветовали сделать ?
                    <h1 class="catalog-title"></h1>
                    //
                <div class="catalog-products">
                    <div class="catalog-products__card">
                    </div>
                </div>
            </div>

Мне нужно обернуть в div title и view - это 2 иконки справа которые
Какой класс для данных элементов посоветовали бы ?

Answer 1

[VicTHOR]

<div class="catalog-right__block">
меня вот это смущает, смахивает на натягивание БЭМа туда, куда не надо.
А с блоком, внутри которого заголовок и иконки, все элементарно

<div class="catalog-title">
    <h1 class="catalog-title__header"></h1>
    <svg class="catalog-title__menu"></svg>
    <svg class="catalog-title__icon"></svg> <!-- хз на что вторая иконка похожа -->
</div>
<!-- названия блока и элементов примерные -->

Comments

[Genri_Rus]

Спасибо, но

<svg class="catalog-title__menu"></svg>
<svg class="catalog-title__icon"></svg>

Это вид отображение карточек у товаров, а menu и icon это просто пример ?

Есть левый сайдбар с фильтрами:
<div class="catalog-left__block"></div>
Есть правый сайдбар с товарами:
<div class="catalog-right__block"></div>

Брал пример с этого сайта: https://www.dns-shop.ru/catalog/17a8a01d16404e77/s...
А как по-вашему вы бы разделили левую и правую часть ?

[VicTHOR]

Genri_Rus,

а menu и icon это просто пример ?

да.

А как по-вашему вы бы разделили левую и правую части ?

<aside> и <section>
если разделять классами, то это просто классы аля <aside class="filters"> и <section class="catalog">

[Genri_Rus]

VicTHOR, я об этом думал, но для ie8-9 придется полифилы подключать ?

[VicTHOR]

Genri_Rus, я бы прогонял через какой-нибудь пакет таском для такой задачи

[Genri_Rus]

VicTHOR, вот как тут лучше можно сделать ?

<div class="catalog-main">
        <div class="catalog-breadcrumbs">
            <div class="container">
                <div class="breadcrumbs">
                    <ul class="row breadcrumbs-list">
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Оджеда и Обувь</a></li>
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Для мужчин</a></li>
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Красовки и кеды</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="catalog-wrapper">
            <div class="catalog-left__block">
                <div class="catalog-filter">
                    <div class="filter">
                        
                    </div>
                </div>
            </div>
            <div class="catalog-right__block">
                <div class="catalog-products">
                    
                    <h1 class="catalog-products__title"></h1>
                    <div class="catalog-products__card">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

[VicTHOR]

Genri_Rus,

<div class="catalog-main">
<!-- как-то много оберток -->
        <div class="catalog-breadcrumbs">
            <div class="container">
                <div class="breadcrumbs">
                    <ul class="row breadcrumbs-list">
<!-- здесь явно что-то лишнее -->
                        <li class="breadcrumbs-list__item"><a href="#">Оджеда и Обувь</a></li>
                        <li class="breadcrumbs-list__item"><a href="#">Для мужчин</a></li>
                        <li class="breadcrumbs-list__item"><a href="#">Красовки и кеды</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="catalog-wrapper">
<!-- зачем фильтрам 2 обертки? разве что верстка на бутстраповских маржинах и надо бекграунд покрасить -->
                <div class="catalog-filter">
                    <div class="catalog-filter__item">
                        
                    </div>
                    <div class="catalog-filter__item">
                        
                    </div>
                </div>
<!-- то же самое, 2 обертки -->
                <div class="catalog-products">
                    
                    <h1 class="catalog-title"></h1>
<!-- а вот для всех карточек наверняка нужно обертка-->
                    <div class="catalog-products">
                        <div class="catalog-product">
                            <img class="catalog-product__img">
                            <div class="catalog-product__price"></div>
                            <button class="catalog-product__link"><a href="">к товару</a></button>
                        </div>
                        <div class="catalog-product">
                            <img class="catalog-product__img">
                            <div class="catalog-product__price"></div>
                            <button class="catalog-product__link"><a href="">к товару</a></button>
                        </div>
                    </div>
                </div>
        </div>
    </div>

[VicTHOR]

Genri_Rus, вот в посте инициализируют html5 теги для ie https://habr.com/ru/post/142075/

[Genri_Rus]

VicTHOR, спасибо большое !

[Genri_Rus]

VicTHOR, а так можно ?

<aside class="filters"> и <div class="catalog">

[Genri_Rus]

VicTHOR, и вот так правильно будет ?

<h1 class="catalog-title">Товары для праздников <span class="catalog-title__quantity">35 товаров</span></h1>

[Genri_Rus]

VicTHOR, просто количество товаров для title получается не очень ?
Лучше отдельным блоком ?

[Genri_Rus]

VicTHOR, так будет правильно ?

<div class="catalog-main">
        <div class="catalog-breadcrumbs">
            <div class="container">
                <div class="breadcrumbs">
                    <ul class="row breadcrumbs-list">
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Оджеда и Обувь</a></li>
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Для мужчин</a></li>
                        <li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Красовки и кеды</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="catalog-wrapper">
            <aside class="catalog-filter">
                <div class="catalog-filter__item">
                    
                </div>
            </aside>
            <div class="catalog-products">
                <div class="catalog-header">
                    <h1 class="catalog-title">Товары для праздников <span class="catalog-title__quantity">35 товаров</span></h1>
                </div>
                
                <div class="catalog-products__inner">
                    <div class="catalog-product">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

[VicTHOR]

<h1 class="catalog-title">Товары для праздников <span class="catalog-title__quantity">35 товаров</span></h1>

span внутри заголовка? это вобще законно?) рядом поставь..

<aside class="filters"> и <div class="catalog">а почему не section тогда? в любом случае, можно

<li class="breadcrumbs-list__item"><a href="#" class="breadcrumbs-list__link">Оджеда и Обувь</a></li>

это же одна строка и всегда одна ссылка, неужели одним классом не обойтись? По мне это не по БЭМ, хотя не критично. Но я бы подумал о разбавлении каскадом, общий класс всем внутрисписковым ссылкам, либо класс только ссылкам и сверстать без классов у li, например.

[Genri_Rus]

VicTHOR, спасибо за ответ

Просто если я не задам класс ссылке, то не смогу поменять цвета и если нужно будет сделать ей блочность ?

[Genri_Rus]

VicTHOR, вот тут сделали span внутри заголовка: https://killarock.github.io/p-o/venevsky/sub-categ...

[VicTHOR]

Genri_Rus, ну вроде можно, валидатор w3c не ругается, SEO оптимизатор, правда, распознал текст как "Доборные элементы кровли123", т.к. пробела там нет, маржином отступ сделали, а страницу с синтаксической ошибкой в заголовке могут в топ и не пустить, стоит учесть этот момент)

Просто если я не задам класс ссылке,

а если не задавать класс <li> ?

Answer 2

[Владислав]

Как вариант catalog-header

Comments

[Genri_Rus]

Т.е. так нормально будет ?

<div class="catalog-header">
    <h1 class=catalog-header__title"></h1>
    <div class="catalog-header__view">
          
    </div>
</div>

[VicTHOR]

Genri_Rus, нет.

<div class="catalog-header">
    <h1 class="catalog-title"></h1>
    <div class="catalog-view">
          <img class="catalog-view__lines"/>
          <img class="catalog-view__blocks"/>
    </div>
</div>