Правила написания CSS
Данную статью поймут только те, кто знаком с основами CSS, поэтому, если Вы не знаете, что это такое, то сначала почитайте другие статьи на этом сайте.
В этот раз мне хочется дать Вам несколько советов о правилах написания CSS. Многие Web-дизайнеры используют CSS неправильно. И если при небольшом коде - это не страшно, то если стиль уже растянут на сотни, а то и тысячи строк, то наступает момент, когда дизайнер уже не понимает, что происходит. И еле-еле на соплях и кое-как, до конца уродуя код, доводит дело до "завершения". В результате, ни о каком качестве и стабильности работы и речи идти не может. Вот чтобы свести данный фактор к минимуму (потому что полностью уничтожить его всё равно не получится), хочу дать Вам несколько советов по написанию стилей CSS.
Правило написания CSS №1 - Забейте на порядок
Многие дизайнеры используют порядок написания стилей, чтобы задавать разные приоритеты. То есть если мы напишем два свойства с разными значениям в одном типе CSS стиля (inline-стиль, внедрённый стиль и другие), то будет применён тот стиль, который написан ниже. Причём, это относится не только к свойствам, но и к селекторам. То есть часто на разных страницах, в разных порядках подключается стили, чтобы каждая страница применяла в итоге свои. Разумеется, это крайне плохо, потому что если случайно нарушить порядок, то ошибка проявится (и самое страшное - не факт, что сразу), и найти её будет весьма трудно. Вдобавок, велика вероятность дублирования, а это уже "грязь", которая, в лучшем случае, просто увеличит размер файла, а в худшем даст сбой в самый неожиданный момент. Поэтому избегайте влияние порядка по максимуму!
Правило написания CSS №2 - Не бойтесь наследования
Почему-то большинство Web-дизайнеров боятся наследования, а ведь оно помогает здорово сократить и упростить CSS стиль. Вместо этого, дизайнеры ставят огромное количество многоуровневых контекстных селекторов. И так для каждого элемента на странице. Без спору это надо, но лишь тогда, когда необходимо переопределить основной стиль, а писать для каждого элемента (иногда даже одно и то же) - это очень плохой признак.
Правило написания CSS №3 - Соблюдайте свой стиль
Очень важным правилом является соблюдение собственного стиля написания. Например, у меня стиль написания такой:
b {
font-size: 120%;
}
p {
color: red;
font-size: 80%;
}
То есть у меня правила такие: название селектора, пробел, фигурная скобка, со следующей строки табуляция, название свойства, двоеточие и через пробел значение. Если имеются другие свойства у селектора, то со следующей строки, через табуляцию, вновь название свойства, а через двоеточие и пробел - значение. Все селекторы (в моём примере - b и p) я отделяю пустой строкой. Вот такой мой стиль написания стилей. Ещё рекомендуется писать селекторы по алфавиту - это тоже правильно, и я последнее время так их и пишу. Но главное - это соблюдать свой собственный стиль всегда и везде. Потому что многие его меняют день ото дня, а потом у них затрудняется восприятие того, что они понаписали.
Правило написания CSS №4 - Используйте комментарии
Это правило, которое соблюдают поистине единицы, к которым даже я не отношусь (хотя пытаюсь исправляться). Многие скажут использование комментариев - это не очень хорошо, потому что, во-первых, они увеличивают размер файла, а, во-вторых, зачем на них тратить время, если данный стиль нужен только мне, и никто больше на него смотреть не будет. Оба мнения ошибочные: первое потому, что никто Вас не заставляет писать целые тома, а 4-5 слов для каждого селектора увеличат в среднем не более, чем на 10%. А второе мнение ошибочно потому, что никто не знает, как будет развиваться Ваш сайт. И если он будет посещаемым, и Вам придёт в голову сменить дизайн, то будет плохо для человека, которого Вы наймете. Или если сами захотите сменить дизайн, то тоже лучше не будет, так как Вы уже забудете: где, что и зачем находится. Поэтому старайтесь комментировать то, что пишите, почаще.
Правило написания CSS №5 - Файл сброса
Данное правило остаётся под сомнением, хотя, без спору, оно является правильным, вот только использовать его или нет я оставляю на Ваше усмотрение. Заключается оно в следующем: необходимо создать CSS файл (reset.css), который будет сбрасывать все стили, применённые к стандартным элементам HTML. Например, убрать жирное начертание у тега <b> или убрать больший размер текста у заголовков <h1>. То есть просто уничтожить форматирование HTML-документа. Это хорошо, так как Вы будете точно знать, что никаких сюрпризов не будет, и Ваш код любой браузер воспримет на "Ура", а уже отсюда можно потихоньку наращивать файл стилей.
Пользоваться или нет данным советом - решать Вам, но, на мой взгляд, это очень большая потеря времени. И в итоге, Вам всё равно придётся ставить те стили, которые Вы изначально удалили.
Вот и все правила написания CSS, о которых я хотел Вам поведать в этой статьей. Если Вы будете соблюдать эти правила, то гарантирую, что с грязным кодом будет покончено!
-
- Михаил Русаков
Комментарии (20):
Здравствуйте Михаил. Подскажите пожалуйста что такое default css?
Ответить
Это файл, в котором сбрасываются все стили, чтобы все браузеры стали одинаково отображать стиль на данном этапе. Традиционно он называется reset.css
Ответить
т.е. этот файл не является таблицей стилей?
Ответить
Является. Там задаются правила, где обнуляются всякие отступы, поля, рамки и прочие свойства, которые даются браузерами по умолчанию. Введите в google reset.css, и, думаю, что первый же сайт покажет, как выглядит данный файл.
Ответить
Спасибо за ответ. К сожалению поисковики не дали такой исчерпывающий ответ как Вы. Спасибо еще раз!
Ответить
Вот так выглядит reset.css: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
Ответить
Здравствуйте Михаил. Можно подробней объяснить про написание CSS файл (reset.css). Нужно убрать на сайте жирное подчеркивание текста,а страниц очень много. Как правильно это написать?
Ответить
Выше уже есть пример, как он выглядит. В нем нет ничего особенного, просто перебираются и сбрасываются все возможные свойства.
Ответить
Здравствуйте!Подскажите как избавиться от этих пробелов по бокам? http://s2.ipicture.ru/uploads/20130321/rrSkV21f.png
Ответить
body {margin: 0; padding: 0;}
Ответить
Здравствуйте, Михаил. Изучаю с-час Ваш РНР курс, всё шло отлично до момента, когда началась работа с "подвалом". Я сделал всё один в один как Вы, проверил код несколько раз, но тем не менее для "подвала" CSS словно не работает, именно для "подвала". Не могу никак сдвинуть "Все права защищены" в центр страницы. Не подскажете, в чём может быть дело?
Ответить
В чём угодно, гадать не буду.
Ответить
привет,какая стандартная ширина сайта?спасибо.
Ответить
Смотря какого. Обычно делают 990px ширину, если фиксированная. А если резиновая, то адаптируют под 990px и выше.
Ответить
Здравствуй Михаил, не могли бы вы проще (или на примере) объяснить правило №1. Никак не доходит до меня...
Ответить
Во-первых, рекомендую использовать только CSS из тега link. Во-вторых, его нужно писать так, что даже переставив местами селекторы, ничего не изменится.
Ответить
Здравствуйте! Как лучше задавать стиль для содержимого div - присваивая класс/id блоку, то есть самому divу, или же содержимому?
Ответить
В зависимости от содержимого. Если это текст,то лучше блоку. Если это список или ещё что-то,то лучше самому списку. Роли не играет.Зависит от нужной вложенности
Ответить
dobrii ve4er. u menea document css ne delaet nikakih izmenenia,ne mogu poneati v 4iom problema? zaranee spasibo.
Ответить
проблем может быть до миллиона) вы его хоть подключили? прочтите,что такое CSS пройдите бесплатный курс от Михаила по HTMl,чтобы понимать что и как
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.