Как правильно оформить код css?

Question

[freeman0204]

Есть такой код:

.the-team h3 {
				font-family: "OpenSansRegular";
				font-size: 42px;
				color: #4e525d;
				text-align: center;
				margin-bottom: 140px;
			}

				.team h4 {
					font-family: "OpenSansRegular";
					color: #4e525d;
					font-size: 22px;
					margin-bottom: 35px;
				}

					.team span {
						font-family: "OpenSansRegular";
						color: #4e525d;
						font-size: 14px;
					}

Некоторые свойства повторяются. Будет ли правильно написать так:

the-team h3, .team h4, .team span {
font-family: "OpenSansRegular";
color: #4e525d;
}

.the-team h3 {
				font-size: 42px;
				text-align: center;
				margin-bottom: 140px;
			}

				.team h4 {
					font-size: 22px;
					margin-bottom: 35px;
				}

					.team span {
						font-size: 14px;
					}

Какой вариант предпочтительней и элегантней?

И еще вопрос. Есть ли какие то правила как писать стили, в том смысле, сначала например отступы, а потом цвет или шрифты и т.д.?

Answer 1

[Anton Filippov]

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

.team-lable {
  color: #4e525d;
  font-family: "OpenSansRegular";
  font-size: 14px;
}

.team-lable h3 {
  font-size: 42px;
  margin-bottom: 140px;
  text-align: center;
}

.team-lable h4 {
  font-size: 22px;
  margin-bottom: 35px;
}

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

Только не делайте такие отступы, как у вас никогда)
Ни дай Бог поддерживать после вас проект придется :)

Comments

[freeman0204]

Только не делайте такие отступы, как у вас никогда) Вы про margin-bottom: 140px; и margin-bottom: 35px; ?) Что с ними не так?

[Anton Filippov]

Артур Черешнюк: я про отступы в самом css (перед .team h4 и .team span)

[zooks]

А я видел такую идентацию на одном проекте. При этом все было очень криво сверстано.

[Anton Filippov]

zooks: да я тоже где-то видел, но выглядит это ужасно.
лучше юзать sass там это оправдано и красиво выглядит

[zooks]

Антон Ф.: вот уж точно, а CSS-ки должны быть минифицированы.

[freeman0204]

Антон Ф.: Как я понимаю эти отступы показывают уровень вложености?

[Anton Filippov]

Артур Черешнюк: я тоже это понимаю ну выглядит это ужасно, и нифига не практично
в sass норм, в css нет

Answer 2

[Алексей Уколов]

На ваш вопрос нет правильного ответа.

Логика определения того, нужно ли выносить общие стили в какой-то общий селектор проста:
если это действительно общие стили, то есть изменять их в будущем тоже нужно будет для всех селекторов разом, то лучше написать их так, как во втором варианте;
если это просто совпадение (например, какие-то одинаковые отступы у двух элементов), то лучше правила продублировать.

Есть и лучший вариант - использовать препроцессор, например, SCSS, тогда можно будет вынести общие правила в миксин или в переменные или просто наследовать селекторы.

Вот пара примеров соглашений о стиле:
www.phpied.com/css-coding-conventions
google-styleguide.googlecode.com/svn/trunk/htmlcss...
Вообще, по запросу "css styleguide" много всего находится, выбирайте соглашение по вкусу.

По поводу порядка объявления селекторов, рекомендую почитать ответы к этому вопросу.