Соглашения CSS / Модели макета кода

Что ж, я лично не знаю ни одной конвенции как таковой, но я знаю, что есть много рекомендаций, которым действительно стоит следовать, но в основном это зависит от того, как вы хотите реализовать свой CSS, чтобы вы могли выбрать тот, который подходит вам больше всего.

Натали Даун, известная как ClearLeft, создала действительно отличное слайд-шоу, охватывающее эту тему и многое другое http://natbat.net/2008/Sep/28/css-systems/

Загрузите PDF-файл, поскольку он содержит гораздо больше информации, чем слайд-шоу. Я бы порекомендовал это CSS-разработчикам любого уровня подготовки.

Все это очень субъективно в соответствии с обычными дебатами о форматировании кода, и я не знаю каких-либо формализованных соглашений.

Выбранный мной метод - использовать все строчные классы и идентификаторы с подчеркиванием, разделяющим слова (например, #page_container). Сначала я объявляю все свои стили ярлык (html, body, ul и т. д.), Затем все классы и идентификаторы, отсортированные по алфавиту. Кроме того, все стили, определенные в каждом классе, идентификаторе или теге, также определены в алфавитном порядке. Использование этого соглашения упрощает отслеживание определенного стиля.

Для форматирования я всегда сжимаю его как можно меньше, но все же разборчиво. Я помещаю все в одну строку с соответствующим белым пространством. Если у вас есть Visual Studio, вы можете указать этот формат, и он будет автоматически отформатирован для вас (установите для стиля Компактные правила в Инструменты, Параметры, Текстовый редактор, CSS, Формат).

Соглашения об именах здесь чрезвычайно субъективны, но следует помнить о том, чтобы называть элементы в соответствии с их назначением, а не их стилизованным значением. Например, если у вас есть слоган компании, который вы хотите оформить большим красным шрифтом, назовите идентификатор #slogan вместо #red_bold.

Вот полный пример, чтобы дать вам представление:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

Вот черновик того, как я упорядочиваю свои свойства css. Он примерно соответствует руководству по позиционированию и макету, затем типографике, затем фонам и другим второстепенным вещам. Я стараюсь упорядочить свои свойства по тому, как они влияют на блочную модель, насколько это возможно. Однако мой порядок имеет тенденцию немного меняться. Буду признателен за любые комментарии по этому поводу.

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

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

Я использовал табуляцию отступов объявлений css, чтобы максимально соответствовать моим отношениям родитель / потомок html, но я больше этого не делаю. Функция группировки в CSSEdit помогает значительно снизить искушение сделать это.

В CSS на самом деле нет какого-либо предписанного соглашения о структуре кода. Итак, все сводится к тому, что лучше всего подходит для вас.

Файлы должны быть разделены на модули, чтобы вы могли использовать @import. Обычно у меня есть файл base.css для базовых классов (таких как типографика и цвета). В зависимости от структуры вашего сайта может быть полезно иметь и другие «частичные элементы» CSS для повторного использования во всех таблицах стилей, ориентированных на пользователя. Эти дочерние таблицы стилей могут расширять базовые стили с большей степенью детализации по мере необходимости (например, .warn {color:red;} может быть расширен с помощью p.warn {font-style:italic;} или h1.warn {border:5px solid red;}), что является отличным шаблоном проектирования для реализации так называемого объектно-ориентированный CSS.

В самих файлах мне нравится упорядочивать селекторы и списки свойств по алфавиту. Я пробовал поддерживать отдельные списки для разных типов селекторов (сначала список идентификаторов, затем мой список классов, а затем мой список селекторов элементов), но я нашел это излишне сложным, поэтому у меня все селекторы в одном алфавитном порядке. список. Таким образом, я могу быстро найти корень всех сложных селекторов или любых стилей, заданных простому селектору.

В сложных селекторах я перечисляю каждый селектор в алфавитном порядке.

Если по какой-то причине я не могу использовать Sass, я могу имитировать его шаблон гнездование (я все еще не уверен, работает это или нет), например:

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

К сожалению, вы можете искать запас для p и не осознавать, что он является частью blockquote, .nav, p. Это тоже не очень «объектно-ориентированный» дизайн, но он, возможно, лучше, чем помещать строки классов практически в каждый элемент, требующий стилизации.

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