Компоненты CSS и адаптивное соединение - лучшие практики? - PullRequest
Новая
       11

Компоненты CSS и адаптивное соединение - лучшие практики?

0 голосов
/ 07 июня 2018

Скажем, я создаю компонент, например таблицу, которую я хочу использовать на разных страницах.Содержимое и количество столбцов в таблице будут варьироваться от страницы к странице, но внешний вид и внешний вид должны быть одинаковыми. 

.my-table {
    background-color: ... etc
    color: ... etc
}

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

Т.е.Я могу хотеть скрыть столбцы 3 и 5 этой таблицы при просмотре на мобильном устройстве, но на другой странице может быть только 3 столбца, и я не хочу, чтобы столбец 3 был скрыт на этой странице.Какую практику лучше использовать в этом случае?Следует ли отделить адаптивную логику от стилей компонентов?

Другой пример - большинство прочитанных мной руководств по CSS рекомендуют делать что-то вроде этого: 

.layout-columns-2 {
     float: left;
     width: 50%;
}

.layout-columns-4 {
     float: left;
     width: 25%;
}

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

Скажем, например, на одной странице вы хотите разбить плавающий элемент определенного div, когда ширина равна 600px, чтобы столбцы располагались вертикально,Но в другом разделе страницы вы хотите, чтобы плавающий разрывался на 800px.Каков наилучший подход к этому?

1 Ответ

0 голосов
/ 07 июня 2018

Я бы предложил создать частичку Sass с некоторыми табличными миксинами, которые можно применять по мере необходимости.Это позволит вам отделить ваши таблицы «модулей» от ваших реальных таблиц.Разъединение, как правило, хорошо, так как позволяет вам добавлять и изменять стили с большей легкостью и согласованностью.

Поскольку вы хотите, чтобы ваши точки останова менялись от таблицы к таблице, я бы оставил стили таблицы как «mobile-first»."по умолчанию, и настраивайте их по очереди.

_tables.scss: 

table {
  // Global, mobile-first styles go here
}

@mixin columns-2() {
  td {
    float: left;
    width: 50%;
  }
}

@mixin columns-4() {
  td {
    float: left;
    width: 25%;
  }
}

// Function to return a max breakpoint (1px less)
@function max-break($size) {
  @return $size - .0625em;
}

Используя свой партиал, вы можете применять свои миксины какподходит для любой конкретной таблицы ...

special-page.scss: 

@import 'tables';

.my-table {
  // Hide columns 2/4 below 800px
  @media (max-width: max-break(50em)) {
    td:nth-child(2),
    td:nth-child(4) {
      display: none;
    }
  }

  // Use 2 columns at 600px
  @media (min-width: 37.5em) {
    @include columns-2();
  }

  // Use 4 columns at 600px    
  @media (min-width: 50em) {
    @include columns-4();
  }
}
...