Предлагаю изменить существующую разметку (css и шаблоны)

Yori 13 Апреля 2022 (ред)

Предлагаю изменить существующую разметку (css и шаблоны), чтобы можно было более проще создавать свои макеты. Количество файлов шаблонов можно значительно уменьшить.

На данный момент у нас есть следующие набор правил:

box-flex-white

.box-flex-white {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--br-box-gray);
  background-color: var(--white);
}

box-white

.box-white (
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--br-box-gray);
  background-color: var(--white);
}

И простой box:

.box {
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

Для другого дизайна мы используем, например:

<div class="box-white bg-violet-50">
<div class="box-flex-white bg-violet-50">

А в основном дизайне есть:

<body class="body-bg-fon">

Что подразумевает серый фон, а значит и белые контейнеры.

С учетом этого, мы можем упростить:

.body-bg-fon .box {
  border: 1px solid var(--br-box-gray);
  background-color: var(--white);
}

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

LibArea CSS

499

+ Читать

4 Ответа

Evg 13 Апреля 2022
Ссылка
Согласен. Это можно улучшить, только наверное так:
```
.body-bg-fon  .box-flex,
.body-bg-fon  .box {
  border: 1px solid var(--br-box-gray);
  background-color: var(--white);
}
```
Если мы хотим описать общий случай (привязаться с фону). Или так, сделать набор цветов:
```
.*** {
  border: 1px solid var(--br-box-gray);
  background-color: var(--white);
}
```
Что может быть более гибким для тех, кто хочет окрасить box по другому.

Давайте попробуем, переведу тогда и на альтернативный синтаксис:
```
    <?php if (***) : ?>
       ...  
    <?php else : ?>
       ...
<?php endif; ?>
```
за одно, чтобы было единообразно.

А если докапываться, то bg-violet-50 подразумевает, что есть ещё, например, bg-violet-100, чего нет. И br-box-gray вот тут:
```
border: 1px solid var(--br-box-gray);
```
Что такое Ym⁹⁴, и для чего бордюр br-, и выходит, что должно быть просто: --gray. И т.д.

С этим можно заниматься бесконечно. Но в результате получится маленькая, гибкая штуковина, которую можно использовать где угодно.

Доп. изменения в css внесены. Альтернативный синтаксис далее… (17.00 13.04.2022)
5
Ответить
1. Yori 13 Апреля 2022
  
  Ссылка
  Наверное, так будет даже лучше. Решил сделать шаблон ещё один, как Яндекс.Клубы и столкнулся с тем, что файлы необходимо размещать много или переопределять шаблоны.
  Ответить

Evg 13 Апреля 2022
Ссылка
Пишу сюда. Расширена страница с примерами (css) в админ-панели. Фото:

Плюс добавлена страница для логов поисковых запросов. Далее надо сделать группировку и выборку по дням и неделям. А пока, так.
4
Ответить
1. German 13 Апреля 2022 (ред.)
  
  Ссылка
  Ошибку нашел. В оповещение пришло: Evg ответил на ваш пост — Сегодня 19:03. Но это не мой пост, только подписан. Разговор идет про эту ветку.
  Ответить