Как грамотно составить класс container?

Question

[thebigbang]

Хотел узнать, как сейчас выглядит хороший класс container?

.container {
	margin: 0 auto;
	padding: 0 10px;
	
	@media(min-width: 576px) {
		width: 536px;
	}
	@media(min-width:768px) {
		width: 728px;
	}
	@media(min-width: 992px) {
		width: 952px;
	}
	@media(min-width: 1176px) {
		width: 1135px;
	}
}

Хороший ли это вариант чтобы использовать для блоков страницы?

Comments

[xdevelx]

Вы практически пересоздали bootstrap container https://github.com/twbs/bootstrap/blob/v4.5.0/dist...

Answer 1

[approximate solution]

Хотел узнать, как сейчас выглядит хороший класс container?

Он априори не может быть "хорошим". Класс .container - выполняет самую простую, базовую функцию - удерживать контент. То что вы скинули выше, брейкпоинты - тоже не могут быть "хорошими", стандартизированными- могут, хорошими? - мы же не в детском саду. Для каждого сайта есть свой порог брейкпоинтов, все зависит от того сколько контента у вас в данный момент на экране. Если контейнер "узкий", значит весь ваш UI\UX не продуман и он будет слипшийся. Смотрите на свой дизайн, ничего не мешает вам отступать от стандартных брейкпоинтов, расширять контейнер в угоду контенту, либо сжимать контейнер убирая ненужный контент.

Answer 2

[WapSter]

А почему бы не резиновым его делать?

// scss
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 25px;
  @media (max-width: 992px) {
    padding: 0 20px;
  }
  @media (max-width: 600px) {
    padding: 0 15px;
  }
  @media (max-width: 380px) {
    padding: 0 10px;
  }
}

Не обязательно все тырить у бутстрапа - это не эталон верстки, а лишь инструмент.
Ну или сначала посмотреть на макет, а потом решить как лучше делать именно для текущего макета, как заметил approximate solution, зачем себя в какие-то рамки вообще загонять хорошо или плохо.

Answer 3

[Арсений Матыцин]

Параметры контейнера целиком и полностью зависят от макета проекта. От его breakpoint-ов, сетки и отступов. К примеру, с какого ляда у него отступы по 10px? От чего это зависит? В бутстрапе и иже есть хоть .row, который как раз отыгрывает этот отступ. А тут он зачем? Чем он обоснован? Есть ли эта логика в макете?

Порой дешевле сделать почти как WapSter, но проще:

.container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

Все попытки сделать универсальное обречены на провал. Все, чему надо следовать — здравому смыслу и макету.

Answer 4

[Данил Флигинский]

А почему нет? Лично я использую следующий код:

.container {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
}

@media (max-width: 1200px){
    .container{
        max-width: 960px;
    }
}

@media (max-width: 991px){
    .container{
        max-width: 720px;
    }
}

@media (max-width: 767px){
    .container{
        max-width: 540px;
    }
}

@media (max-width: 575px){
    .container{
        max-width: auto;
    }
}