Уроки

Статьи

Скачать

Прихожая

Главная

Шаг 1: Создаем сайт

Шаг 2: Размещаем в интернет

Шаг 3: Раскручиваем сайт

Шаг 4: Зарабатываем

Заметил ошибку? Выдели и нажми ctrl+enter

5 способов писать CSS код лучше

Конечно, каждый может писать CSS код. Даже существуют программы, делающие это. Но всегда ли код получается идеальным? Вот пять путей, с помощью которых этого можно добиться.

Путь №1. Сброс

В начале кода следует принудительно обнулять 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, font, 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 {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

а затем уже переопределять значения CSS. Это делается потому, что разные браузеры могут по-своему интерпретировать неопределенные значения и не всегда это будет так, как нам нужно.

Путь №2. Алфавитный порядок

Значения свойств следует писать в алфавитном порядке. Например, так:

div#header h1 {

border-bottom: 1px solid #dedede;

color: #000;

font-size: 18px;

line-height: 24px;

margin-right: 48px;

position: relative;

z-index: 101;

}

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

Путь №3. Структурирование и организация.

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

Например так:

/*****Сброс*****/

Сбрасываем параметры всех тегов

/*****Базовые элементы*****/

Определение стилей для тегов: body, h1-h6, ul, ol, a, p и т.п.

/*****Базовое расположение элементов сайта*****/

Определите расположение элементов сайта: header, footer и т.п.

/*****Хедер*****/

Определите значения элементов хедера

/*****Содержание*****/

Определите значения элементов содержательной части сайта.

/*****Футер*****/

Определите значения элементов футера

/*****и т.д.*****/

Определите значения элементов для других частей сайта

Использование комментариев и группировка CSS по элементам поможет быстрее найти и изменить то значение, которое вы хотите.

Путь №4. Улучшение читаемости и внешнего вида кода.

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

Например так:

div#header { float: left; width: 100%; }

div#header div.column
{

border-right: 1px solid #ccc;

float: rightright;

margin-right: 50px;

padding: 10px;

width: 300px;

}

Путь №5. Начать вовремя.

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

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

И запомните: CSS - ничто без хорошо организованного и правильно структурированного web-документа.

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

Источник http://trevordavis.net, перевод - http://ruseller.com

Есть вопрос? Получи ответ на ФОРУМЕ ПОДДЕРЖКИ

Дата добавления: 2009-08-08 Просмотров: 12804 Автор:Trevor Davis

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

Автор: Гарик
Дата : 2009-08-09

Большое спасибо. Будем улучшать вид документов. С уважением Гарик.

Автор: Лидия
Дата : 2009-08-15

Спасибо Вам. Вы умница

Автор: Анатолий
Дата : 2009-08-16

Спасибо! Очень полезно, ёмко и кратко.

Автор: Ваня
Дата : 2009-09-10

Спасибо

Автор: apel
Дата : 2009-09-13

организующе-ускоряющий подход

Автор: Vasil
Дата : 2010-02-11

Пункт первый "Сброс" решил половину моих проблем, спасибо

Автор: Алигатор
Дата : 2010-07-02

Спасибо за статью, хоть немного мозги освежил.:))

Автор: john9
Дата : 2010-08-10

А возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон, как здесь: http://www.alexandergusev.com/

Автор: rewwer
Дата : 2010-09-30

Автор: john9 Дата : 2010-08-10 А возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон, как здесь: http://www.alexandergusev.com/ в данном случаи используется изображение + js читать здесь (http://www.sitepoint.com/foru ms/showthread.php?t=552791)

Добавить комментарий:

Поиск по сайту