Несколько советов по CSS верстке

Категории:HTML-верстка, Для начинающих
Теги: , ,

Опубликовано:
23-08-2010

Я вот листал свое портфоли, смотрел код css и html разных заказов и так далее и заметил, что у меня уже даже свой стиль выработался. Или, можно сказать, свое написание кода и расстановка идентификаторов, стилей, правил и так далее. Я решил написать небольшой пост по этому поводу. В посте я буду советовать как лучше вести CSS файл для более легкого понимания и редактирования. Поехали.

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

2. Структурируйте свой css файл таким образом, чтобы все стили, которые описывают,  к примеру, левый сайдбар, отделялись строкой комментариев. Для правого сайдбара и центральной части тоже. Так же отдельно шапка и футтер. Вам будет намного легче находить Ваши классы и идентификаторы.

3.Используйте сокращенные значения цвета и насыщенности текста. К примеру. Вот такая запись:

1
2
3
4
#id{
color:#333333;
font-weight:bold;
}

Так же может быть записана вот так:

1
2
3
4
#id{
color:#333;
font-weight:700;
}

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

4.Необязательно каждый раз прописывать название шрифта для каждого елемента. Есть два варианта  сократить это дело.

Первый. Создать отдельный класс и просто каждый раз вставлять его в html.

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

5. Обязательно комментируйте свой css код. Об этом можно было и не упоминать. Это нужно делать всегда. В Вашем коде должен разобраться любой.

6. Сокращайте свои записи. К примеру вместо этого:

1
2
3
4
background-color:black;
background-image:url('1.jpg');
background-repeat:no-repeat;
background-position: center;

Нужно писать вот так:

1
background:#000 url('1.jpg') no-repeat center;

Согласитесь! Намного проще!

Ну вот, что хотел рассказал. Кого может быть еще что-то интересует?! Прошу пишите в комментарии. Отвечу прямо здесь. А вообще мое Вам пожелание – пишите чистый код и будет Вам счастье =)

Если Вам понравилась статья и Вы хотите следить за обновлениями в блоге, то подписывайтесь через RSS, становитесь моим фолоувером в twitter. Возможно Вы желаете получать обновления себе на мыло? Подписуйтесь на RSS2E-mail. Так же, возможно, Вы хотите разместить постовые или любые другие виды рекламы. В таком случае пишите мне на ICQ:451240340



Похожие статьи:


Комментарии:

3 комментариев к теме: “Несколько советов по CSS верстке”

  1. Chip дата: 23 Авг 2010 в 13:04

    Верно подмечено про сброс стилей, таким образом выработалась сноровка в подметках ошибок, недоработок, всё на виду, отличные советы новичкам, но мне некоторые фокусы были впервые: сокращение – 3 и 6 пункты – знала же что такое возможно:) Спасибо!

  2. Masterix дата: 23 Авг 2010 в 13:33

    На здоровье =) Может что-то еще вспомню, то добавлю в список.

  3. Кэлин дата: 23 Авг 2010 в 17:07

    6-ой совет толковый. Действительно сокращает запись и сам файл.

    Это конечно, прописные истины, но новичкам всё же, не стоит об этом забывать.

Оставить комментарий

*