Расскажу о своих правилах, которые я использую в любом файле CSS.
Зачем это нужно? Во первых, ваш CSS-файл будет легче читаться и восприниматься. Во вторых, хороший стиль написания это всегда плюс. Ну и в третьих, это намного упрощает жизнь.
1. Всё должно быть абсолютно валидным. Я стараюсь избежать даже warning’ов.
Нужно привыкать к качественному, валидному коду. Это намного эстетичней и полезней грязного «какпопало».
2. Старайтесь комментировать как можно больше.
Даже очевидным вещам не помешают комментарии. Например, перед блоком header я пишу /* Шапка */, перед footer /* Подвал */. Вроде очевидно, но мельком просматривая код, зацепиться глазом намного легче, особенно если файл стилей разбит на логические блоки. Но перебарщивать тоже не стоит.
3. Разбивайте файл на логические блоки.
Каждый логический блок от другого отделяется пустой строкой. Блоки идут в логическом порядке, сначала подготовки(CSS reset и другие мелочи), затем блок body, после него идут блоки настроек основных компонентов(ссылок, параграфов, заголовков и т.д.).
С помощью блоков и комментариев просматривать и находить что-то в файле стилей становится безумно удобно и просто.
4. Сортируйте свойства CSS по алфавиту.
По началу немножко трудно, особенно для тех, кто не шибко знаком с английским алфавитом. Но в дальнейшем привыкаешь и уже автоматом пишешь свойства по алфавиту. Безумно упрощает редактирование.
5. Используйте иерархию.
Иерархия довольно удобная вещь. Например, есть заголовок, в который вложено 2 блока, очень приятно для глаза будет описать эти блоки в иерархическом порядке:
6. Используйте 2 стиля написания, короткий и длинный:
Если свойств очень мало, то зачем писать длинный блок? Упростим как чтение, так и размер файла стилей.
7. Определитесь со стилем написания.
Например, я использую для отступа табуляцию, для построения иерархии 2 пробела. Каждому свойству я задаю значение после пробела(text-align: center;)
8. Обязательно используйте CSS Reset.
Ставить заплатки(костыли) под разные браузеры уже не модно. IE6 официально умер. Большую часть всего можно верстать валидно используя CSS Reset.
Надеюсь, мои советы вам помогут. Пользуетесь ли вы какими-то правилами? У вас есть замечания или дополнения? Пишите в комментариях, буду рад услышать ваше мнение :)
Зачем это нужно? Во первых, ваш CSS-файл будет легче читаться и восприниматься. Во вторых, хороший стиль написания это всегда плюс. Ну и в третьих, это намного упрощает жизнь.
1. Всё должно быть абсолютно валидным. Я стараюсь избежать даже warning’ов.
Нужно привыкать к качественному, валидному коду. Это намного эстетичней и полезней грязного «какпопало».
2. Старайтесь комментировать как можно больше.
Даже очевидным вещам не помешают комментарии. Например, перед блоком header я пишу /* Шапка */, перед footer /* Подвал */. Вроде очевидно, но мельком просматривая код, зацепиться глазом намного легче, особенно если файл стилей разбит на логические блоки. Но перебарщивать тоже не стоит.
3. Разбивайте файл на логические блоки.
Каждый логический блок от другого отделяется пустой строкой. Блоки идут в логическом порядке, сначала подготовки(CSS reset и другие мелочи), затем блок body, после него идут блоки настроек основных компонентов(ссылок, параграфов, заголовков и т.д.).
С помощью блоков и комментариев просматривать и находить что-то в файле стилей становится безумно удобно и просто.
4. Сортируйте свойства CSS по алфавиту.
По началу немножко трудно, особенно для тех, кто не шибко знаком с английским алфавитом. Но в дальнейшем привыкаешь и уже автоматом пишешь свойства по алфавиту. Безумно упрощает редактирование.
5. Используйте иерархию.
Иерархия довольно удобная вещь. Например, есть заголовок, в который вложено 2 блока, очень приятно для глаза будет описать эти блоки в иерархическом порядке:
6. Используйте 2 стиля написания, короткий и длинный:
Если свойств очень мало, то зачем писать длинный блок? Упростим как чтение, так и размер файла стилей.
7. Определитесь со стилем написания.
Например, я использую для отступа табуляцию, для построения иерархии 2 пробела. Каждому свойству я задаю значение после пробела(text-align: center;)
8. Обязательно используйте CSS Reset.
Ставить заплатки(костыли) под разные браузеры уже не модно. IE6 официально умер. Большую часть всего можно верстать валидно используя CSS Reset.
Надеюсь, мои советы вам помогут. Пользуетесь ли вы какими-то правилами? У вас есть замечания или дополнения? Пишите в комментариях, буду рад услышать ваше мнение :)
