<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Правила написания CSS

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (20):

sergeevna sergeevna 08.02.2012 16:47:24

Здравствуйте Михаил. Подскажите пожалуйста что такое default css?

Ответить

Admin Admin 08.02.2012 16:49:16

Это файл, в котором сбрасываются все стили, чтобы все браузеры стали одинаково отображать стиль на данном этапе. Традиционно он называется reset.css

Ответить

sergeevna sergeevna 08.02.2012 16:59:37

т.е. этот файл не является таблицей стилей?

Ответить

Admin Admin 08.02.2012 17:01:39

Является. Там задаются правила, где обнуляются всякие отступы, поля, рамки и прочие свойства, которые даются браузерами по умолчанию. Введите в google reset.css, и, думаю, что первый же сайт покажет, как выглядит данный файл.

Ответить

sergeevna sergeevna 08.02.2012 17:12:23

Спасибо за ответ. К сожалению поисковики не дали такой исчерпывающий ответ как Вы. Спасибо еще раз!

Ответить

ppk-center ppk-center 05.03.2012 19:55:50

Вот так выглядит 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; }

Ответить

sergeevna sergeevna 05.09.2012 20:22:03

Здравствуйте Михаил. Можно подробней объяснить про написание CSS файл (reset.css). Нужно убрать на сайте жирное подчеркивание текста,а страниц очень много. Как правильно это написать?

Ответить

Admin Admin 06.09.2012 19:10:09

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

Ответить

keffir4ikd keffir4ikd 21.03.2013 15:23:28

Здравствуйте!Подскажите как избавиться от этих пробелов по бокам? http://s2.ipicture.ru/uploads/20130321/rrSkV21f.png

Ответить

Admin Admin 21.03.2013 15:28:33

body {margin: 0; padding: 0;}

Ответить

ala major ala major 25.03.2013 23:35:39

Здравствуйте, Михаил. Изучаю с-час Ваш РНР курс, всё шло отлично до момента, когда началась работа с "подвалом". Я сделал всё один в один как Вы, проверил код несколько раз, но тем не менее для "подвала" CSS словно не работает, именно для "подвала". Не могу никак сдвинуть "Все права защищены" в центр страницы. Не подскажете, в чём может быть дело?

Ответить

Admin Admin 26.03.2013 09:41:30

В чём угодно, гадать не буду.

Ответить

tolia2012 tolia2012 09.10.2013 00:46:07

привет,какая стандартная ширина сайта?спасибо.

Ответить

Admin Admin 09.10.2013 10:44:24

Смотря какого. Обычно делают 990px ширину, если фиксированная. А если резиновая, то адаптируют под 990px и выше.

Ответить

tilipaka tilipaka 01.11.2013 01:03:04

Здравствуй Михаил, не могли бы вы проще (или на примере) объяснить правило №1. Никак не доходит до меня...

Ответить

Admin Admin 01.11.2013 10:55:34

Во-первых, рекомендую использовать только CSS из тега link. Во-вторых, его нужно писать так, что даже переставив местами селекторы, ничего не изменится.

Ответить

m773ma@gmail.com [email protected] 28.12.2013 18:28:48

Здравствуйте! Как лучше задавать стиль для содержимого div - присваивая класс/id блоку, то есть самому divу, или же содержимому?

Ответить

alexandrdante alexandrdante 28.12.2013 18:33:43

В зависимости от содержимого. Если это текст,то лучше блоку. Если это список или ещё что-то,то лучше самому списку. Роли не играет.Зависит от нужной вложенности

Ответить

kevin2013 kevin2013 15.02.2014 00:30:45

dobrii ve4er. u menea document css ne delaet nikakih izmenenia,ne mogu poneati v 4iom problema? zaranee spasibo.

Ответить

alexandrdante alexandrdante 15.02.2014 01:00:25

проблем может быть до миллиона) вы его хоть подключили? прочтите,что такое CSS пройдите бесплатный курс от Михаила по HTMl,чтобы понимать что и как

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.