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

Вот черновик того, как я упорядочиваю свои свойства 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 действительно нет какого-либо предписанного соглашения о структуре кода. Итак, все сводится к тому, что лучше всего подходит для вас.

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

Файлы должны быть модульными, чтобы вы могли использовать @imports. Обычно у меня есть файл 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 по причинам, не зависящим от меня. Хотелось бы услышать любые предложения по улучшению этого метода :)