CSS правильное сокращение.



Путь к мастерству начинается через знания разных правил. Таблицу CSS можно создавать по разному. Можно написать таблицу с использованием множества классов и стилей, а можно упорядочить и оптимизировать. Жестких правил нет, но попробуем рассмотреть некоторые способы, которые помогут облегчить код при написании.

При написании стиля или класса старайтесь оптимизировать их для более широкого использования. Должна присутствовать здравая логика.

Сокращения в CSS

Чем меньше символов в файле, тем меньше его вес и, соответственно, быстрее грузятся страницы.

Единицы измерений для нулевых значений

margin-top: 0px;

margin-top: 0;   - так правильнее

Цвет Background и Сolor

Цвета можно задавать 6 цифрами в шестнадцатиричном формате. Пример:

{
background: #FFFFFF;
color: #000000;
}

Код цвета можно сократить:

{
background: #FFF;
color: #000;
}

Сокращение применяется, если все 6 цифр одинаковы.

Пример 2:

{
background: #FFEE66;
color: #00FF00;
}

Сокращение:

{
background: #FE6;
color: #0F0;
}

Сокращение применяется, если цвет задан из трех пар одинаковых символов.

Размеры Margin, Padding

Величины padding или margin можно задавать по разному. Полная запись:

{
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}

Сокращение:

{
margin: 10px 15px 10px 15px;
padding: 10px 15px 10px 15px;
}

Отступы присваиваются по часовой стрелке начиная с верхнего, т.е. сверху → справа → снизу → слева.

Сокращение:

{
margin: 10px 15px;
padding: 10px 15px;
}

Сокращение применяется, если отступы одинаковы сверху и снизу, справа и слева.

Сокращение:

{
margin: 10px;
padding: 15px;
}

Сокращение применяется, если отступы одинаковы со всех сторон.

Далее рассмотрим: CSS правильное сокращение (продолжение)