Структура css, а нужно ли?

angel12 · April 21, 2011

Всем привет!


.content {
    width: 700px;
}
.content_user-box {
    width: 400px;
}
.content_user-box_left {
    width: 200px; 
}

Или же


.content {
    width: 700px;
}
    .content_user-box {
        width: 400px;
    }
       .content_user-box_left {
           width: 200px; 
        }

Как делаете вы и почему вы делаете именно так, а не наоборот?

Про структуру ясно, но ведь она чётко отображается и в 1м способе, поэтому по мне так лишняя табуляция во втором способе- лишнее. Что думаете вы?

Edited April 21, 2011 by angel12

Justnewone · April 21, 2011

бывает что вложенность в 5 и более уровней, что ж теперь, все их в структуре отображать? удобнее отступами.

Мне лично так удобнее воспринимать.

rash · April 21, 2011

Использую второй способ без отступов.

Поскольку CSS разделен на мелкие файлы — читабельности не мешает.

Быколай · April 21, 2011

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

swetlana · April 21, 2011


/* cart */
.cart-items { margin: 16px 0 0; width: 760px; } .cart-items, .cart-items thead { border-bottom: 3px solid #cac3d8; }
	.cart-items th, .cart-items td { padding: 28px 10px; border-top: 1px solid #cac3d8; vertical-align: top; }
		a.cart-delete-item { display: block; width: 22px; height: 22px; text-indent: -9999px; background: url(images/cart_delete.png) no-repeat; }
		.cart-items td.cart-item-img { text-align: center; padding-bottom: 0; }
		.cart-items td.cart-item-img img { background: url(images/preview_shadow.png) center bottom no-repeat; padding-bottom: 36px; }
		td.cart-item-name ul.props { font-size: 12px; padding: 4px 0; margin: 0; list-style: none; }
		.cart-items td.cart-item-quantity input { width: 24px; text-align: right; }
		.cart-items td.cart-item-name p.price { display: inline-block; color: #432c8a; font-weight: bold; height: 27px; line-height: 27px; padding: 0 11px; background: #a8cd64; border-radius: 8px;-moz-border-radius: 8px; margin-top: 8px; }
		th.cart-item-price { text-align: center; }
		td.cart-item-price { line-height: 28px; font-weight: bold; text-align: right; white-space: nowrap; }
	.cart-items tfoot .bonus h3 { font-weight: bold; color: #7aa729; }
	.cart-items tfoot .bonus p { font-size: 12px; }
	.cart-items tfoot .bonus td.cart-item-price { color: #7aa729; }
	p.totalprice { line-height: 54px; text-align: right; width: 760px; font-size: 18px; font-weight: bold; }
	fieldset.cart-buttons { width: 760px; }

/* order form */
	nav.order_progress { height: 35px; line-height: 35px; padding: 9px 0; border-top: 1px solid #cac3d8; font-size: 18px; color: #cac3d8; }
		nav.order_progress ul { margin: 0; list-style: none; }
		nav.order_progress li { float: left; } nav.order_progress li+li { padding-left: 53px; background: url(images/order_nextstep.gif) 17px center no-repeat; }
			nav.order_progress li+li.past,nav.order_progress li+li.current { background-image: url(images/order_nextstep_past.gif); }
			nav.order_progress li.past a { text-decoration: none; } nav.order_progress li.past a:hover { text-decoration: underline; }
			nav.order_progress li.hulludrive { width: 101px; background: url(images/hulludrive.png) no-repeat; text-indent: -9999px; }
			nav.order_progress li.current span { display: block; padding: 0 16px; background: #a8cd64; border-radius: 8px;-moz-border-radius: 8px; color: #472f8f; }
	form.order { border-top: 3px solid #cac3d8; } form.order ul { margin: 0; list-style: none; }
		form.order fieldset { padding: 16px 0 26px 203px; } form.order fieldset+fieldset { border-top: 1px dashed #cac3d8; }
			form.order fieldset h2 { font-size: 16px; font-weight: bold; }
			form.order fieldset h2,form.order fieldset label { display: block; width: 183px; float: left; margin-left: -203px; clear: left; }
			form.order fieldset li { overflow: hidden; }
			form.order fieldset li, form.order fieldset label { line-height: 19px; padding: 5px 0; }
				form.order fieldset li label { width: auto; margin: 0; float: none; clear: none; height: auto; line-height: normal; padding: 0; }
					form.order fieldset li label input { margin-right: 8px; }
					form.order fieldset label+input,form.order fieldset label+textarea { float: left; }

как-то так исторически сложилось.

Если б мне ещё пару месяцев назад сказали, что я буду так писать — ни за что бы не поверила.

s0rr0w · April 21, 2011

На больших объемах стили с отбивками не решают.

Justnewone · April 21, 2011

На больших объемах стили с отбивками не решают.

на больших объемах стили без отбивки - только для аппаратного восприятия.

Отбивка дает хотя бы самый малый зрительный ориентир в рамках 1 небольшой локальной задачи.

я сейчас делаю так. контрал F + имя класса, в размерах одного раскрыва экрана отбивка для меня незаменима.

klierik · April 22, 2011

В первом случае для того что бы девелоперу стало понятно что следующий класс является дочерним от предедущего - требуется прочитать название класса целиком.

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

а если и табулировать закрывающую скобку, то читабельность ещё повышается:



	.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 {  }

Такой подход мне позволяет понять иерархию разметки, смотря всего-лишь на CSS, без чтения имён классов.

Great Rash · April 22, 2011

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

klierik · April 22, 2011

скажу от себя.

я веду проект у которого, к сожалению, один css-файл в котором более 6,500 строк. Написан он так же в строку - это не удобно.

Но как бы то ни было новые стили в этом проекте я так же пишу в строку по одной просто причине - однородность.

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

Имхо, такой подход повышает читабельность кода.

s0rr0w · April 22, 2011

В первом случае для того что бы девелоперу стало понятно что следующий класс является дочерним от предедущего - требуется прочитать название класса целиком.
Во втором случае для того что бы девелоперу стало понятно что следующий класс является дочерним от предедущего - требуется всего-навсего посмотреть на иерархию классов визуально. А собственно читабельность кода выше.
а если и табулировать закрывающую скобку, то читабельность ещё повышается:

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

Во втором случае, нужно очень внимательно прочтитать строку.

В больших проектах вот такие декларации "form.order fieldset h2,form.order fieldset label" являются злом, так как специфичность может сыграть злейшую шутку при дальнейшей модификации. Да и вложенность элементов может быть чуть больше, чем на домашних страничках

В большинстве случаев стили смотрят в фаербаге. А при необходимости редактировать данные, в 99% случаев используется поиск по файлу. Структурировано отбивками или написано подряд - уже становится пофиг.

скажу от себя.
я веду проект у которого, к сожалению, один css-файл в котором более 6,500 строк. Написан он так же в строку - это не удобно.

Наш человек. У меня 80 кб CSS файл. Искать там что-то без CTRL+F нереально

klierik · April 22, 2011

s0rr0w

если говорить про такое:

form.order fieldset h2

то это зло которое можно описать как:

.order .headline

или же

.b-order__headline

что в свою очередь быстрее отрендерится браузером.

Что касается ctrl+f || firebug то в рамках когда всего 1 css-файл то тут совершенно согласен, но это когда следует что-то поправить.

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

Хотя, возможно, подход с табуляцией мне более комфортен из-за читабельности кода, так как смотря на список правил я визуально знаю в какую часть смотреть в ожидании увидеть требуемый набор правил.

rash · April 22, 2011

Зачем вы так страдаете с большими файлами?

Для разработки кто мешает разбивать на мелкие?

Небольшой файл с хорошо отформатированным кодом читается лучше всего.

Если мне кто-то скажет, что я когда-нибудь буду писать стили в строчку — не поверю

s0rr0w · April 22, 2011

Зачем вы так страдаете с большими файлами?

https. Меньше файлов - лучше.

Для разработки кто мешает разбивать на мелкие?

По какому признаку?

Немного оффтопика

form.order fieldset h2,form.order fieldset label { display: block; width: 183px; float: left; margin-left: -203px; clear: left; }

Если написано float: left, то display: block не нужен.

Типичная проблема специфичности

Сначала определяем

form.order fieldset h2,form.order fieldset label { display: block; width: 183px; float: left; margin-left: -203px; clear: left; }

Потом возвращаем обратно

form.order fieldset li label { width: auto; margin: 0; float: none; clear: none; height: auto; line-height: normal; padding: 0; }

CSS HELL!

Shift-Web · April 24, 2011

Хм ... А я стараюсь не раздувать сильно и некоторые вещи на импорты вытягивать, чтобы совсем ноги не переломать.


@chaset 'UTF-8';
@import url(reset.css);

body {
	background: #fcfcfe;
}

#root {
	width: 960px;
	margin: 0 auto;
}

h1 {
	font: normal 24px Helvetica;
	text-shadow: 1px 2px 3px #006400;
	text-align: center;
	color: #3cb371;
}

/* BLOCKS */

.block {
	width: 50px;
	height: 50px;
	background: #7B68EE;
	margin: 20px;
	cursor: pointer;
}

.left {
	float: left;
	background: #b22222;
}
.right {
	float: right;
}
.action {
	background: #8b008b;
}



/* TRANSITIONS */
h1:hover {
	-webkit-transition: color .6s ease, border .2s ease-in-out, font-size .7s ease;
	-moz-transition: color .6s ease, border .2s ease-in-out, font-size .7s ease;
	transition: color .6s ease, border .2s ease-in-out, font-size .7s ease;

	text-shadow: 1px 2px 3px #4682b4;
	border-bottom: 2px dashed #666;
	font-size: 30px;
	color: #008080;
}

.block:hover {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;

	box-shadow: 1px 0px 3px #dc143c;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	transform: scale(1.3);

	background: #556b2f;
}

.action:hover {
	-webkit-transition: all .9s ease-in-out;
	-moz-transition: all .9s ease-in-out;
	transition: all .9s ease-in-out;

	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;

	-webkit-transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	transform: rotate(-360deg);
}

.left:hover {
	-webkit-transition: all .9s ease-in-out;
	-moz-transition: all .9s ease-in-out;
	transition: all .9s ease-in-out;

	float: right;
	width: 60px;
}

.right:hover {
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;

	position:relative;
	top: 120px;
	right: 100px;
}

rash · April 24, 2011

Зачем вы так страдаете с большими файлами?
https. Меньше файлов - лучше.

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

s0rr0w · April 24, 2011

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

Дополнительные телодвижения при деплойменте проекта или динамическая сборка явной статики - не лучшая идея.

Justnewone · April 24, 2011

а какие противопоказания?

Shift-Web · April 24, 2011

rash << очень зря, если всё автоматически происходит, то нужно только изучить зависимости ...

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

Edited April 24, 2011 by Shift-Web

Sign In

Структура css, а нужно ли?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information