Не пишите заголовки в CSS
Просто разбивайте разделы на файлы.Любые комментарии CSS должны быть просто комментариями.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
Используйте скрипт, чтобы объединить их в один;если необходимо.Вы даже можете иметь хорошую структуру каталогов и просто рекурсивно сканировать ваш скрипт на наличие .css файлов.
Если вам нужно написать заголовки, укажите в начале файла оглавление
Заголовки в оглавлении должны полностью совпадать с заголовками, которые вы напишете позже.Больно искать заголовки.Чтобы добавить к проблеме, как кто-то должен знать, что у вас есть еще один заголовок после вашего первого?пс.не добавляйте doc-like * (звездочку) в начале каждой строки при написании оглавлений, это только делает более раздражающим выделение текста.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
Пишите комментарии с правилами или внутри правил, а невне блока
Прежде всего, когда вы редактируете скрипт, есть вероятность 50/50, что вы обратите внимание на то, что находится за пределами блока правил (особенно, если это большой текстовый фрагмент;)).Во-вторых, нет (почти) ни одного случая, когда вам понадобился бы «комментарий» снаружи.Если он находится снаружи, это заголовок заголовка в 99% случаев, поэтому оставьте его таким.
Разделить страницу на компоненты
Компоненты должны иметь position:relative, нет padding инет margin, большую часть времени.Это значительно упрощает правила%, а также позволяет упростить absolute:position 'элементов, поскольку при наличии контейнера с абсолютным позиционированием элемент с абсолютным позиционированием будет использовать контейнер при вычислении top, right, bottomleft свойства.
Большинство DIV в документе HTML5 обычно являются компонентами.
Компонент также является чем-то, что можно считать независимой единицей на странице.С точки зрения непрофессионалов, относитесь к чему-то как к компоненту, если имеет смысл рассматривать что-то вроде черного ящика .
Снова рассмотрим пример страницы QA:
#navigation
#question
#answers
#answers .answer
etc.
Путем разделениястраницы на компоненты, вы разбиваете свою работу на управляемые единицы.
Поместите правила с совокупным эффектом на одной строке.
Например border, margin и padding (но не outline) все добавляют к размерам и размеру элемента, который вы разрабатываете.
position: absolute; top: 10px; right: 10px;
Если они просто не читаются на одной строке, по крайней мере, поместите их в непосредственной близости:
padding: 10px; margin: 20px;
border: 1px solid black;
Используйте сокращение, когда это возможно:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
Никогда не повторяйте селектор
Если у вас больше экземпляров одного и того же селектора, есть большая вероятность, что вы неизбежно закончитес несколькими экземплярами одних и тех же правил.Например:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
Избегайте использования тегов в качестве селекторов, когда вы можете использовать идентификаторы / классы
Прежде всего, теги DIV и SPAN являются исключением: вы никогда не должны их использовать, никогда!;) Используйте их только для прикрепления класса / идентификатора.
Это ...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
Должно быть написано так:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Потому что лишние висячиеDIVs там ничего не добавляют к селектору.Они также вынуждают ненужное правило тега.Если вы измените, например, .answer с div на article, ваш стиль нарушится.
Или, если вы предпочитаете больше ясности:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Причина в том, что свойство border-collapse является специальным свойством, которое имеет смысл только при применении к table.Если .statistics не является table, оно не должно применяться.
Общие правила - это зло!
- Избегайте написания общих / магических правил, если вы можете
- если только это не для CSS-сброса / отмены сброса, вся ваша общая магия должна применяться как минимум к одному корневому компоненту
Они не экономят ваше время, они заставляют вашу голову взорваться;а также сделать техническое обслуживание кошмаром.Когда вы пишете правило, вы можете знать, где оно применяется, однако это не гарантирует, что ваше правило не будет связываться с вами позже.
Чтобы добавить к этому общие правила, они запутаны и трудны для чтения, даже если у вас есть представление о документе, который вы разрабатываете. Это не значит, что вы не должны писать общие правила, просто не используйте их, если вы действительно не хотите, чтобы они были общими, и даже они добавляют столько информации о области действия в селектор, сколько вы можете.
Вещи, как это ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... имеет ту же проблему, что и использование глобальных переменных в языке программирования. Вам нужно дать им размах!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
В основном это звучит как:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
Мне нравится использовать идентификаторы, когда компонент, который я знаю, является одиночным на странице; Ваши потребности могут быть разными.
Примечание: в идеале, вы должны написать достаточно. Упоминание большего количества компонентов в селекторе, однако, является более прощающей ошибкой по сравнению с упоминанием меньшего количества компонентов.
Предположим, у вас есть компонент pagination. Вы используете его во многих местах на вашем сайте. Это было бы хорошим примером того, когда вы будете писать общее правило. Допустим, вы display:block используете ссылки на отдельные номера страниц и выделяете их темно-серым фоном. Чтобы они были видны, у вас должны быть такие правила:
.pagination .pagelist a {
color: #fff;
}
Теперь предположим, что вы используете свою нумерацию страниц для списка ответов, вы можете столкнуться с чем-то вроде этого
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
Это сделает ваши белые ссылки черными, чего вы не хотите.
Неправильный способ исправить это:
.pagination .pagelist a {
color: #fff !important;
}
Правильный способ исправить это:
#answers .header .pagination .pagelist a {
color: #fff;
}
Сложные "логические" комментарии не работают:)
Если вы напишите что-то вроде: «это значение зависит от бла-бла в сочетании с высотой бла-бла», просто неизбежно, что вы сделаете ошибку, и все упадет, как карточный домик.
Держите ваши комментарии простыми; если вам нужны «логические операции», рассмотрите один из таких языков шаблонов CSS, как SASS или LESS .
Как мне написать цветной поддон?
Оставь это на конец. Есть файл для всего вашего цветового поддона. Без этого файла ваш стиль должен по-прежнему иметь пригодный для использования цветовой палитру в правилах. Ваш цветной поддон должен быть перезаписан. Вы связываете селекторы, используя родительский компонент очень высокого уровня (например, #page), а затем пишете свой стиль как самодостаточный блок правил. Это может быть просто цвет или что-то еще.
например.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
Идея проста: ваш цветной поддон является таблицей стилей, не зависящей от базового стиля, в который вы каскад включаете.
Меньше имен, требуется меньше памяти, что облегчает чтение кода
Лучше использовать меньше имен. В идеале используйте очень простые (и короткие!) Слова: текст, тело, заголовок.
Я также считаю, что комбинация простых слов легче понять, чем суп из длинных "подходящих" слов: postbody, posthead, userinfo и т. Д.
Сохраняйте словарный запас небольшим, таким образом, даже если какой-то незнакомец, пришедший, чтобы прочитать ваш суп стиля (как и вы через несколько недель;)), должен понимать только, где используются слова, а не каждый селектор. Например, я использую .this всякий раз, когда элемент считается «выбранным элементом» или «текущим элементом» и т. Д.
Приведи себя в порядок
Написание CSS - это все равно что есть, иногда вы оставляете беспорядок. Убедитесь, что вы убрали этот беспорядок, иначе код мусора просто скопится. Удалите классы / идентификаторы, которые вы не используете. Удалите правила CSS, которые вы не используете. Убедитесь, что все хорошо, и у вас нет противоречивых или дублирующих правил.
Если вы, как я предлагал, рассматривали некоторые контейнеры как черные ящики (компоненты) в своем стиле, использовали эти компоненты в своих селекторах и хранили все в одном выделенном файле (или правильно разделяли файл с оглавлением и заголовками) тогда ваша работа будет существенно проще ...
Вы можете использовать такой инструмент, как расширение Firefox Dust-Me Selectors (совет: наведите указатель на файл sitemap.xml), чтобы помочь вам найти некоторые ненужные файлы, спрятанные в ядерных и карнизовских файлах CSS.
Хранить unsorted.css файл
Скажем, вы разрабатываете сайт QA, и у вас уже есть таблица стилей для "страницы ответов", которую мы назовем answers.css. Если вам теперь нужно добавить много нового CSS, добавьте его в таблицу стилей unsorted.css, а затем выполните рефакторинг в таблицу стилей answers.css.
Несколько причин для этого:
- быстрее выполнить рефакторинг после того, как вы закончите, а затем искать правила (которые, вероятно, не существуют) и вводить код
- вы будете писать то, что удаляете, добавление кода только усложняет удаление этого кода
- добавление к исходному файлу легко приводит к дублированию правила / селектора