Пособие верстальщика

  • записей
    9
  • комментариев
    0
  • просмотров
    430

1.6 Форматирование стилей. Пособие верстальщика

klierik

70 просмотров

Честно говоря я несколько недель думал стоит ли вообще писать эту статью. Сама тема является лютым холиваром и, по сути, каждый опытный разработчик давно для себя сформировал определённый стандарт форматирования стилей, который, на его взгляд, удобочитаем и лёгок в поддержке.

Я не буду Вас переубеждать.
Более того, если у Вас есть стандарт форматирования стилей, на котором написан не один проект возрастом от 3-5 лет и старше, если код не требовал рефакторинга из-за не грамотной организации стилей, если этот стандарт легко воспринимается и используется новыми сотрудниками — это очень классно. Это значит что Вы прошли богатый путь проб и ошибок и выявили для себя золотую середину. Я искренне за Вас рад!

Но, так как кроме тех, кто умеет создавать внутренний стандарт в компании, есть разработчики, которые этого делат не умеют. Причина этому, скорее всего, — недостаток опыта.

Ниже изложенная мною статья это рекомендации, а не готовое решение которое подходит в 100% случаев. Я никоим образом не хочу Вам навязать свои стандарты, а лишь поделиться тем опытом, который мне достался за более чеим 15 летний опыт в веб-разработке. Я буду искренне Вам благодарен если Вы ознакомитесь с данной статьёй и поделитесь своим виденьем на обсуждаемую тему.

Вот краткий пример, который наглядно описывает обычный блок в проекте:

.block-name {
	// Стили текущего блока

	// Стили всевдо-элементов
	&:before {}
	&:after {}

	// Стили псевдо-классов
	&:first-child {}
	&:last-child {}
	&:hover {}
	
	// @media стили текущего блока

	// Стили составных элементов
	&__title {}

	// Стили дочерних элементов
	.menu-list {
		&__item {}

		.link {}
	}

  	// Стили модификаторов
	&_shown {}
  
	// @media стили иерархии дочерних элементов 
}

Но что бы этот пример не был "сухим", довайте посмотрим на реальный код:

.assets {
	&__title {
		font-size: 56px;
		font-weight: 500;

		padding: 56px 0 68px;

		line-height: 1.14;

		background: #00d6d9;
		color: #ffffff;

		& > .assets__section {
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	&__sub-title {
		font-size: 28px;
		font-weight: 500;

		padding: 45px 0 9px;

		line-height: 1.29;

		background: #f9fafc;

		& > .assets__section {
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	&__section {
		@if $enable-grid-classes {
			@include make-container();
			@include make-container-max-widths();
		}

		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	&__colors {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;

		list-style-type: none;

		.color {
			font-size: 13px;

			margin-bottom: 20px;
			width: 23%;

			border: solid 1px #e5e9ed;
			box-shadow: 3px 3px 5px 0 rgba(42, 43, 51, 0.1);

			&__preview {
				height: 90px;
			}

			&__name {
				font-weight: 600;

				padding: 14px 18px 6px;
			}

			&__hex {
				padding: 0 18px 14px;
			}

			&_gradient {
				width: 100%;
			}
		}
	}
}

Предполагаю с этим наглядным примером многое станет понятнее.

Что же касается форматирования свойств, то я разделил их на 4 группы (каждая разделена пустой строкой для повышения читабельности)

  1. Свойства шрифтов
  2. Блочные свойства
  3. Текстовые свойства
  4. Стилизирующие и остальные свойства

Порядок свойств, как правило, по алфавиту.

ℹ️ Настройки форматирования стилей можно изменить. Про это рассказано в статье  1.4 Создание сборщика проекта. Пособие для верстальщика в разделе 1.4.6 Настройки форматирования стилей CssComb

 

Ниже представлен более сложный пример, из реальной ситуации:

Скрытый текст

.block-filters {
	padding: rem(39px) rem(36px) rem(41px);
	//
	background: #fff;
	border-radius: 6px;

	.block-title {
		font-size: 1.125rem;

		text-align: left;
	}

	.block-content {
		margin: 0;
	}

	.filter {
		margin-top: rem(18px);

		&-title {
			font-size: ($font-size-base * 0.75);

			margin-bottom: rem(6px);

			color: #777e81;
		}

		&-data {
			//
		}

		&-item {
			&:first-child {
				margin-top: rem(20px) !important;
			}

			+ .filter-item {
				margin-top: 0.75rem;
			}
		}

		.form-group {
			margin-bottom: 0;
		}

		&.delimiter {
			padding-top: $line-height-computed;

			border-top: solid 1px #edefef;
		}

		[type="radio"],
		[type="checkbox"] {
			margin-right: 10px;
		}
	}

	.actions {
		margin-top: rem(37px);

		.btn-clear {
			font-size: rem(12px);

			background: none;
			color: #777e81;

			@include media-breakpoint-only(xs) {
				display: none;
			}
		}
	}

	&.filters_tasks {
		.actions {
			margin-top: rem(55px);
		}
	}

	&.filters_services {
		//
	}

	@include media-breakpoint-only(xs) {
		padding: rem(12px) rem(20px);

		.block-title {
			font-size: rem(16px);

			position: relative;

			.icon-collapse {
				font-size: rem(18px);

				position: absolute;
				right: 0;
				top: 0;
				display: block;

				transition: all 200ms ease;
			}

			&.open {
				.icon-collapse {
					transform: rotate(90deg);
				}
			}
		}

		.block-content {
			display: none;
		}
	}

	@include media-breakpoint-up(sm) {
		.block-title {
			.icon-collapse {
				display: none;
			}
		}
	}
}

 

ℹ️ Любите свой код, относитесь к нему надлежащим с уважением. Думайте о том, что его будут читать другие. Постарайтесь создать наиболее простые и комфортные условия для работы с Вашим кодом для любого разработчика в команде. Используйте в именах классов смысловую нагрузку — это сделает код читабельным без комментариев. Не создавайте глубокие цепочки иерархии класов, вместо этого продумывается простые структуры на столько на сколько это будет возможно.

Добра и удачи 🙏



0 комментариев


Рекомендованные комментарии

Нет комментариев для отображения

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас