Написание css

Здравствуйте уважаемые начинающие веб-мастера.

Правила оформления css, рекомендованные Google, для создания таблиц стилей.

Выполнение данных правил необходимо для повышения качества кода, облегчения совместной работы, и поддержки инaраструктуры.

1. Используйте валидный css код.

Кроме случаев, где необходим браузеро-зависимый код, или ошибок валидатора, используйте валидный CSS код.

Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.

Валидность — это важное, и при этом измеряемое качество кода. Написание валидного css помогает избавиться от избыточного кода, и обеспечивает правильное использование таблиц стилей.

Для проверки кода, используйте W3C CSS Walidator

2. Используйте шаблонные, или имеющие смысл имена классов и идентификаторов.

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

Рекомендуется выбирать имена, отражающие сущность класса потому, что их проще понять и, скорее всего, не понадобится менять в будущем.

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

Использование функциональных, или шаблонных имён, уменьшает необходимость ненужных изменений в документах, иди шаблонах.

3. Для идентификаторов и классов используйте имена настолько длинные, насколько это нужно, но настолько короткие, насколько это возможно.

Постарайтесь отразить в названии, что именно должен делать данный элемент, но постарайтесь сделать это насколько возможно кратко.

Такое использование классов и идентификаторов, заметно облегчает понимание и увеличивает эффективность кода.

4. Не используйте имена классов или идентификаторов с селекторами тега элемента.

Не рекомендуется:

 ul#nev {

}
  div.next {
}

Рекомендуется:

 #nev {

}
  .next {

}

5. Используйте сокращённые формы записи.

Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

CSS предлагает различные сокращённые формы записи (font, background), которые рекомендуется использовать везде, где это возможно.

Не рекомендуется:

font-color: #fff;
font-size: 14px;
font-family: Arial;

Рекомендуется:

font: #fff 14px Arial;

6. Не указывайте единицы измерения для нулевых значений.

Не указывайте единицы измерения для нулевых значений, просто оставляйте 0.

margin: 0;

7. Не ставьте 0 в целой части дробных чисел.

Если необходимо указать дробное число с нулём в целой части, то 0 можно опустить, и начать число с точки.

Не рекомендуется:

font-size: 0.5em;

Рекомендуется:

font-size: .5em;

8. Не используйте кавычки в ссылках.

Не используйте кавычки в URL

background-image: url(images/e157.png);

9. Используйте для записи цвета трёхсимвольную шестнадцатиричную запись.

Трёхсимвольная шестнадцатиричная запись короче, занимает меньше места и быстрее читается.
Не рекомендуется:

#ffffff;
#ccffee;

Рекомендуется:

#fff
#cfe

10. Разделяйте слова в идентификатора и классах дефисом.

Чтобы повысить удобство чтения и облегчить понимание кода css, для соединения слов и сокращений, используйте дефис.

Не рекомендуется:

nextanaction
next_an_action

Рекомендуется:

next-an-action

11. Сортируйте объявления по алфавиту.

Задавайте объявления в алфавитном порядке, чтоб с кодом было легче работать.

Браузерные перфиксы так же должны быть отсортированы. Так —moz должен всегда стоять выше —webkit.

12. Ставьте отступы для содержимого блоков.

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

#wrapper {
	background: #fff;
	color: #bcf;
}

.header {
	float: left;
	width: 100%;

}

13. Ставьте точку с запятой после каждого объявления.

После каждого объявления, не забывайте ставить точку с запятой, для согласованности кода, и обдегчения добавления новых свойств.

14. Используйте пробелы после двоеточий в объявлениях.

Всегда используйте один пробел после двоеточия в объявлении.

Не рекомендуется:

#wrapper {
	background:#fff;
	color:#bcf;
}

.header {
	float:left;
	width:100%;

}

Рекомендуется:

#wrapper {
	background: #fff;
	color: #bcf;
}

.header {
	float: left;
	width: 100%;

}

15. Отделяйте селекторы и объявления переносом строки.
Не рекомендуется:

h1, h2, h3 {
	color: #ddc; line-height: 1.5em;
}

Рекомендуется:

h1, 
h2, 
h3 {
	color: #ddc; 
	line-height: 1.5em;
}

16. Группируйте правила по назначению, и определяйте группы комментарием.

По возможности объединяйте правила в группы, обозначайте группы комментарием, и разделяйте переносом строки.

/* =Global Elements
-------------------------------------------------------------- */

body {
	background: #a0e7fc;
 }

body,
input,
textarea {
	color: #666;
	font-size: 16px;
	line-height: 18px;
}
hr {
	background-color: #e7e7e7;
	height: 1px;
}

Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.

Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.

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

Если Ваш код будет сильно отличаться от существующего, это может сбить читающего, и затруднить чтение. Лучше избежать этого.

Короткий отдых
Перекур

Жена приходит домой в 5 утра.
-Не спрашивай где была. Пойдём в спальню, покажу чему научилась.

html 5 написание < < < ◊ > > > Шаблон HTML + CSS

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *