Вредные советы по CSS

Все мы знаем, для чего существуют правила

Интернет полон различных туториалов и лайфхаков по работе с CSS. Это безусловно здорово, но что, если взглянуть на таблицы стилей с другой стороны? В этой статье вы найдете приёмы, благодаря которым сможете написать по-настоящему ужасный CSS для вашего сайта. И кто знает, может, это пойдёт вам на пользу!

Комментарии для слабаков

			.Header {
	margin: 10rem 0 3rem 0;
	display: flex;
	height: 36px;
   }
   .Header__title,
   .Header__filters,
   .Header_search {
	display: flex;
	align-items: center;
	height: 100%;
   }
   .Header__title {
	display: flex;
   }
   .Header__title__logo {
	width: 22px;
	align-self: center;
   }
   .Header__title__head {
	font-weight: normal;
	color: #212121;
	margin: 0 0 0 1.2rem;
   }

   .rt-thread {
	font-weight: bold;
	color: #212121;
	font-size: 0.9rem;
	paddling: 1.6rem 0;
	background-color: #eeeeee;
   }
   .rt-tbody {
	font-size: 0.9rem;
	color: #212121;
   }
   .rt-tbody > div {
	paddling: 1.6rem 0;
	text-align: center;
	border: 0;
   }
   .rt-body >div:nth-child(2n) {
	background-color: #eeeeee;
   }
   .ReactTable .rt-thread.-header {
	box-shadow: initial;
   }
   ReactTable .rt-noData {
	z-index: 0;
   }

   .ReactTable .-pagination {
	padding: 2rem;
	box-shadow: initial;
	border: 0;
   }
   .ReactTable .-pagination .-previous,
   .ReactTable .-pagination .-next {
	flex: 0 1 100px;
	order: 2;
   }
   .ReactTable .-pagination .-previous{
	order: 1;
	margin: 0 1rem 0 0;
	margin-left: auto;
   }
   .ReactTable .-pagination .-center {
	flex: 0 1 auto;
   }

   .ReactTable .-pagination .-btn {
	background: transparent;
	border: 1px solid rgba(121,121,121,0.2);
   }
   .ReactTable .-pagination .-btn:not(:disabled):hover {
	background: transparent;
	box-shadow: 0 2px 6px 0 #bdbdbd;
	color: inherit;
   }

   .Transactions--action {
	background: #2b48e7;
	padding: 0.5rem;
	color: rgba(255.255.255.0.9);
	font-size: 0.8rem;
	border-radius: 5px;
   }
   .Header__filters {
	margin: 0 auto;
   }
		

Мы все это знаем. Вы настолько умны, что остальные и рядом не стоят. И пускай CSS далеко не самый выразительный язык, вы можете по глюкам в браузере попробовать понять, где скрываются баги, пофиксить их и считать, что и через пару недель вы разберетесь в том, что сделали. Умно, не правда ли?

Но оставьте гордость в стороне и лучше сохраните нервы себе и коллегам. Если вы используете какую-либо неочевидную в мелочах технологию, просто пофиксили съехавшую шапку или что-то подобное, будьте добры оставить комментарий!

Страна комбинированных селекторов

			div > nav > ul > li > a {
	color: #1200FF;
   }
		

О да! Вы только что научились CSS и готовы покорять новые вершины. Время поиграть мышцами!..

Придержите коней. Выборки со слишком большим количеством CSS-селекторов только усложнят поддержку оформления вашего сайта. Всё очень сильно завязано на структуре HTML-кода. Даже при мельчайших изменениях разметки вам придётся править и таблицы стилей. Не самая лёгкая часть работы. Просто добавьте класс к каждому элементу!

Даже если вам нужно определить селекторы для нескольких классов, старайтесь делать это максимально просто.

Производительность? Да кому она нужна!

			/*
	по-вашему, одно и то же ?
*/
   body *{
	font-size: 12px;
   }

   *{
	font-size: 12px;
   }

/*
	в первом случае ненужная проверка
*/
		

Да-да, вам плевать на производительность. И на сам проект. А если нет, вы бы не стали бесить пользователей этими ужасными селекторами.

Но постойте! Компьютеры стали быстрее, и браузеры оптимизируются с каждой новой версией. Как бы то ни было, всегда стоит использовать простые селекторы и понимать, как браузер ищет ваши селекторы по всей DOM.

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

Что касается примера выше, браузер сопоставит все элементы (*) и проверит, есть ли дочерние у body.

			body * {
  ... 
}
		

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

Я не могу в имена объектов, так что не парюсь

В программировании есть только две трудности. Придумывание имён для объектов и…

Наверняка вам знакомы эти слова. Придумывать названия бывает трудно, но это не значит, что вы вообще не должны этим заниматься или наоборот всё зашифровывать.

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

			.u {
        font-size: 60rem;
}
		

А что насчёт мегаспецифичных имён?

			.former-black-now-red-paragraph {
        color: red;
}
		

Они ничем не лучше. В то время как такое имя может дать чёткое представление об объекте, в будущем этот класс будет неюзабелен. Если вам просто нужно выделить абзац красным, такое имя будет просто бесполезным.

Подходите к этому делу с умом.

Говорят, классы это круто?

			<h1 class="font-light lowercase red-text margin-top-lage no-small-padding">
	Обожаю классы. Используйте их везде.
</h1>
		

Классы это круто, и все это знают. Но, как известно, всё хорошо в меру.

Видите ли, если несколько классов чаще всего будут использоваться вместе, лучше объединить их в один класс. Когда именно вы объедините их, решать вам. Но если вы пишете атомарную библиотеку, вам может это пригодиться. При написании больших приложений лучше всего группировать классы по назначению, вместо того, чтобы создавать кучу классов для каждого элемента.

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

Только чистый CSS, никаких препроцессоров

Вы за чистый CSS, ваш коллега за чистый CSS, все за чистый CSS. Давайте расставим все точки над “i” и разберёмся в сути конфликта.

Определённо, в некоторых случаях нет ничего лучше чистого CSS! Например, если вы не используете CSS-in-JS в своём React-приложении, можно вообще обойтись чистым CSS. Как бы то ни было, если вы пишете крупное приложение с кучей таблиц «ванильного» CSS, использование препроцессора поможет сделать процесс разработки более интересным, а процесс поддержки таблиц стилей — легче.

Опять же, это не значит, что препроцессоры нужно использовать всё время. Просто не отметайте такой вариант!

Тут очень важный стиль

			.this-didnt-seem-to-work-before-now {
	font-size: 12px !important;
   }
		

Вы ненавидите CSS, вечно с ним одни проблемы. Что же делать? Использовать кучу !important для каждого стиля, если нужно переопределить любой другой!

И хотя это звучит здорово, постоянное использование правила !important превратит дальнейшую разработку и поддержку в кошмар. Так что при следующем использовании этого правила убедитесь, что вами не движет лень.

CSS не так уж и плох, примите это.

Рекомендуем подписаться хотя бы на один из Telegram-каналов по веб-разработке, чтобы держать руку на пульсе. Ну а для тех, кому важен качественный фронтенд, но при этом сложно удержать всё в голове, рекомендуем:

• Шпаргалки по HTML и CSS
• Шпаргалки для веб-разработчика