gatilin222 20 ноя 2015 в 10:45

Организация кнопок на сайте с помощью Sass

4 мин

19K

CSS*HTML*Веб-разработка*

Из песочницы

Комментарии 34

kvaps 20 ноя 2015 в 11:24

Что-то шрифт кнопок на картинке плывет, сначала попробовал глаза протереть, нет, правда плывет…

kvaps 20 ноя 2015 в 11:30

Статья кстати классная, спасибо. Не знал что такое на css можно.

DeXPeriX 20 ноя 2015 в 11:41

Это же не CSS, а один из препроцессоров — SASS. После компиляции из SASS получается CSS.
Смысл лично мне не очень понятен. В SASS есть примеси, переменные. Их надо использовать. Что ещё можно вынести из статьи?

gatilin222 20 ноя 2015 в 14:06

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

asci 20 ноя 2015 в 11:40

вы же знаете что `butt` по-английски значит, правда?)
А вообще спасибо, сам над чем-то похожим думаем в проекте. Но пока решили сделать несколько базовых миксинов и просто передавать в них цвета

gatilin222 20 ноя 2015 в 13:23

Я не знал, если честно, довольно-таки смешно получается)

Metaller 20 ноя 2015 в 11:50

Хорошо бы вам подучиться нормальному стилю кода или хотя бы использовать IDE с автоформатированием. В свойствах после двоеточего пробел то есть, то нет, вместо табуляции используйте 4 пробела, оступы огромные. несколько extend можно объединять в одной строке @extend .foo, .bar.

Откуда такие размеры и зачем тут rem если везде px width: 186rem; margin: 20rem auto;? По умолчанию 1rem = 16px.

Эти же классы нельзя будет применить на <button>, будут дефолтные бордеры.

Маленький лайфхак transition:all .3s ease; можно заменить на transition: .3s ease;, но если вы меняете только одно свойство, то лучше указать его явно transition: background-color .3s ease; чтобы избежать ненужных анимаций.

Ну и последнее в этом занудном комментарии — сокращать имя класса button до butt странно, коллеги не поймут (butt — анг. задница), общепринято btn.

Metaller 20 ноя 2015 в 13:21

А еще у вас в классах смесь теплого и мягкого. Если это класс size, зачем там же переопределяется font-size, font-family, text-align, display. Если это цвет, зачем там переопределяется transition. Вынесите все общие для кнопок свойства в общие, и расширяйте для каждой кнопки.

gatilin222 20 ноя 2015 в 13:31

Мне и моим коллегами удобнее делать 2 тихих класса)

Ag47 20 ноя 2015 в 13:43

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

Если он везде пристуствует его можно вынести в отдельный тихий класс %btn-default и extend делать либо в нужных классах кнопок, либо в сами тихие классы им расширить. Хотя, конечно, стоило просто завести класс btn c свойствами по-умолчанию, не стоит слишком увлекаться extend'ами.

gatilin222 20 ноя 2015 в 13:59

Вы правы, нужно все загонять в переменные, но для этой статьи я решил немного упростить)
А так все зависит от конкретного проекта, здесь описаны основные моменты

Ag47 20 ноя 2015 в 14:02

Тогда лучше было выкинуть совсем не относящиеся к делу стили=)

gatilin222 20 ноя 2015 в 14:04

Наверное так и надо было сделать, не бейте сильно — это первый опыт написания чего-то осмысленного)

Glivera 20 ноя 2015 в 19:58

В данном примере описана система которая обычно используется на больших проектах. Размер кнопки подразумевает подкласс объекта который включает в себя общие свойства для нескольких кнопок. По сути каждый «класс size» это дефолтное состояние для набора кнопок с определенной высотой. Вся система построена на том что бы иметь только один класс в HTML для привязки всех стилей и не завязываться на модификаторы.

faiwer 20 ноя 2015 в 13:27

вместо табуляции используйте 4 пробела, оступы огромные

О_о, очередной tabs-vs-spaces?

Metaller 20 ноя 2015 в 13:30

Выше наглядный пример, далеко ходить не надо, по моему мнению тут все очевидно.

faiwer 20 ноя 2015 в 13:31

Наглядный пример чего? Пример default-го tabSize-а в браузере? Вы серьёзно?

Metaller 20 ноя 2015 в 13:33

Как один из кейсов. Дефолтный tabSize в браузере у 99% пользователей. Код выше с такими отступами выглядит неаккуратно. Давайте не будем начинать?

PS И кстати при чем тут tabSize браузера, стили для кода — это CSS хабра.

faiwer 20 ноя 2015 в 13:38

Дык, какое отношение имеет дефолтный tabSize в браузере к написанию CSS-кода? Вы выше даёте советы использовать вместо табов пробелы… Я могу точно также рекомендовать всем использовать пробелы, вместо табов. НО!

Зачем вы (не конкретно вы, а апологеты пробелов) из раза в раз тащите всю эту вкусовщину на хабр? Вам этого мало?

gatilin222 20 ноя 2015 в 13:46

Соглашусь с вами, код действительно выглядит не очень аккуратно в моей статье, но мне лень переводить табы в пробелы)

gatilin222 20 ноя 2015 в 13:47

Ответил выше)

gatilin222 20 ноя 2015 в 13:30

Вы правы, в оформлении кода есть косяки, которые образовались во время переноса из редактора в статью).
Надо бы поменять rem на px(где-то изменил, а где-то нет).
transition обычно определяю в тихом классе, для статьи переписал.У меня на проектах 1rem = 10px.
Видимо коллеги находятся на моем уровне грамотности и понимают, что butt — это кнопка, хотя и вправду получается смешно)

НЛО прилетело и опубликовало эту надпись здесь

lifecom 20 ноя 2015 в 13:22

Очень удобный велосипед!

Pilat 20 ноя 2015 в 13:49

Я как не-верстальщик понял только одно: надо пользоваться стандартными кнопками Bootstrap и ничего не трогать :)

gatilin222 20 ноя 2015 в 14:02

Если это работает на ваших проектах, совершенно верно! Просто на моих проектах css-фреймворки не едут)

firya 20 ноя 2015 в 15:00

Следующим шагом предлагаю посмотреть в сторону БЭМ и не бояться написать для кнопки лишний класс.
Можно сократить итоговый css раза в полтора использовав для кнопки классы размера, и миксины просто станут не нужны.

gatilin222 20 ноя 2015 в 17:38

У кнопки делаю один основной класс — мне так удобно, не люблю много презентационных классов)

firya 20 ноя 2015 в 18:00

Вы итак используется модификационные классы для цвета, чем вам помешает еще один класс для размера?
Из плюсов:

почти в 3 раза меньше стилей
такой код легче сопровождать и поддерживать

и выглядеть это будет примерно так:

Код (656 символов стилей)

Код на вскидку, не проверял идентичность

<a href="#" class="btn btn-blue">Инфраструктура</a>
<a href="#" class="btn btn-red">Квартиры</a>
<a href="#" class="btn btn-yellow">Галерея</a>
<a href="#" class="btn btn-transparent">Архив новостей</a>
<a href="#" class="btn btn-transparent btn-xl">Показать все новости</a>

.btn {
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
	text-decoration: none;
	background: transparent;
	transition: background .3s ease;

	&.btn-blue {
		background-color: #80B1D3;

		&:hover {
			background: #80B1D3;
			color: #fff;
		}
	}

	&.btn-red {
		background-color: #D46C6B;

		&:hover {
			background: #D46C6B;
			color: #fff;
		}
	}

	&.btn-yellow {
		background-color: #F3B562;

		&:hover {
			background: #D46C6B;
			color: #fff;
		}
	}

	&.btn-transparent {
		box-shadow: inset 0 0 0 2rem $gray_4;
	}

	&.btn-xl {
		height: 70px;
		line-height: 70px;
		font-size: 16px;
	}
}

Ваш код, для сравнения (1458 символов стилей)

.about_butt {
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;

	&.blue_mod {
		background: $blue_1;
		color: $white;
		transition: all .3s ease;

		&:hover, &:focus {
			text-decoration: none;
		}

		&:hover {
			background: lighten($blue_1, 5%);
		}
	}
	&.red_mod {
		background: $red_2;
		color: $white;
		transition: all .3s ease;

		&:hover, &:focus {
			text-decoration: none;
		}

		&:hover {
			background: lighten($red_2, 5%);
		}
	}
	&.yellow_mod {
		background: $yellow_1;
		color: $white;
		transition: all .3s ease;

		&:hover, &:focus {
			text-decoration: none;
		}

		&:hover {
			background: lighten($yellow_1, 5%);
		}
	}
}
.news_more_butt {
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
	color: $black_2;
	background: transparent;
	box-shadow: inset 0 0 0 2rem $gray_4;
	transition: all .3s ease;
	width: 186px;
	margin: 20px auto;

	&:hover, &:focus {
		text-decoration: none;
	}

	&:hover {
		background: $gray_4;
		color: $white;
	}
}
.show_news_butt {
	display: block;
	height:70px;
	line-height: 70px;
	text-align: center;
	font-family: 'intro';
	font-size: 16px;
	color: $black_2;
	background: transparent;
	box-shadow: inset 0 0 0 2rem $gray_4;
	transition: all .3s ease;
	display: inline-block;

	&:hover, &:focus {
		text-decoration: none;
	}

	&:hover {
		background: $gray_4;
		color: $white;
	}
}

gatilin222 20 ноя 2015 в 20:21

Прочитайте чуть выше комментарий Glivera

Glivera 23 янв 2017 в 15:20

В данном случае БЭМ будет шагом назад так как есть реальный пример после которого и родилась эта система. Представьте себе ситуацию когда у вас на проекте больше ста модификаций кнопок которые разбросаны по всему проекту и при каждом редизайне, который происходит раз в месяц-два, вам приходится пробегать по 20-30 партиалам что бы заменить классы на кнопках на новые. Или конечно есть выбор сделать в определенном случае цвет кнопки для класса "...red..." зеленым))) Так что после такого я предпочитаю отдавать все что связано с кастомизиуемыми повторяющимися элементами на откуп sass с его возможностями… Но я не навязываю свою точку зрения)

PeoneEr 20 ноя 2015 в 17:22

А зачем Вы каждой кнопке говорите

&:hover, &:focus {
text-decoration: none;
}

?
Задайте это свойство основному классу, а если вдруг потребуется — лучше его изменить для одного стиля, чем тащить везде.

gatilin222 20 ноя 2015 в 17:37

один раз написал его в екстенде — и не парюсь, зачем мне его постоянно писать? А переопределить всегда смогу у основного класса

arkadovv 22 ноя 2015 в 19:15

Надо посмотреть на БЭМ и CSSComb

Зарегистрируйтесь на Хабре, чтобы оставить комментарий