CSS : правильне використання - запорука успіху

Михайло Дубаков

Починаємо свій шлях до майстерності. Він буде досить довгим і непростим, але ви впораєтеся, якщо у вас є мета. Принаймні, до цього моменту ви вже володієте певним багажем знань, достатнім для застосування на практиці. Однак використовувати CSS можна по-різному. Мета цього розділу - навчити вас застосовувати CSS правильно. Повірте, це не так просто, як здається на перший погляд. Адже можна просто особливо не задумуючись написати таблицю стилів з безліччю класів і непотрібних оголошень, яка буде коректно працювати. Але така таблиця стилів буде неоптимальною і незручною. Неоптимальною тому, що її можна значно скоротити і зменшити об'єм, що важливо. Незручною тому, що розбиратися в неврегульованих нагромадженні класів досить складно. Взагалі жорстких правил при написанні таблиці стилів ні, тому що написати стиль можна по-різному і це буде працювати, однак є безліч рекомендацій. Крім того, можна все ж виділити одну головну правило, яке завжди треба застосовувати при використанні CSS.

Правило

Перш ніж написати якийсь стиль або ввести новий клас, задумайтеся, чи не можна оптимізувати і порядок код іншим способом. Зробити так, щоб не вводити цей клас або ввести максимально широко. Логіка - незамінний помічник будь-якого професійного веб-майстра. Запам'ятайте це.

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

Форматування таблиць стилів

Головне вимога - у таблиці стилів повинен бути порядок. Візьмемо приклад з попередньої голови. Ось ця таблиця:

P (color: # 000; font: x-small Verdana)

BODY (background: # FFF)

# mainmenu A (color: # 000; font: bold small Arial)

H3 (color: # 000; font-family: Arial)

. back (background: url (img/fragment_3.gif) no-repeat;)

# submenu A (color: # FFF; font: bold xx-small Arial)

. bluecol (background: # 1d3d4e)

Погодьтеся, що розібратися у ній з першого погляду не так-то просто. Тут перемішані всі види селектор і немає ніякого порядку. Структура таблиці непередбачувана і, що ще гірше, в неї абсолютно відсутня внутрішня логіка побудови, тобто немає ніяких правил, які допомогли б знайти потрібне оголошення.

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

Як ви пам'ятаєте, існує кілька типів селектор: елементи, класи, ID. Так що якщо формувати блоки за типами селектор вже буде якийсь рівень організованості. Перше правило організації таблиць.

Рада

Розділіть селектори, тобто сформуйте перший блок з селектор по елементах, другий блок з селектор по класах, а третій блок з селектор по ID. Блоки один від одного можна відокремлювати додатковим перекладом рядки.

В нашому випадку блок селектор по елементах буде складатися з H3, P і BODY, другий блок з селектор по класах буде складатися з. back і. bluecol, третій блок з селектор по ID складатиметься з # mainmenu і # submenu. А таблиця стилів буде виглядати так:

BODY (background: # FFF)

H3 (color: # 000; font-family: arial)

P (color: # 000; font: x-small Verdana)

. back (background: url (img/fragment_3.gif) no-repeat;)

. bluecol (background: # 1d3d4e)

# mainmenu A (color: # 000; font: bold small arial)

# submenu a (color: # fff; font: bold xx-small arial)

Крім того, у кожному блоці селектори треба розставити у алфавітному порядку. На першій погляд, це не дуже сильно впорядкує таблицю стилів, проте є досить вагома причина дотримувати таке правило. На перших порах вам буде абсолютно всі одно, в якому порядку розташовані селектори в трьох блоках, проте поступово ви звикнете розташовувати селектори саме в алфавітному порядку, внаслідок чого в своїх таблицях стилів будете орієнтуватися легко, і швидко знаходити необхідні правила. Ви будете підсвідомо відчувати, що селектор. Back знаходиться на початку блоку селектор по класах, тому що починається з літери b, а селектор. vis - в кінці, тому що починається з букви v.

Окремо узяте правило теж можна записати по-різному. Часто замість того, щоб записувати правило в один рядок

P (color: # 000; font-size: 12px; padding-left: 1em)

використовують запис у кілька рядків:

P (

color: # 000;

font-size: 12px;

padding-left: 1em)

Робиться це для полегшення перегляду таблиці стилів. На мій погляд, писати кожне оголошення з нового рядка краще тільки для невеликих таблиць, тому що велика таблиця стилів при такій формі запису розтягнеться на кілька екранів, і пошук потрібного оголошення тільки затрудняється.

Для наочності запис стилів у кілька рядків використовується в даній книзі. Це поліпшує сприйняття, тому що довгих лістингів коду мало.

Що стосується самих властивостей, то для них ви можете встановити свої власні правила. Давайте розглянемо два зовсім маленькі таблиці стилів.

Перша:

P.emphasize (

font-size: 14px;

text-indent: 1em;

color: # 000;

font-style: italic)

TD (

font-style: italic;

color: # 000;

font-size: 14px)

Друга:

P.emphasize (

color: # 000;

font-style: italic;

font-size: 14px;

text-indent: 1em)

TD (

color: # 000;

font-style: italic;

font-size: 14px)

А тепер уважно порівняйте їх і дайте відповідь на питання, яка структурована краще і чому? Подумайте дві хвилини, не читайте далі.

Знайшли відповідь? Якщо так, то ви звичайно погодитеся зі мною, що друга таблиця виглядає більш логічною. У правилах другій таблиці стилів властивість кольору йде на першому місці, потім слідують властивості шрифту, а потім властивості тексту, тоді як у перші таблиці стилів немає ніякої системи. Особливо це важливо для великих таблиць стилів і в тому випадку, якщо ви записуєте правило в один рядок.

Для себе ви можете виробити який завгодно порядок розташування властивостей, однак при написанні таблиць стилів ви повинні суворо його дотримуватися. Наприклад, я завжди на першому місці ставлю колір, на другому - властивості шрифту, на третьому - властивості тексту, а потім поля, відступи і рамки. Повторюю, спочатку порядок може бути будь-яким, головне, щоб ви його суворо дотримувалися і поступово звикали до нього.

Рада

Сформулюйте раз і назавжди свої власні правила структури таблиці стилів і дотримуйтесь їх неухильно. Звичка - потужний інструмент збільшення продуктивності.

Імена класів і ID

При верстці вам частенько доведеться вводити нові класи і якось їх називати. Природним чином виникає бажання, щоб назви були короткими і логічними. Якщо клас для заголовків розділу назвати head1, то це буде досить логічно і коротко, а якщо bigblacktext - Нелогічно і довго. Звичайно, часто зустрічаються ситуації, коли не виходить придумати відповідну коротку назву, тоді доводиться чимось жертвувати: або завдовжки, або логічністю. Особисто я вважаю за краще жертвувати логічністю, тому що у своєму коді я розберуся завжди. Однак якщо над проектом працює кілька HTML-верстальників і кожний з них створює будь-яку частину сайту, то краще жертвувати довжиною, тому що в цьому випадку логічність набагато важливіше. Погодьтеся, далеко не кожен зрозуміє, що клас aa позначає, наприклад, відступ праворуч на 10 пікселів, тоді як клас rightpad10 про це свідчить досить однозначно. Взагалі вам весь час доведеться балансувати на межі між обсягом і логікою, важливо зберігати баланс в більшості випадків і чітко уявляти собі, коли його можна порушити. Порушити його можна у двох випадках.

Якщо ви професіонал і працюєте над HTML-кодом сайту поодинці.

Якщо вам до зарізу треба максимально зменшити об'єм коду і важливим стає кожен зайвий байт.

Більше про правила форматування таблиць стилів нічого сказати не можна. Перейдемо до того, як створювати оптимізовані таблиці.

Оптимізація таблиць стилів

В будь-якій справі оптимізація є процес бажаний, а часто необхідний. Це природно, тому що він несе всілякі вигоди, починаючи з збільшення швидкості роботи програми та закінчуючи зменшенням витрат. Якщо взяти локальну область, таку як верстка сайтів та написання таблиць стилів в Зокрема, то під оптимізацією розуміється зменшення обсягу коду, що приносить наступні вигоди:

незначно прискорюється завантаження сторінок;

писати і редагувати таблицю стилів стає дещо простіше через зменшення числа селектор і властивостей, що в кінцевому підсумку веде до економії часу, хай і незначною.

Як бачите, не варто чекати від оптимізації якихось чудес, але й нехтувати їй не потрібно, тому що це характеризує вас як професіонала і показує ваше ставлення до справи. Власне кажучи, прагнення до оптимізації коду - одна з характерних рис професійних HTML-верстальників.

Існує кілька правил, які можуть допомогти вам написати оптимізовану таблицю стилів.

Стилі за замовчуванням

Не варто писати нічого зайвого. Практично всі властивості CSS мають яке-небудь значення за замовчуванням. Не варто явно їх вказувати. Наприклад, стиль на елемент

, наведений нижче

P (

font-style: normal;

letter-spacing: normal;

text-decoration: none)

взагалі не має сенсу, тому що всі ці значення для елементів

встановлені за замовчуванням. Навіщо ж їх вказувати явно? Звичайно, можливі випадки, коли треба переписати встановлений раніше стиль. Наприклад, ви хочете, щоб всі елементи

були підкресленими і пишіть стиль:

H1 (

text-decoration: underline;)

Але раптом вам знадобилося, щоб деякі з заголовків першого рівня виводилися неподчеркнутимі. Для цього вам доведеться ввести якийсь додатковий клас. Наприклад, такий:

H1.nounderline (

text-decoration: none)

Те Тобто ви перше правилом переписали значення за замовчуванням для елементів

, тому потім довелося явним чином відновлювати це значення для заголовків з класом nounderline. У цьому випадку іншого виходу немає, але взагалі якщо вам немає необхідності змінювати стилі елементів, то і не треба прописувати значення за замовчуванням явним чином.

Правило

Не вказуйте в таблиці стилів значень, які є для цього елемента значеннями за замовчуванням.

Скорочені форми запису

Другий спосіб скоротити обсяг таблиці стилів - використання скорочених форм запису деяких властивостей. У таблиці вони систематизовані.        

Скорочена форма         

Вхідні властивості             

font: italic small-caps 12px/140% Tahoma,   sans-serif         

font-style: italic   

font-variant: small-caps   

font-weight: normal   

font-size: 12px   

line-height: 140%   

font-family: Tahoma, sans-serif             

margin: 1em 2em 0 1em         

margin-top: 1em   

margin-right: 2em   

margin-bottom: 0em   

margin-left: 1em             

padding: 10px 20px         

padding-top: 10px   

padding-right: 20px   

padding-bottom: 10px   

padding-left: 20px             

border: 1px solid # 000   

border-top: 1px solid # 000   

border-right: 1px solid # 000   

border-bottom: 1px solid # 000   

border-left: 1px solid # 000         

border-width: 1px   

border-style: solid   

border-color: # 000             

background: url ( "backgr.gif") # FFF   repeat-x         

background-color: # FFF   

background-image: url ( "backgr.gif")   

background-repeat: repeat-x   

background-attachment: scroll   

background-position: 0px 0px     

Використання скорочених форм запису є справою досить корисним і потрібним, тому що обсяг таблиці стилів при цьому значно зменшується. Це видно вже з порівняння правого і лівого стовпців табл. 5.1, але щоб остаточно вас переконати, я наведу ще один нескладний приклад. Хай нам треба створити блок rule, який має чорну рамку товщиною один піксель і внутрішні відступи величиною 10 пікселів. Ширина блоку буде 300 пікселів, а текст в ньому буде виводитися напівжирним шрифтом Verdana розміром 12 пікселів. Якщо не користуватися скороченими формами запису взагалі, то код буде такий:

# rule (

font-family: Verdana, sans-serif;

font-weight: bold;

font-size: 12px;

width: 300px;

border-top: 1px solid # 000;

border-right: 1px solid # 000;

border-bottom: 1px solid # 000;

border-left: 1px solid # 000;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px)

Скористаємося скороченими формами запису, і правило для блоку у нас вийде таке:

# rule (

font: bold 12 px Verdana, sans-serif;

width: 300px;

border: 1px solid # 000;

padding: 10px)

Перше правило займало 290 байт, а друга всього 96. Вага зменшився в три рази, тобто оптимізація досягла 300%! Звичайно, цей приклад показує що буде, якщо не використовувати скорочень взагалі, але тим не менше він абсолютно реальний і вам частенько доведеться створювати дуже схожі блоки, так що прийміть до уваги ці 300%.

Угрупування

Для оптимізації таблиць стилів треба з розумом застосовувати угруповання. Як ви вже знаєте, угруповання - це об'єднання селектор з однаковими оголошеннями. Однак з цього визначення не випливає досить неочевидне твердження, що групувати селектори можна тільки в тому випадку, якщо вони містять абсолютно однакові оголошення. Наприклад, у нас є така таблиця стилів:

P (

color: # 000;

font: 14px Tahoma, Verdana, sans-serif)

TD (

color: # 000;

font: 14px Tahoma, Verdana, sans-serif)

P (

text-indent: 2em)

BODY (

color: # 000;

font: 14px Tahoma, Verdana, sans-serif)

Її можна оптимізувати так:

P, TD, BODY (

color: # 000;

font: 14px Tahoma, Verdana, sans-serif)

P (

text-indent: 2em)

Вийшло дуже компактно, але зате логіка таблиці стилів сильно постраждала. Якщо вам знадобиться змінити будь-яке оголошення в елементі

, то у великій таблиці ви його можете шукати дуже довго, тому що селектори на цей елемент будуть розташовуватися в різних місцях. Запам'ятайте правило.

Правило

Всі оголошення для одного і того ж елемента повинні перебувати в одному місці

Це означає, що в нашому прикладі ми можемо об'єднати тільки селектори на елементи і