выбор имён классов

[angel12]

Буду рад выслушать ваши советы по теме, ну или ссылки на ресурсы

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

Раньше я для каждого блока указывал свой класс, близкий по теме, например, если речь шла о бизнесе, то я писал - .business. Теперь же думаю сделать так: .sidebar>.box1 .sidebar>.box2 .sidebar>.box3.....content>.box1 .content>.box2 .content>.box3. Одобряете? Что посоветуете, товарищи?

[Justnewone]

у меня схема такая.

1. стараться не привязывать свойства уникальным именам классов элементов, чье отображение типизировано (общий на некое количество элементов бекграунд, цвет, маргин и т.д.).

2. наоборот.

В Вашем случае я поступил бы так.

.sidebar>.box{типизированные классы}

.sidebar>.business {например иконка бизнеса}

и т.д.

<чета-там class="box business">

...

[arez]

Как то так: http://webstandardsdays.ru/2010/12/16/pres/bem.pdf

[Great Rash]

Блин, обыскался эту презентацию, это прям то что мне нужно. В закладки однозначно. Благодарю!

[sytrus]

Как то так: http://webstandardsdays.ru/2010/12/16/pres/bem.pdf

Совершенно верно.

[angel12]

Спасибо

[gerard.m]

Скажите пожалуйста, не очень плохо указывать путь к блок, к примеру, вот так:

.content .sliders .slider1 .item p span {}

Чем больше, тем хуже? но зато сразу видна структура

[Justnewone]

зато сразу видна структура

Поглядите презентацию из поста выше.

[gerard.m]

Смотрел и пробовал реализовать на практике. Для небольших проектов по мне не очень как-то способ.

Вообще, чем больше в css имен классов, тем хуже? это тормозит браузеры?

Кстати, Justnewone, посмотрев презентацию, вы не стали менять свою структуру имён классов? Можно ознакомиться с какой-нибудь вашей простенькой работой, так, для опыта? люблю изучать вёрстку профессионалов

[Justnewone]

как наберете нужное количество постов - стукните в личку.

[psywalker]

как наберете нужное количество постов - стукните в личку.

А мне можно?

[Justnewone]

йес

[psywalker]

йес

спасибыы

[flagreit]

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

[klierik]

спасибыы

а ты что разве в глаза не видел вёрстки на БЭМ? о_О

стукни в аську тогда...

[Justnewone]

хорошо, и все, извините.

[psywalker]

а ты что разве в глаза не видел вёрстки на БЭМ? о_О

стукни в аську тогда...

Да, я ж ещё молод и многого не знаю. Так что спасибы, стукну обязательно вечерком Лёх

[rediskavet]

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

Или на примере каком где его лучше использовать. Мне кажется если использовать эту технику то блока и элемента вполне себе достаточно.

[Justnewone]

Чуть выше писал

.sidebar>.box{типизированные классы}

.sidebar>.business {например иконка бизнеса}

и т.д.

<чета-там class="box business">

business - модификатор, по идее у него должен быть префикс m-

[rash]

как наберете нужное количество постов - стукните в личку.

Будет слишком большой наглостью и мне попросить того же?

Если нет, то покажите, пожалуйста

[angel12]

business - модификатор, по идее у него должен быть префикс m-

Justnewone, а отчего зависит выбор префикса и вообще, зачем он нужен?

немало раз видел такое обозначение, очень стало интересно. Если подумать, что префикс, к примеру, определяют вложенность, то не подходит такая мысль, ибо буковки не по порядку идут. Первый, родитель, к примеру, n_******, последний дочерний эл-т - b_***** Поэтому очень надеюсь, что вы мне разъясните

[Justnewone]

в презентации по ссылке из этой ветки все подробно расписано

[arez]

Для всех у кого есть вопросы

http://video.yandex.ru/users/ya-events/view/14/

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

[klierik]

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

Или на примере каком где его лучше использовать. Мне кажется если использовать эту технику то блока и элемента вполне себе достаточно.

предположим у тебя есть блок - Информер.

на файловой системе он размещается так:

../../framework/b-informer/b-informer.css

Его стили следующие:

/* @group Informer */

	.b-informer {
		position: relative; /* for close button */
		padding: 10px 36px 10px; /* 36px = 10px_padding + 16px_icon + 10px_text-padding */

		background: #def3ca url(icon/icon.png) -100% no-repeat;

		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
		}

		/* text */
		.b-informer__txt {
			font-size: 11px;

			display: table-cell;
			margin: 0;

			vertical-align: middle;
			}
			.b-informer__ttl {  }

	/* regular (default) informer types */
	.b-informer_error { background-position: -166px 0px;  background-color: #fcebbd; }
	.b-informer_info  { background-position: -141px -26px; }
	.b-informer_help  { background-position: -116px -52px; }

	/* informers list */
	.b-informer + .b-informer {
		margin-top: 10px;
		}

/* @end */

Этот информер имеет свои стандартные параметры, но есть он же только большого размера. В таком случае модификатор будет распологатся на файловой системе так:

../../framework/b-informer/_big/b-informer.big.css

а стили модификатора следующим образом:

/* @group Informer > _big */

	.b-informer_big {
		padding-left: 52px; /* 38px = 10px_padding + 32px_icon + 10px_text-padding */
		min-height: 32px;
		}

	/* _big informer types */
	.b-informer_big.b-informer_error { background-position: -74px -78px; }
	.b-informer_big.b-informer_info  { background-position: -32px -120px; }
	.b-informer_big.b-informer_help  { background-position: 10px -162px; }

		/* text */
		.b-informer_big .b-informer__txt {
			font-size: 12px;

			height: 32px;
			}
			.b-informer_big .b-informer__ttl {
				font-size: 13px;

				display: block;
				}

/* @end */

Если, к примеру, модификатор имеет свои стили под ИЕ, то на файловой системе файл стилей под ИЕ размещается тут:

../../framework/b-informer/_big/b-informer.big.ie.css

а сами стили описываются так:

/* @group Informer > _big */

	/* text */
	*+html .b-informer_big .b-informer__txt {
		height: auto;
		margin-top: 6px; /* for vertical-align: middle; emulation with icon */
		}

/* @end */