effect_tw
@effect_tw

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

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;
}
  • Вопрос задан
  • 94 просмотра
Пригласить эксперта
Ответы на вопрос 2
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
1-й вариант это SASS, а SASS это уже сборка gulp, а в сборках для удобства весь SCSS может писаться модульно и по разным файлам. В итоге ваш вопрос это просто используйте сборку webpack gulp или иные.
Ответ написан
@Froggyweb
Первый вариант большая специфичность ничем не обоснованная, второй- плохая читаемость
посмотри на БЭМ это наиболее адекватное использование css ну или css in js
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы