Произошла ли какая-либо попытка создания формализованного метода для организации CSS-кода? Прежде чем я пойду и придумаю свою собственную стратегию сохранения читаемости, мне интересно, что еще там. Google не очень помог, так как я не совсем уверен, какие условия искать.
Я думаю больше о строках отступов/интервалов, когда нужно использовать новые строки, соглашения об именах и т.д.
Любые идеи?
Natalie Down славы ClearLeft произвела действительно отличное слайд-шоу, посвященное этой теме, и более http://natbat.net/2008/Sep/28/css-systems/
Загрузите PDF, поскольку он содержит намного больше информации, чем слайд-шоу. Я бы рекомендовал это для CSS-разработчиков всех уровней навыков.
Это очень субъективно в соответствии с обычными дебатами форматирования кода, и я не знаю каких-либо формализованных соглашений.
Метод, который я выбрал, - это использовать все нижестоящие классы и идентификаторы с подчеркиваниями, разделяющими слова (например, #page_container). Сначала объявляю все стили тега (html, body, ul и т.д.), Затем все классы и идентификаторы сортируются по алфавиту. Кроме того, все стили, определенные в каждом классе, id или теге, также определяются в алфавитном порядке. Использование этого соглашения облегчает отслеживание определенного стиля.
Для форматирования я всегда сжимаю его как можно меньше, но все еще разборчиво. Я помещаю все на одну строку с соответствующим пробелом. Если у вас есть Visual Studio, вы можете указать этот формат и автоматически отформатировать этот способ для вас (установите стиль Компактные правила в разделе "Инструменты", "Параметры", "Текстовый редактор", "CSS", "Формат" ).
Соглашения об именах здесь чрезвычайно субъективны, но нужно иметь в виду, что ваши элементы являются их целью, а не их стилизованным значением. Например, если у вас есть лозунг компании, вы хотите стилизовать в большом красном имени шрифта id #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 indent css для максимально возможного соответствия родительским/дочерним отношениям html, но я больше этого не делаю. Функция группировки CSSEdit помогает значительно уменьшить соблазн сделать это.
У CSS нет действительно предписанного соглашения для структуры кода. Так что дело доходит до того, что лучше всего подходит вам.
Ну, я лично не знаю какой-либо конвенции, но я знаю, что есть много рекомендаций, которые действительно подходят для вас, но в основном зависит от того, как вы хотите реализовать свой CSS для вас, чтобы выбрать тот, который вам больше всего подходит.
Файлы должны быть модульными, поэтому вы можете использовать @import s. Обычно у меня есть файл base.css для базовых классов (например, типография и цвета). В зависимости от структуры вашего сайта может быть полезно также использовать другие "частичные" части CSS для повторного использования во всех таблицах стилей, ориентированных на пользователя. Эти таблицы стилей потомков могут расширить базовые стили с большей детализацией по мере необходимости (например, .warn {color:red;} может расширяться на p.warn {font-style:italic;} или h1.warn {border:5px solid red;}), что является отличным шаблоном проектирования для реализации так называемого объектно-ориентированный CSS.
В самих файлах мне нравится перебирать списки селекторов и свойств в алфавитном порядке. Я попытался сохранить отдельные списки для разных типов селекторов (сначала список идентификаторов, затем список моих классов, а затем мой список селекторов элементов), но я нашел это излишне сложным, поэтому у меня есть все селекторы в том же алфавитном порядке список. Таким образом, я могу быстро найти корень всех сложных селекторов или любых стилей, заданных для простого селектора.
Внутри сложных селекторов я перечисляю каждый селектор в алфавитном порядке.
Если я почему-то не могу использовать Sass, я могу подражать своему шаблону nesting (я все еще не уверен, что это разработка или нет), например:
@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 по причинам, не зависящим от моего контроля. Я хотел бы услышать любые предложения по улучшению этого метода:)