Войти
Регистрация

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

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

Здравствуйте, друзья!

При изучении основ CSS важно в самом начале приучить себя оформлять его правильно.

Помните, как в школе, в первом классе нас учили держать ручку, правильно сидеть и держать осанку и т.д, чтобы потом не было проблем в обучении? Так и здесь.

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

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

1. Делайте пробелы при написании правил

При написании кода соблюдайте пробелы для более удобного поиска того или иного правила CSS. Когда у Вас будет большой код, в несколько сотен строк, это Вам отлично поможет при пролистывании файла со стилями. Вот мой пример написания и думаю он популярен у многих web-разработчиков:

h1 {
   color:red;
   font-size:14px;
}

Ставьте один пробел после селектора перед фигурной открывающей скобкой и 2-3 пробела перед свойствами стиля как в примере.

Вот так код читать будет не удобно, когда у Вас его будет много:

h1{
color:red;
font-size:14px;
}

2. Соблюдайте порядок написания и алфавитный порядок.

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

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

Также свойства в правилах пишите в алфавитном порядке. Например, свойство цвета текста и размер шрифта пишите так:

h1 {
   color:red;
   font-size:14px;
}

А не наоборот:

h1 {
   font-size:14px;
   color:red;
}

3. Пишите сокращенный код

В дальнейшем Вы узнаете о том, что некоторые свойства CSS правил могут иметь сокращенный вариант написания. Например, есть такой свойство, как margin (отступ). У него есть вариант написания сокращенный:

h1 {
   margin:20px 0 0 0;
}

Также его можно написать и так, но смысл останется прежним:

h1 {
   margin-top:20px;
   margin-right:0;
   margin-bottom:0;
   margin-left:0;
}

В этом случае первый вариант написания более удобный и правильный.

4. Используйте понятные и сокращенные имена классов и id

Самое сложное и тяжело воспринимаемое это редактирование CSS-стилей, где имена селекторы классов и идентификаторов написаны вот так:

.shapkasaita {...}
.topboxborder {...}
#leftsidebarsec {...}

Ну вы поняли. Пишите имена проще, короче и лучше, если на английском, просто переводите их на английский. Например, вместо класса .zagolovok, напишите .title, а вместо идентификатора #otziv, напишите #review.

5. Поясняйте свой код комментариями

Это правило мне очень помогло, когда я начал его применять и Вам настоятельно рекомендую. Когда кода мало Вы сможете легко найти код правила CSS, но если у Вас тысячи строк, необходимо каждое правило подписывать. Лучше, если в начале файла Вы сделаете себе, что-то вроде меню, чтобы понимать, что за чем следует в файле CSS. Например:

/* Стиль заголовка статьи */
h1 {
   color:red;
   font-size:14px;
}
/* Стиль текста в статье */
p {
   color:red;
   font-size:14px;
}

Здесь мы задали комментарий к каждому правилу.

Заключили его в специальные рамки, в виде /* комментарий */. Без этих рамок могут возникнуть ошибки при применении стилей.

А также в самом начале файла дублируйте эти комментарии в порядке их написания, создавая, что-то вроде меню:

/*
Стиль заголовка статьи
Стиль текста в статье
*/
Ниже уже идут правила стилей

6. Создайте файл CSS Reset

Это последняя рекомендация и тут уже на Ваше усмотрение использовать ее или нет. Файл сброса стилей подразумевает создание отдельного файла reset.css и подключение его к сайту. В этом файле обнуляются все свойства стилей браузера, которые идут по умолчанию. Обычно убираются отступы у всех заголовков <h1>, <h2> и т.д, убираются отступы и поля у блоков, жирное начертание шрифтов у тега <b>, отступы в ячейках таблиц.

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

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?