Оскільки я широко використовую CSS протягом 2х років, мені запам'яталося кілька прийомів, які роблять CSS більш ефективним інструментом і вирішують специфічні проблеми. Мені б хотілося поділитися моїми улюбленими CSS-прийомами і пояснити кілька найчастіших помилок, які роблять новачки. Якщо у тебе є досвід роботи з CSS, то скоріше за все на твоєму шляху вже зустрічалися ці поради і прийоми, але хто знає, раптом знайдеться парочка нових.
З самого початку планувалося написати все в одній статті, але рад ставало більше, і тому я розділив все на дві частини для більш легкого засвоєння цього матеріалу.
Якщо значення не дорівнює 0, то завжди вказуй одиницю виміру
Чи не вказувати одиницю виміру для значення довжини - досить часта помилка серед початківців вивчати CSS. Можна уникнути цього в HTML, але в CSS все значення довжини повинні мати одиницю виміру. Є два винятки: значення line-height і 0 (нуль). Замете, що після значення обов'язково повинна слідувати одиниця виміру - не треба вставляти пусте місце (пропуск) між ними.
Немає необхідності вказувати одиницю виміру для 0 (нуля). Нуль пікселів дорівнює нулю сантиметрів або будь-який інший одиниці виміру. Не дивлячись на це, дуже часто зустрічається щось на подобі padding: 0px, коли можна написати padding: 0 і ефект буде таким же.
Немає нічого поганого в тому, щоб додавати до нуля одиницю виміру, просто це зайвий обсяг і, що стосується мене, виглядає не акуратно.
Пам'ятай про чутливість до регістру
Коли CSS використовується разом з XHTML, імена елементів і селектори стають чутливі до регістру. Щоб уникнути пов'язаних з цим проблем, я рекомендую завжди використовувати в CSS-селекторах нижній регістр для імен елементів.
Значення атрибутів class та id чутливі до регістру в HTML і XHTML, тому уникай змішаного регістра в іменах атрибутів class та id. Якщо з якої-небудь причини ти використовуєш змішаний регістр, двічі перевір ідентичність регістра в CSS.
вказуй кольору
Ця рада знаходиться в згаданій раніше статті, але я стільки раз його використовую, що повторюся тут: коли колір в CSS вказується в шістнадцятковій системі числення (hexadecimal colour notation), і коли колір складається з трьох пар шістнадцяткових чисел, тоді ти можеш вказувати кольори більш ефективно шляхом видалення кожного другого числа: # 000 ідентично # 000000, # 369 ідентично # 336699.
І пам'ятайте знак числа - символ "#" перед кодом кольору.
Ще одна порада за кольором - ти можеш вказувати безпечні для Всесвітньої мережі кольору, використовуючи цифри, які множаться на 3 для червоного, зеленого і синього значень: 0, 3, 6, 9, C і F. # 99c є безпечним кольором, # 98c не є.
Виключай типи елементів для селекторів class і id
Коли пишеш селектори, які вказують елемент з певними значеннями class і id, то ти можеш прибрати тип елемента перед точкою (селектор класу) або перед # (id-селектор).
Так, замість того, щоб писати:
ти можеш написати:
і заощадити кілька байтів для кожного з селектор.
Особливо це корисно для селекторів id, так як в документі вони повинні бути унікальними, що знижує ризик конфлікту CSS-правил один з одним. Імена класів, з іншого боку, можуть бути використані в документі будь-яку кількість разів, і різні типи елементів можуть бути присвоєні для того ж імені класу (або декількох імен). Щоб по-різному позначити типи елементів з однаковим ім'ям класу, тобі необхідно буде вказати тип елемента в селекторі.
Знай, що вищенаведені CSS-правила не ідентичні. Якщо вказано одне правило без типу елемента в селекторі, а інше з типом елемента в селекторі, тоді то правило, яке використовує тип елемента, буде мати більш важливу специфіку.
Значення за замовчуванням
/
Часто ти можеш не вказувати значення властивості, спираючись на значення за замовчуванням цього властивості. Особливо це важливо враховувати, коли ти користуєшся скороченими властивостями, так як до будь-якого Незазначені властивості присвоюється відповідне цій властивості значення за замовчуванням.
Одні з найпоширеніших значень за замовчуванням є 0 для padding (правда є кілька винятків), і transparent для background-color.
Виходячи з того, що в різних браузерах є відмінності між значеннями за замовчуванням, деякі люди вважають за краще використовувати на початку CSS-файлу глобальний скидання порожнього простору шляхом обнулення властивостей margin і padding для всіх елементів.
Чи не вказуй заново успадковані значення
Значення багатьох властивостей успадковуються будь-яким нащадком елемента, для якого вказується властивість. Споріднені властивості color і font є найяскравішим прикладом таких властивостей.
Знай, що деякі властивості можуть бути перезаписані специфічними каскадних стилями користувацьких агентів (ПА) браузерів, наприклад значення браузера за замовчуванням. Тому, використовуючи наступне правило, ти не можеш зробити все заголовки нежирними:
Зумовлені правила браузера більш специфічні через каскаду, який описаний далі.
Скористайся перевагою каскаду
Каскад дозволяє тобі використовувати кілька правил для властивостей елемента. Ти можеш перевизначити той же властивість або визначити додаткові властивості. Скажімо, у тебе є наступний код сторінки:
Update: Lorem ipsum dolor set
В CSS, ти можеш використовувати різні правила, щоб вказати властивості, які підходять для всіх елементів p та ті, які специфічні для елементів p з класом update:
Обидва правила будуть скомбіновані для елементів p з класом update. Клас селектора важливіший, ніж тип селектора, тому, коли відбувається конфлікт, будуть використовуватися властивості, певні в другому правилі. В даному випадку color.
Більше інформації про те, як підраховуються CSS-правила можна знайти в Обчислення специфіки селектора в специфікації CSS 2.1.
Кілька імен класів
Будь-яка картинка з класом special матиме навколо себе простір в 2 пікселя і задній фон жовтого кольору. Картинки з класом royaltyfree матимуть кромку в 2 пікселя, а картинки з обома класами матимуть кромку, простір і жовтий фон.
Можна на цьому не зупинятися - це тільки приклад. І постарайся використовувати семантично правильні імена класів, які описують те, що робить елемент, а не те, як він виглядає.
Використовуй селектори нащадків
Не застосовувати препарат селектори нащадків - це один з найпоширеніших прикладів неефективного використання CSS, який я бачу від новачків. Селектори нащадків можуть допомогти тобі обійтися без багатьох атрибутів класу, і зробити твої CSS-селектори більш ефективними. Для прикладу можна взяти наступну структуру коду:
Цей код може супроводжуватися наступним CSS:
div # subnav ul li.subnavitem a.subnavitem
div # subnav ul li.subnavitemselected
div # subnav ul li.subnavitemselected a.subnavitemselected
Ти можеш замінити вищенаведені приклади наступним кодом: