Какой формат записи стилей более актуальный, универсальный?

Question

[Vann Damm]

1 Формат - дерево(классы в классах) 1. Читаемость(спорно) 2.Удобно для добавления стилей под мобайл(добаить родителю класс mobile и все переписать под мобилку) спорно.

.gallery {
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;

  .item {
    cursor: pointer;
    width: 50%;
    padding: 1px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 100%;

    .itemInner {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
    }

    .caption {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: var(--scroll-track-bg);
      transition: top 0.2s, padding 0.2s;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 30px 30px var(--scroll-track-bg);

      .captionTitle {
        color: var(--main-opposite);
        font-size: 18px;
        line-height: 21px;
      }
    }

    &:hover {
      .caption {
        top: 85%;
        padding-bottom: 20px;
      }
    }
  }
}

2 Формат - все отдельно

.TextareaBlockTextareaElemWrapper {
  padding: 10px 10px;
}
.TextareaBlockTextarea {
  width: 100%;
  border: none;
  background: $bg_color_body_task-editor_input;
  overflow: hidden;
  resize: none;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  font-size: 14px;
}
.TextareaBlockExtraFields {
  height: min-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ExtraFieldsLeftPart {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: min-content;
  grid-template-rows: min-content;
  grid-column-gap: 5px;
  padding: 10px 10px;
}
.ExtraFieldsRightPart {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 10px;
  align-items: center;
}

Comments

[Ankhena]

Первый вариант даст большую вложенность. Обычно лишнюю. В большинстве случаев двойной за глаза и за уши.

2.Удобно для добавления стилей под мобайл(добаить родителю класс mobile и все переписать под мобилку) спорно.

Сомнительно.
Под адаптивность достигается media условиями.
Добавление классов типа desktop-none и тому подобных, приводит чаще всего приводит к каше и лишним буквам. Некоторых еще и к !important.

TextareaBlockTextareaElemWrapper

Если я правильно понимаю суть, то это сокращается до TextareasElemWrapper

ExtraFieldsLeftPart

Совсем не люблю классы с указанием лево-право, цветов и т.д.
Когда на мобилке блоки выстроятся в столбик, то который из них будет левым, а который правым?

И всё таки нельзя не вспомнить про БЭМ, именно как методологию именования классов. Никто не заставляет использовать БЭМ по классике, есть разные вариации или можно использовать свой вариант.

[Vann Damm]

Ankhena, такой формат записи можно использовать? styleModule["search-form__button"]

[Ankhena]

Vann Damm, да, прекрасно

Answer 1

[Lord_Dantes]

1-й вариант это SASS, а SASS это уже сборка gulp, а в сборках для удобства весь SCSS может писаться модульно и по разным файлам. В итоге ваш вопрос это просто используйте сборку webpack gulp или иные.

Answer 2

[Froggyweb]

Первый вариант большая специфичность ничем не обоснованная, второй- плохая читаемость
посмотри на БЭМ это наиболее адекватное использование css ну или css in js

Comments

[Vann Damm]

при модульном scss , такую запись использовать если по Бэму делать? style["task_container__titles_block"]?

[Froggyweb]

Vann Damm, на любителя.
я делаю task-container__titles-block
на примере твой галереи

.gallery 
.gallery__item
.gallery__caption
.gallery__caption-title.title

[Vann Damm]

Froggyweb, Мой второй вариант) . Да , это на любителя. Я имел в виду как задавать стили в самом .jsx

[Froggyweb]

h1
p
li
и тд
т.е. возвращение к истокам. на выходе все будет инкапсулировано