Вот как бы вы структурировали свою таблицу стилей CSS?

Оставляя в стороне вопрос о том, должны ли вы обслуживать одну или несколько таблиц стилей, предполагая, что вы отправляете только одну, что вы думаете об этой базовой структуре?

/* Структура */

Сюда следует помещать любые элементы макета шаблона, такие как заголовок, нижний колонтитул, тело и т. д.

/* Конец структуры */

/* Общие компоненты*/

Повторяющиеся элементы, такие как формы регистрации, списки и т. д.

/* Конец общих компонентов*/

/* Конкретная страница 1 */

Некоторые страницы могут иметь определенные стили, которые будут здесь.

/* Определенный конец страницы 1 */

/* Конкретная страница 2 */

Как указано выше

/* Определенный конец страницы 2 */

/* Конкретная страница и т. д. */

И так далее.

/* Конец конкретной страницы и т. д. */


person Sam Murray-Sutton    schedule 08.10.2008    source источник


Ответы (5)


Это похоже на то, как я структурирую свой, однако я считаю, что использование подзаголовков — лучший способ сделать это, поэтому я использую эту структуру:

/************************* * ГЛОБАЛЬНЫЙ * ********************* ****/

/* Все общие вещи идут здесь под соответствующими подзаголовками */

/* Форматирование заголовка */

/* Форматирование текста */

/* Форматирование формы */

/* Форматирование таблицы */

/* и т.д */

/************************* * МАКЕТ * ********************* ****/

/* Все элементы макета находятся здесь под подзаголовками */

/* Заголовок */

/* Левая боковая панель */

/* Правая боковая панель */

/* Нижний колонтитул */

/************************* * НАВИГАЦИЯ * ********************** ****/

/* Я поместил навигацию отдельно от макета, так как может быть несколько точек навигации под их подзаголовками */

/* Основная (горизонтальная) навигация */

/* Левая навигация */

/* Навигация вправо */

/* Навигация по хлебной крошке */

/*************************** * ФОРМЫ * ********************** ****/

/* Любое форматирование формы, которое отличается от общего форматирования, если существует несколько форм с различным форматированием, используйте подзаголовки */

/************************* * ТАБЛИЦЫ * ********************** ****/

/* То же, что и формы */

/*************************** * СПИСКИ * ********************** ****/

/* То же самое, что и формы и таблицы */

/************************* * СОДЕРЖАНИЕ * ********************* ****/

/* Любое конкретное форматирование для определенных страниц, сгруппированных по подзаголовкам для страницы так же, как формы, таблицы и списки */

/************************* * ПОДДЕРЖКА 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
comment
Не совсем так, как я бы это сделал, но вы определенно дали мне больше всего пищи для размышлений. - person Sam Murray-Sutton; 15.10.2008
comment
Рад, что смог помочь, мне интересно, что бы вы изменили? - person Matt; 16.10.2008

Все, что имеет смысл для вас, достаточно хорошо. Откровенно говоря, когда кто-то еще ищет что-то в вашей таблице стилей — или когда вы ищете что-то, если на то пошло — они не будут пытаться выяснить, какова была ваша организационная структура. Они просто будут искать любой класс или элемент, который им нужно увидеть. Так что, пока вы обычно держите вещи, которые связаны друг с другом, и разделяете их комментариями, как предлагает @Matt, все в порядке.

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

person Herb Caudill    schedule 08.10.2008

Я организую свой CSS так же, как и ваш, но я начинаю с раздела сброса. Основная идея состоит в том, чтобы идти от общего к частному. Итак, вот оно:

  • сбросить
  • структура
  • html_теги
  • навигация
  • отдельные разделы
  • Сообщения об ошибках - это мой последний раздел
person allesklar    schedule 09.10.2008

Представленная вами структура - это именно то, что я использую. Однако мне кажется, что это все еще стало слишком сложным, когда новые правила появляются и переопределяют друг друга... Возможно, вместо этого мне следует попытаться придерживаться решения, предложенного в теме, на которую ссылается Адам.

person Rimas Kudelis    schedule 08.10.2008

Кажется, что каждый раз, когда я создаю новый файл css, я нахожу новый способ его организации. И они ВСЕ лучше предыдущих.

person Ryan Rodemoyer    schedule 08.10.2008