Это похоже на мою структуру, однако я считаю, что использование подзаголовков - лучший способ сделать это, поэтому я использую эту структуру:
/ *************************
* ГЛОБАЛЬНЫЙ *
************************* /
/ * Все обычные вещи приведены здесь под соответствующими подзаголовками * /
/ * Форматирование заголовка * /
/ * Форматирование текста * /
/ * Форматирование формы * /
/ * Форматирование таблицы * /
/ * etc * /
/ *************************
* Макет *
************************* /
/ * Все элементы макета идут здесь под подзаголовками * /
/ * Заголовок * /
/ * Левая боковая панель * /
/ * Правая боковая панель * /
/ * Нижний колонтитул * /
/ *************************
* НАВИГАЦИЯ *
************************* /
/ * Я расположил навигацию отдельно от макета, поскольку под их заголовками может быть несколько точек навигации * /
/ * Основная (горизонтальная) навигация * /
/ * Левая навигация * /
/ * Правая навигация * /
/ * Навигация по крошке * /
/ *************************
* ФОРМЫ *
************************* /
/ * Любое форматирование формы, которое отличается от общего форматирования, если существует несколько различных форматированных форм, используйте подзаголовки * /
/ *************************
* СТОЛЫ *
************************* /
/ * То же предложение, что и для форм * /
/ *************************
* СПИСКИ *
************************* /
/ * То же предложение, что и для форм и таблиц * /
/ *************************
* СОДЕРЖАНИЕ *
************************* /
/ * Любое специальное форматирование для определенных страниц, сгруппированное по подзаголовкам для страницы так же, как формы, таблицы и списки * /
/ *************************
* 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 }
/ * etc * /
Надеюсь, это поможет.
Я, как правило, не рекомендую писать в одной строке, как это, или, как предложено в ссылке, которую Адам разместил, их очень трудно просматривать, если они становятся длинными. Для приведенных выше примеров было проще набрать их таким образом, чтобы мне не приходилось делать отступ для каждой строки.
Для форматирования я бы порекомендовал эту структуру:
.class {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
И так далее, я помещаю структуру класса или ID вверху, затем любое другое форматирование, например шрифт и т. Д. Ниже. Делает это очень быстро и ясно, чтобы скользить.