Який у вас стиль CSS?

Одним із найбільш заплутаних аспектів роботи з CSS (каскадними таблицями стилів) є те, що ви можете писати стилі кількома способами. Подібно до написання прози, те, що ви розумієте основні правила граматики та орфографії, не означає, що ви освоїли писати стислу прозу.

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

Мало того, що надлишковий код завантажується у веб-браузер довше, його набагато важче редагувати чи переглядати пізніше. І чим зайвий ваш код, тим більша ймовірність, що ви зіткнетеся з конфліктами стилів.

Ось п’ять порад щодо написання чистих, ефективних стилів:

• Ніколи не створюйте два стилі, коли достатньо одного. Наприклад, ви можете створити стиль за допомогою селектора тегів для всіх

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

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

• Скорочені шістнадцяткові коди кольорів. Ви можете визначити кольори в CSS, включивши весь шістнадцятковий колірний код. Однак, якщо ви використовуєте повторювані кольорові коди, вам потрібно включити лише перші три символи. Наприклад, #ffffff те саме, що #fff; обидва створять білий колір.

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

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

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

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

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

• * Перевірте та підтвердьте свій код. Навіть досвідчені CSS-дизайнери роблять помилки, тому Dreamweaver містить так багато чудових інструментів для тестування та перевірки коду на ваших веб-сторінках. Обов’язково перевірте свій CSS на предмет поширених помилок.

  Нижче наведено дві служби онлайн-тестування, які можна використовувати для перевірки на наявність помилок у вашому CSS-коді. Просто введіть URL-адресу будь-якої веб-сторінки в Інтернеті в поле адреси на будь-якому з цих сайтів і натисніть кнопку «Надіслати», щоб отримати звіт із будь-якими помилками у вашому коді:

  • Служба перевірки CSS W3C

  • XHTML-CSS : Будь дійсним або не навчайся