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

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И так далее.

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

Это было полезно?

Решение

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

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

/* Все общие сведения приведены здесь в соответствующих подзаголовках */

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

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

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

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

/* и т. д */

/************************* * ПЛАНИРОВКА * *************************/

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

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

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

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

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

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

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

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

/* Навигация слева */

/* Правильная навигация */

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

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

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

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

/* Та же сделка, что и с формами */

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

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

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

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

/************************* * ПОДДЕРЖКА 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;
}

И так далее, я помещаю структуру класса или идентификатора вверху, затем любое другое форматирование, например шрифт и т.д. Ниже этого.Позволяет очень быстро и понятно просмотреть его.

Другие советы

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

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

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

  • Сброс
  • структура
  • html_tags ( теги html_)
  • навигация
  • конкретные разделы
  • Сообщения об ошибках - это мой последний раздел

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top