Переклад статті “Common CSS Mistakes We Commit and Good CSS Practices“
Створення стилів css – це, здавалось би, одвічна боротьба з браузерами при створенні сайтів. У веб-браузерів постійно оновлюються способи прочитання рядків коду. CSS – це неймовірна мова і дуже часто її використовують неправильно, а це може призвести до
Наведу декілька типових помилок при створенні css- стилю
Неправильне використання CSS reset.
(Скидання параметрів user agent-у браузерів)
Однією з таких потворних властивостей браузерів є впровадження ними своїх стилів для HTML елементів по замовчуванню. Причому в кожного браузера вони свої. Кожен хоче потягнути на себе покривало. Але ж нам, розробникам потрібно щоб сайт виглядав у всіх браузерах однаково. Для цього нам потрібно скинути всі властивості для всіх елементів HTML. Я замітив, що багато хто робить це просто так:
|
1 2 3 4 |
* { margin:0; padding:0; } |
Хоча це затосовується, але повним скиданням це назвати важко. Крім того, необхідно скинути HTML-елементи, такі як границі, підкреслювання в посиланнях, колір елементів, таких як елементи списку, посилання і таблиці, так що ви можете наткнутись на несподівані результати в різних веб-браузерах.
Тому я раджу вам для початку пошукати css reset-и – їх є багато в інтернеті, особисто я користуюсь ресетом від відомого розробника Еріка Мейєра ( Eric Meyer) – але ви можете використати будь-який інший – ваше право.
Додавання лишніх властивостей
Ще одна помилка, притаманна нам і ми схильні до скоєння цього знову і знову, особливо коли верстаємо швидко, спішимо. Це – коли залишаємо кілька селекторів з однаковими властивостями. Ось відомий приклад:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.contentLink { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px } .sidebarLink { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px; } |
Чому б не об`єднати? Зекономимо кілька стрічок:
|
1 2 3 4 5 6 |
.contentLink , .sidebarLink { font-style: italic; color: #eee; margin: 5px; padding: 10px; } |
Забуваємо про скорочення властивостей
|
1 2 3 4 5 6 |
.subHeader { font-family:quot;Comic Sans"; /* just kidding */ font-size: 14px; font-weight: bold; line-height: 1.6; } |
Більшість з нас забуває, ігнорують і, на жаль не знають цього методу. Цей метод дозволить скоротити час завантаження CSS.
За допомогою властивостей CSS-скорочення можна звести до мінімуму розмір вашого файлу CSS ще більше. Порівняйте наступний рядок CSS з вищенаведеним.
|
1 2 3 |
.subHeader { font: bold 14px/1.6 "Comic Sans" } |
Зменшуйте свій CSS
Оптимізуйте CSS для оптимальної продуктивності. Уникайте непотрібних пробілів. Немає проблеми в тому, як ви звикли форматувати свій код . Однак існує поважна причина для видалення зайвих символів (метод більш відомий як Мінімізація). Невелика чатсина розробники просто не зменшують свої CSS файли перед запуском свого проекту. Можливо фізична різниця не велика, але коли є тонни коду – відповідь сайту моде бути досить довгою.
Відсутність резервних шрифтів
Веб-дизайнери в значній мірі обмежується кількома так званими веб-безпечними шрифтів (наприклад, Arial, Georgia і т.д.). Існує позитивна, однак…
Ви все ще можете використовувати шрифти, як Helvetica, які не обов’язково встановлені на кожному комп’ютері. Секрет полягає в базових шрифтах.
Не у всіх користувачів встановлені шрифти, якими верстався ваш сайт, тому базові шрифти необхідні для таких користувачів. Всі мають право комфортно переглядати ваш сайт.
|
1 2 3 |
#selector { font-family: Helvetica; } |
Властивість можна розширити, додавши резервні шрифти:
|
1 2 3 |
#selector { font-family: Helvetica, Arial, sans-serif; } |
Cпособи покращення вашого CSS для майбутніх оновлень.
Коментування – це дуже корисна практика не тільки при можливому майбутньому редагуванню вашого CSS , але і для інших розробників, які працюватимуть з вашим кодом. Якщо в документі є тисячі рядків, можливо, є сенс встановити невеликий зміст в самому верху вашого файлу CSS. Потім за допомогою унікального ключа нумерації (я використовував римські цифри в прикладі), ви можете зробити швидкий пошук, щоб швидко орієнтуватись в коді.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*------------------------------ Table of Contents --------------------------------- I. Headers II. Body Links */ /*------------------------------- I. Title for Headers ---------------------------------*/ h1 {padding:12px 0 0 352px; position:relative;} h2 {color: #eee; font-size: 24px;} h3 {color:#fff; font-size:1.384em; line-height:1.2307em; padding:0 0 22px;} /*------------------------------- II. Title for Body Links ---------------------------------*/ h1 a {display:block; text-indent:-5000px; height:94px; width:259px; background:url('images/logo.png') center center no-repeat;} .h3-link1 {padding-bottom:28px;} .h3-link2 {padding-top:50px;} .h3-link3 {padding-top:40px;} |
Ця організаційна техніка відмінно підходить для розробників, які хочуть читати ваш CSS файл. Іншим методом є розміщення заголовків по всьому документу.
Відділяємо оформлення від вирівнювань
У деяких окремих випадках я бачив, веб-розробники розділяють окремі властивості за допомогою CSS коментарів. Ви можете подивитись , як основна функціональність стилю включає в себе і позиціонування і оформлення. Для прикладу:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.container { /* alignments */ display: block; padding: 12px; margin: 10px 0; /* aesthetics */ background: #ddd; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } |
Це не техніка, яку ви повинні застосовувати в кожному селекторі. Але для деяких селекторів елементів ви можете написати до 20 різних властивостей. Коли ваш CSS файл зростає, він ставатиме складнішим і бруднішим. Тому в деяких випадках такі розділення будуть тільки йти на користь – для кращої орієнтації.Я розказав вам основні такі моменти, які зустрічаю в своїй практиці. Якщо вам є чим поділитись зі мною – будь ласка – коментуйте статтю.