Это похоже на то, как я структурирую свой, однако я считаю, что использование подзаголовков — лучший способ сделать это, поэтому я использую эту структуру:
/************************* * ГЛОБАЛЬНЫЙ * ********************* ****/
/* Все общие вещи идут здесь под соответствующими подзаголовками */
/* Форматирование заголовка */
/* Форматирование текста */
/* Форматирование формы */
/* Форматирование таблицы */
/* и т.д */
/************************* * МАКЕТ * ********************* ****/
/* Все элементы макета находятся здесь под подзаголовками */
/* Заголовок */
/* Левая боковая панель */
/* Правая боковая панель */
/* Нижний колонтитул */
/************************* * НАВИГАЦИЯ * ********************** ****/
/* Я поместил навигацию отдельно от макета, так как может быть несколько точек навигации под их подзаголовками */
/* Основная (горизонтальная) навигация */
/* Левая навигация */
/* Навигация вправо */
/* Навигация по хлебной крошке */
/*************************** * ФОРМЫ * ********************** ****/
/* Любое форматирование формы, которое отличается от общего форматирования, если существует несколько форм с различным форматированием, используйте подзаголовки */
/************************* * ТАБЛИЦЫ * ********************** ****/
/* То же, что и формы */
/*************************** * СПИСКИ * ********************** ****/
/* То же самое, что и формы и таблицы */
/************************* * СОДЕРЖАНИЕ * ********************* ****/
/* Любое конкретное форматирование для определенных страниц, сгруппированных по подзаголовкам для страницы так же, как формы, таблицы и списки */
/************************* * ПОДДЕРЖКА CSS * ********************** *****/
/* Это для любого специального форматирования, которое может быть применено к любому элементу на любой странице и имеет приоритет над обычным форматированием для этого элемента. Например, это может быть что-то вроде: */
.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }
/* и т.д */
Надеюсь, это поможет.
Как правило, я не рекомендую писать в одну строку, как это, или как предлагается в ссылке, опубликованной Адамом, их очень трудно пролистать, если они становятся длинными. Для приведенных выше примеров было просто быстрее набирать их таким образом, поэтому мне не нужно было делать отступ в каждой строке.
Для форматирования я бы рекомендовал такую структуру:
.class {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
И так далее, я помещаю структуру класса или идентификатора вверху, а затем любое другое форматирование, например, шрифт и т. д., под ним. Позволяет очень быстро и четко пролистать.
person
Matt
schedule
08.10.2008