Анатолий Димов

// [gBROWSER] BROWSER_SYNC
function BROWSER_SYNC(none) {
	gBROWSER.init({
		server: { baseDir: DIR_APP, index: '/home.html' },
		tunnel: 'null',  // ваш сайт в интернете по адресу - null.locl.lt
		notify: false,
		ui: false
	});
	return none();
}

чтоб json показывался вот так

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader

Вообще, разделить на слои всё, это есть хорошо?

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz

2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...

Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.

Иногда к именам блоков могут добавляться различные префиксы.

Часто слышу, как разработчики говорят «БЭМ не нужен, ведь есть CSS-модули». Это не так.

Корень этого заблуждения кроется в том, что люди воспринимают БЭМ как CSS-методологию. На самом деле БЭМ это набор универсальных принципов, которые можно применять независимо от используемых технологий, будь то CSS, Sass, HTML, JavaScript или React. БЭМ решает множество задач, в число которых входят именование CSS-классов, подход к разделению интерфейса на независимые части и изоляция стилей для этих независимых частей.

CSS-модули это инструмент, который решает только проблему изоляции стилей. Все остальные проблемы остаются нерешёнными: вам всё ещё нужны какие-то правила для разделения интерфейса на независимые части и всё ещё нужно придумывать названия классов. Поэтому CSS-модули можно и нужно применять вместе с БЭМом.

Эволюция выглядит так:

/* Классический БЭМ с длинными именами классов для обеспечения изоляции */

.shop-cart-button {}
.shop-cart-button_size_small {}
.shop-cart-button_size_large {}


/* CSS-модули с неограниченной свободой творчества в именах классов */

.button {}
.small {}
.large {}
/* или */
.button {}
.is-small {}
.is-large {}
/* или */
.button {}
.size-small {}
.size-large {}


/* БЭМ и CSS-модули */

.button {}
.button_size_small {}
.button_size_large {}

Сразу отвечу на вопрос «а чем плох пример с классами .button, .small и .large?». Он плох тем, что классы .small и .large сами по себе не несут информации о том, к чему они относятся. Нельзя понять, стилизуют ли они отдельный элемент или описывают состояние существующего элемента. Также такие названия классов рано или поздно снова приведут вас к проблеме уникальности имён. Например, вы пишете стили для модального окна. Вам нужно стилизовать полупрозрачный оверлей поверх страницы и само модальное окно. Оба этих элемента могут быть в двух состояниях: виден или скрыт. Кажется, что класс .visible отлично подходит, но проблема в том, что для оверлея и для окна этот класс должен содержать разные стили. Можно придумать костыль в виде селекторов .overlay.visible и .window.visible, но это именно костыль, потому что вы увеличиваете специфичность. С БЭМом всё просто и без ненужного роста специфичности: .overlay_visible и .window_visible.

<?php
/*
* Plugin Name: MOD
* Description: DEV
*/

/**
* Создание произвольного типа записи
* - register_post_types()
*/
add_action('init', 'register_post_types', 0);
function register_post_types()
{
// тип записи
    register_post_type('mod_services', array(
        'labels' => array('name' => __('Товары')),
        'public' => true,
        'show_in_menu' => true,
        'show_in_rest' => null,
        'rest_base' => null,
        'hierarchical' => false,
        'supports' => array('title', 'editor', 'thumbnail'),
        'has_archive' => true,
        'rewrite' => array('slug' => 'catalog', 'with_front' => false),
        'query_var' => true,
    ));
// таксономия
    register_taxonomy('mod_services_catalog', array('mod_services'), array(
        'labels' => array('name' => __('Категории')),
        'public' => true,
        'hierarchical' => true,
        'rewrite' => array('slug' => 'catalog', 'hierarchical' => true, 'with_front' => false),
        'capabilities' => array(),
        'meta_box_cb' => null,
        'show_admin_column' => false,
        'show_in_rest' => null,
        'rest_base' => null,
    ));
}

/**
* Изменяем структуру ссылок записей
* - products_permalink()
*/
add_filter('post_type_link', 'products_permalink', 1, 2);
function products_permalink($permalink, $post)
{
    if (strpos($permalink, 'catalog') === false) return $permalink;
    $terms = get_the_terms($post, 'mod_services_catalog');
    if (!is_wp_error($terms) && !empty($terms) && is_object($terms[0])) {
        $taxonomy_slug = get_term_parents_list($terms[0]->term_id, 'mod_services_catalog', array(
            'separator' => '/', 'format' => 'slug', 'link' => false, 'inclusive' => true
        ));
        $taxonomy_slug = trim($taxonomy_slug, '/');
    } else {
        $taxonomy_slug = 'categories';
    }
    return str_replace('catalog', 'catalog/' . $taxonomy_slug, $permalink);
}

/**
* Создаём новые правила перезаписи +
* - taxonomy_slug_rewrite()
*/
add_filter('generate_rewrite_rules', 'taxonomy_slug_rewrite');
function taxonomy_slug_rewrite($wp_rewrite)
{
    $rules = array();
    $taxonomies = get_terms(array(
        'taxonomy' => 'mod_services_catalog', 'hide_empty' => false
    ));
    foreach ($taxonomies as $taxonomy) {
        $taxonomy_slug = get_term_parents_list($taxonomy->term_id, 'mod_services_catalog', array(
            'separator' => '/', 'format' => 'slug', 'link' => false, 'inclusive' => true
        ));
        $rules['^catalog/' . $taxonomy_slug . '?$'] = 'index.php?' . $taxonomy->taxonomy . '=' . $taxonomy->slug;
    }
    $rules['^catalog/([^/]*)/?$'] = 'index.php?mod_services_catalog=$matches[1]';
    $rules['^catalog/(.+?)/page/?([0-9]{1,})/?$'] = 'index.php?mod_services_catalog=$matches[1]&paged=$matches[2]';
    $rules['^catalog/(.+?)/([^/]*)/?$'] = 'index.php?mod_services=$matches[2]';
    $wp_rewrite->rules = $rules + $wp_rewrite->rules;
}

/**
* Обновляем правила перезаписи при создании/удалении/изменении таксономий
* - hc_reset_rewrite_rules()
*/
add_action('created_mod_services_catalog', 'hc_reset_rewrite_rules');
add_action('delete_mod_services_catalog', 'hc_reset_rewrite_rules');
add_action('edited_mod_services_catalog', 'hc_reset_rewrite_rules');
function hc_reset_rewrite_rules()
{
    flush_rewrite_rules();
}