Найпростіший спосіб задати стиль для HTML-елемента, це вказати параметр ID. а потім описати в файлі стилю оформлення для даного елемента. Такий варіант працює, надає певні переваги. Наприклад, всі елементи, що ведуть на головну сторінку сайту, будуть мати однакове оформлення - це добре. Але коли ви використовуєте складне HTML-форматування сторінки, практично кожному HTML-тегу доведеться ставити значення ID. Це в свою чергу буде збільшувати розмір Web-сторінки (дивіться статтю Оптимальний розмір Web-сторінок), істотно знижувати читабельність коду. А коли через якийсь тривалий час ви спробуєте оновити сторінки або змінити її, то зіткнетеся з проблемою надмірної використання параметрів ID у тегів.
Аналогічна ситуація виникає і при використанні параметра CLASS. Таким чином, виходить, що використовувати параметри ID і CLASS для створення унікального оформлення всіх елементів HTML-сторінки в кінцевому рахунку веде до погіршення розуміння сторінки. Вам, як Web-майстру, доведеться постійно відволікатися від контенту сторінки на додавання цих параметрів і їх описів в CSS-файлі.
Тому варто використовувати властивість каськадності даних таблиць? Та тільки тому, що ви позбудетеся від численних параметрів ID і CLASS. Це призведе до того, що ваші Web-сторінки стануть простішими, елегантними і головне менше за розміром. А що найголовніше, так це те, що вони залишаться такими ж по оформленню.
Найбільш наочним прикладом, де можна використовувати властивість каськадності, є вихідний код. Припустимо, ми маємо якийсь вихідний код на якійсь мові програмування (щоб не відходити далеко від теми розробки сайтів, візьмемо HTML-код). Даний код нам необхідно вивести на сторінку, для цього обрамляемо даний код тегами . Тепер весь код буде відображатися в браузері моноширінним шрифтом (за замовчуванням для багатьох браузерів - це шрифт Courier New). З огляду на, те що ми використовуємо тег
. то нам не потрібно додатково форматувати вихідний код, що поміщається на сторінку, додаючи тег
.
Для того, щоб ви зрозуміли ефективність використання властивості каськадності, наведемо приклад без використання даного властивості (суто для порівняння).
Подивіться скільки тегів . які використовують параметр ID. Багато! Погодьтеся, що даний код вам буде дуже складно відредагувати і змінити в подальшому. Тому зараз наведемо цей же код, але який використовує властивість каськадності стильових таблиць.
Код став компактніше, менше, а головне його простіше редагувати. Ще одним позитивним моментом при використанні властивості каськадності стильових таблиць є те, що використовуючи каскад (наприклад, CODE B) ми задаємо тегом певні параметри, які будуть до нього застосовані тільки в тому випадку, якщо даний тег знаходиться всередині тега .
Тепер наведемо більш простий приклад:
А ось цей приклад, як його бачить відвідувач вашої сторінки:
Quick PageQuick PageQuick PageQuick PageQuick Page
Бачите всю простоту і елегантність файлу стилю, коду сторінки. Але ж вам ніхто не забороняє використовувати структурну каскадність, створюючи багатокаскадні таблиці стилів; кожен наступний рівень якої буде перекривати параметри попереднього рівня.