Как вы выстраиваете свой CSS?

  1. Weblancer
  2. Форум фрилансеров
  3. Программирование
Антон В.
1807 сообщений
#14 лет назад
Скажите, какой алгоритм расположения элементов вы используете в css-файле, комментируете ли код?

Лично я ничего не комментирую, а элементы располагаю в последовательности html, body, reset, основные теги, далее классы просто по алфавиту. Мне почему-то кажется, что алфавитная система намного удобнее, чем когда css-файл заполняется втупую по мере создания сайта, то есть сначала классы для хедера, потом контент, и так далее, без какой-либо системы. Вроде и комментарии к таким цсскам обычно пишут (а без них в этом случае уж точно никуда), но найти что-то весьма проблематично, без файрбага вообще печально, особенно если цсска большая. Автор потом сам начинает путаться в своих записях, и последующие классы уже вписываются "абы куда", не раз такое наблюдал, когда правил чью-то верстку.
В алфавитной ститеме все просто, найти нужный класс - не проблема. Конечно, насколько это возможно, файлы группируются наследованием, то есть если это классы для футера, то они идут одной группой подряд, наследованием через .footer .classname, а не раскиданы по всему файлу.

Вобщем интересен "народный подход" к этому делу, разные точки зрения, и всё такое...
Виталий И.
570 сообщений
#14 лет назад
Спорно.
Имхо, лучше по блокам. По алфавиту каскад фиг сделаешь.
/* -----Header
/* -----Content
/* Left Side
/* Right Side
/* -----Footer
Антон В.
1807 сообщений
#14 лет назад
Что вы понимаете под каскадом, и почему его фиг сделаешь? (про группиировку классов наследованием я уже писал)

Вот пример моего кода. Чем не каскад? (может не самый "каскадный" пример, просто взял с первого попавшегося под руку сайта из портфолио)


.previews {

	margin: 0;

	padding: 0 0 25px 0;

	list-style-type: none;

}


.previews li {

	margin-bottom: 12px;

	zoom: 1;

}


.push {

	padding-bottom: 65px;

	zoom: 1;

}


.request {

	background: #F3F3F3;

	padding: 8px 9px 15px 11px;

	zoom: 1;

}


.request button {

	float: right;

	color: #d52145;

	font-size: 18px;

	border: 0 none;

	background: none;

	height: 18px;

	padding: 0 33px 0 0;

	margin: -6px 0 0 0;

	position: relative;

    background: url('../img/button.gif') no-repeat right top;

	cursor: pointer;

	overflow: visible;

}


.request button::-moz-focus-inner {

	padding: 0;

	border: 0;

}


.request button span {

	top: -3px;

	position: relative;

}


.request button span::-moz-focus-inner {

	top: -6px;

}


.request_row {

	margin-bottom: 15px;

	zoom: 1;

	width: 100%;

}


.request_row span {

	float: left;

	color: #d52145;

	font-size: 18px;

	position: relative;

	top: -2px;

}


.request_row textarea {

	width: 153px;

	height: 77px;

	float: right;

}


.request_row .textfield {

	width: 153px;

	float: right;

}


.sidebar {

	width: 278px;

	float: left;

}


.subscribe_block {

	width: 100%;

	zoom: 1;

	overflow: hidden;

	margin-top: 5px;

}


.subscribe_block .box {

	width: 175px;

	height: 39px;

	background: #F3F3F3;

	float: left;

	margin-right: 4px;

	overflow: hidden;

	color: #dd4d6a;

}


.subscribe_block .box div {

	width: 175px;

	height: 39px;

	display: table-cell;

	vertical-align: middle;

	//display: block;

	//margin-top: 12px;

}


.subscribe_block .box div .textfield {

	width: 141px;

	margin-left: 14px;

}


.subscribe_block .box span {

	margin-left: 14px;

}


.subscribe_block .mail_icon {

	width: 38px;

	height: 38px;

	float: left;

	cursor: pointer;

	border: 0 none;

    background: url('../img/mail_icon.gif') no-repeat;

	margin-right: 6px;

}


.subscribe_block .rss_icon {

	width: 38px;

	height: 38px;

	float: left;

    background: url('../img/rss_icon.gif') no-repeat;

	display: block;

}



Кроме того, процесс определения группы элементов в какой либо блок (TOP, HEADER, FOOTER, и т д) напоминает верстку с использованием айди - аффтар уверен, что блок будет уникальным, и смело лепит ему свойства через айди. Потом приходит программист, заказчик, директор, дизайнер, что-то перепридумывают, и элемент уже дублируется на странице, и использование айдишника уже нецелесообразно. Так и здесь - помещая меню в блок LeftSide, уверены ли вы, что это меню не будет дублировано где-то, или просто перенесено в блок RightSide?
Артем Л.
11416 сообщений
#14 лет назад
Я как-то больше привык к блокам - хедер, контент, футер, сайдбар. И в каждом блоке по алфавиту
Антон В.
1807 сообщений
#14 лет назад
Hungry_Hunter, ну по сути почти то же самое... А вот такой вопрос - есть у вас класс .red {color: red;}. Ну к примеру . Такой вот класс, который вы юзаете, если надо текст выделить красным (допустим, в макете такое часто надо). Вот вы его в какой блок определите?
Руслан Савенок
530 сообщений
#14 лет назад
Цитата ("nehovaysyatopol"):
Hungry_Hunter, ну по сути почти то же самое...А вот такой вопрос - есть у вас класс .red {color: red;}. Ну к примеру . Такой вот класс, который вы юзаете, если надо текст выделить красным (допустим, в макете такое часто надо). Вот вы его в какой блок определите?


Такие моменты я ставлю в general styles перед шапкой
Евгений Б.
5330 сообщений
#14 лет назад
Я привык делать все в коде и отдельные блоки в разных файлах проекта, а как система соберет все вместе меня не волнует, я не редактирую конечный файл, лучше и правильнее менять исходные блоки
до кучи все в одну строку свалить, что бы наэкономить немного.
Артем Л.
11416 сообщений
#14 лет назад
Цитата ("nehovaysyatopol"):
А вот такой вопрос - есть у вас класс .red {color: red;}. Ну к примеру . Такой вот класс, который вы юзаете, если надо текст выделить красным (допустим, в макете такое часто надо). Вот вы его в какой блок определите?

В общий блок - там где ресет, h1, ul, a итд
Елена Б.
6863 сообщения
#14 лет назад
Вот фрагмент из текущей незаконченной работы.
Вначале идет ресет без каких либо изысков и определение для тегов (a, h1-h3, иногда td).
Мечтаю о том дне, когда в ресет моджна будет добавить a {color:inherit} и больше не вспоминать.

ИМХО: алфавит при наличии функции поиска в редакторе можно с чистой совестью забывать.


body {

background: #151515;

	background: linear-gradient(top,#171d26,#151515);

		background: -moz-linear-gradient(top,#171d26,#151515);

		background: -webkit-gradient(linear, left top, left bottom, from(#171d26), to(#151515));

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171d26', endColorstr='#151515',GradientType=0 ); /* ie */

	font-family: Arial, Helvetica, sans-serif;

    }

 #wrapper {

	width:100%; 

	min-height:100%; 

	height:auto !important; height:100%; 

	overflow:hidden; 

	background: linear-gradient(top,#171d26,#151515);

		background: -moz-linear-gradient(top,#171d26,#151515);

		background: -webkit-gradient(linear, left top, left bottom, from(#171d26), to(#151515));

		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#171d26', endColorstr='#151515',GradientType=0 ); /* ie */

	}

	#sidebar {

		width:195px;  

		float:left; 

		border-right:1px solid #2d2e2e; 

		color:#fff; 

		padding:20px 30px; padding-bottom:100%;

		margin-bottom:-100%; 

		background:#1a1a1a url("../image/l-bg.jpg") top right no-repeat;

		}

		#sidebar a {color:#fff; }

		.sidemenu li {

			height:29px;

			line-height:29px; 

			border-bottom:1px dotted  #4b4e52; 

			padding:0 20px;

			}

	#top {

		position:absolute; 

		height:60px; 

		left:290px; top:0; right:30px; 

		}

		#pannel {

			width:100%; max-width:978px; 

			margin:0 auto;

			background:#424348; 

			height:60px;

			color:#fff;

         box-shadow: 0 0 2px black; 

				box-shadow: 0 0 10px rgba(0,0,0,0.2);

				-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);

				-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);  }
Елена Б.
6863 сообщения
#14 лет назад
Цитата ("nehovaysyatopol"):
А вот такой вопрос - есть у вас класс .red {color: red;}

Часто для для этого хорошо подходит strong {font-weight:normal;color:red}, или b, em и т.д. с соответствующими свойствами.
Антон В.
1807 сообщений
#14 лет назад
Цитата ("floppox"):
ИМХО: алфавит при наличии функции поиска в редакторе можно с чистой совестью забывать


Ну алфавит забывать не советую в любом случае. А если серьезно, то в таком случае также нету смысла комментировать и разбивать по блокам - поиск-то есть. Не аргумент.

Цитата ("floppox"):
Часто для для этого хорошо подходит strong {font-weight:normal;color:red}, или b, em и т.д. с соответствующими свойствами


Стараюсь не использовать всякие дремучие теги а-ля em, dd, dl, small, и т д
Вполне можно обойтись и без них, для меня это мусор в коде.

Цитата ("floppox"):
#pannel {
         width:100%; max-width:978px;
         margin:0 auto;
         background:#424348;
         height:60px;
         color:#fff;
         box-shadow: 0 0 2px black;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);  }


А как же ослики? Некроссбраузерно.
Юзайте pie.htc
Елена Б.
6863 сообщения
#14 лет назад
Цитата ("nehovaysyatopol"):
А как же ослики? Некроссбраузерно.
Юзайте pie.htc
Цитата ("floppox"):
Вот фрагмент из текущей незаконченной работы.

А за подсказку спасибо. Я фильтрами играюсь. Посмотрю и такого зверя.
Цитата ("nehovaysyatopol"):
Стараюсь не использовать всякие дремучие теги а-ля em, dd, dl, small, и т д
Вполне можно обойтись и без них, для меня это мусор в коде.

strong, em, dd, dl, small - как раз не дремучие. Как раз очень даже семантичные. Дремучие - это b, i, center.
Цитата ("nehovaysyatopol"):
. А если серьезно, то в таком случае также нету смысла комментировать и разбивать по блокам - поиск-то есть. Не аргумент.

Когда разбито поблокам, это облегчает ВИЗУАЛЬНЫЙ поиск. Часто не нужно даже заглядывать в html, чтоб найти в цсс "маленькую голубенькую ссылочку в нижней части второй справа колонки" .
Антон В.
1807 сообщений
#14 лет назад
Цитата ("floppox"):
Цитата (nehovaysyatopol):
. А если серьезно, то в таком случае также нету смысла комментировать и разбивать по блокам - поиск-то есть. Не аргумент.

Когда разбито поблокам, это облегчает ВИЗУАЛЬНЫЙ поиск. Часто не нужно даже заглядывать в html, чтоб найти в цсс "маленькую голубенькую ссылочку в нижней части второй справа колонки" .


Вообще если по существу, то файрбаг решает все проблемы. Если ты верстальщик - то у тебя по-любому есть файрбаг, и там тебе сразу показывается, на какой строчке смотреть. Если ты не верстальщик и у тебя нет файрбага - то нефиг лезть править верстку ....То есть все эти заморочки какбы имеют второстепенное значение все-таки, если о практике говорить.

Цитата ("floppox"):
strong, em, dd, dl, small - как раз не дремучие. Как раз очень даже семантичные. Дремучие - это b, i, center.


да я как-то обхожусь стандартными <ul><li> вместо <dl><dd>, и <div class=""> вместо <center>, и так далее....не люблю, когда в коде много разных элементов. Блок - это DIV, текст - это SPAN, список - это UL LI, ссылка - это А. Вобщем-то на основании этого уже можно построить любую верстку. В свете этого меня сильно смущают новшества в HTML5, с его кучей новых тегов сомнительного назначения и необходимости.
Евгений Б.
5330 сообщений
#14 лет назад
Цитата ("nehovaysyatopol"):
<div class=""> вместо <center>

это правильнее чем
Цитата ("nehovaysyatopol"):
<ul><li> вместо <dl><dd>
Антон В.
1807 сообщений
#14 лет назад
Цитата ("ArtPro"):
это правильнее чем
Цитата (nehovaysyatopol):
<ul><li> вместо <dl><dd>


Обоснуйте.
Елена Б.
6863 сообщения
#14 лет назад
Цитата ("nehovaysyatopol"):
нефиг лезть править верстку

Вот сейчас вырву из контекста и громко на вас обижусь!
Систематизация ускоряет роботу.
Пишите вы код тоже в файрбаге? Или в дримвивере генерите? А потом уже, как "настоящий профессионал", файрбагом ковыряете?
Елена Б.
6863 сообщения
#14 лет назад
nehovaysyatopol,

dd и dl - это семантичные рекомендованные теги, входящие в спецификацию XHTML. Так же как strong, em, small, которые односятся к контекстным тегам. А вот <b>, <i>, <center> - это теги визуального форматирования, котрые использовать не рекомендуется.
<div class="red"> и .red {display:inline; color:lime} впридачу Отсортируем все по алфавиту и доказываем заказчику, что это и есть семантичная вестка
Антон В.
1807 сообщений
#14 лет назад
Цитата ("floppox"):
Цитата ("nehovaysyatopol"):
нефиг лезть править верстку

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


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

Цитата ("floppox"):
dd и dl - это семантичные рекомендованные теги, входящие в спецификацию XHTML. Так же как strong, em, small, которые односятся к контекстным тегам. А вот <b>, <i>, <center> - это теги визуального форматирования, котрые использовать не рекомендуется.


Госпаде, да не использую я <i> и <center> вообще, чево вы к ним прицепились. Ну иногда <b>, чтобы лишний класс не городить, да и то, редко. А dd и dl - не спорю, что они входят в спецификацию, но меня никто не обязывает их использовать. Не нравятся они мне, и все тут. Юзаю списки и щастьем свечусь.
Сергеевич А.
791 сообщение
#14 лет назад
Все в строчку, с минимумом каскадирования
с приблизительными 2 блоками - то, что скорее всего не придется править и блоки с информацией
Елена Б.
6863 сообщения
#14 лет назад
Цитата ("nehovaysyatopol"):
Ну иногда <b>, чтобы лишний класс не городить

Ну а я о чем? О лишнем классе .red

А возвращаясь к теме. Систему с отступами я не сама придумала. Увидела - понравилось.
Почему-то вы тему создали, а теперь доказываете, что ваш принцип самый лучшый. Зачем спрашивали-то?
123
Последняя