Домівка > CSS > 10 принципів CSS самурая

10 принципів CSS самурая

10 Принципів майстра CSS

Коли доходить до CSS, у всесвітній павутині можна знайти силу-силенну ресурсів і так званих “порад від експертів”. Це поради від неперевірених та самопроголошених “гуру”, які часто не мають ніякого відношення до веб-дизайну. Так як вони інколи дають корисні поради, то як взнати чи це корисний ресурс чи просто невипробуваний хак?

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

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

1. Тримайте CSS якомога простішим – Пітер-Поль Кох.

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

Пітер-Поль Кох є «хрещеним батьком» веб дизайну. Він є представником старої школи розробників і основна частина його портфоліо відноситься до проектів 1998-2002 років. Він працював з Apple та іншими «важковаговиками». Кох написав книгу про JavaScript, але не думайте що йому немає що сказати про CSS.

Небезпека CSS хаків.

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

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

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

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

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

2. Пишіть декларації CSS в одному рядку – Джонатан Снук

Джонатан Снук – неймовірно популярний проектувальник з Оттави, Канада, який зробив ім’я в веб стандартах та дизайні. Він виступав на престижних конференціях на зразок SXSW і опублікував немало статтей про дизайн на Sitepoint.

Один з принципів Джонатана щодо кодування CSS – це тримати декларації в одному рядку.

Інший спосіб, можливо, виглядає більш акуратним, але це безумовно не допомагає мені знаходити що-небудь. Шукаючи будь-що в таблиці стилів, найголовнішим є набір правил (це частина перед { і } ). Я шукаю елемент, id або клас. Наявність всього в одному рядку робить перегляд документа набагато швидшим, оскільки ви просто бачите більше на одній сторінці. Як тільки я знайшов набір правил, який шукав, знайти властивість, яку я хочу, зазвичай достатньо просто.

Джонатан приводить приклад як виглядає об’явлення в один рядок:

Добре

h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Погано

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

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

Тримайте декларації CSS в одному рядку – Джонатан Снук

3. Використовуйте скорочення CSS – Роджер Джохансон

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

Роджер Джохансон знає толк в проектуванні для павутини. Шведський веб-дизайнер працює з Інтернеті починаючи з 1994, і має популярний блог про веб-дизайн.

Джохансон має дуже хорошу статтю про важливість скорочень CSS, і надає деякі приклади, як використовувати це під час кодування CSS. Ось – приклад:

Використання скорочень для цих властивостей може зберегти багато місця. Наприклад, щоб визначити різні марджіни для всіх сторін блоку, ви могли використовувати це: margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; Але це значно більш ефективним є: margin:1em 0 2em 0.5em; Такий же синтаксис використовується для властивості padding.

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

Використовуйте скорочення CSS - Роджер Джохансон

4. Дозвольте блочним елементам заповнювати простір природно – Джонатан Снук

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

Мій чисто практичний метод є наступним – якщо я встановлюю ширину, я не встановлюю margin або padding. І навпаки, якщо я встановлюю margin або padding, я не встановлюю ширину. Робота з блоковою моделлю може бути таким головним болем, особливо, якщо ви маєте справу з відсотками. Тому, я встановлюю ширину на контейнерах, а потім ставлю margin і padding на елементах всередині. Все зазвичай проходить без проблем.

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

Дозвольте блочним елементам заповнювати простір природно - Джонатан Снук

5. Поставте clear, щоб очистити float – Тревор Девіс.

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

Тревор Девіс, можливо, не такий відомий , як Зельдман або Снук в світі дизайну, але він поза сумнівом заслуговує згадки, хоча б через на його чудове портфоліо веб-проектів. Його блог – чудовий ресурс для будь-якого веб розробника, що хоче привести в порядок свої дизайнерські рішення.

Clearing floats

У статті Тревора “The 6 Most Important CSS Techniques You Need To Know”, він додав перлину, яка може зберегти від головного болю під час використання колонок у ваших темплейтах.

Я створив просту сторінку з двома плаваючими колонками одна поряд з іншою. Ви відмітите в прикладі, що сірий фон не містить плаваючі колонки. Отже, найлегше що можна зробити – встановити на елемент-контейнер float. Але зараз, ви бачитимете, що фон контейнера не містить область контенту.

Оскільки контейнер має margin: 0 auto, ми не хочемо флоатити його, тому що це перемістить на сторону до якої ми його пофлоатимо. Так от інший спосіб, щоб очистити float, – це вставити очищаючий елемент. В даному випадку, я просто використовую порожню div якій задаю clear: both. Зараз, існують і інші шляхи очистити float без розмітки, але я помітив деяку несумісність цієї техніки, так що я просто жертвую порожню div.

Поставте float, щоб очистити float – Тревор Девіс

6. Використовуйте від’ємні марджіни – Ден Цедерхольм

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

Компанія Дена Цедерхольма SimpleBits – маяк в сфері веб-дизайну. Ден працював з:

  • Google
  • Blogger
  • MTV
  • Fast Company
  • Inc.com

… і багатьма іншими високопрофільними веб компаніями. На щастя, Ден ділиться частиною знань, які він здобув працюючи з цими монстрами на його блозі в SimpleBits. Ось приблизне правило для вас веб-дизайнери і розробники: Якщо Ден Цедерхольм говорить щось — ви слухаєте. Думайте про нього, як про цифрового шерпа, який проведе вас до вершин веб-дизайну.

Від’ємні марджіни.

Хоча, можливо, здається нелогічним помістити заперечення перед будь-якою декларацією (подібно до margin-left: -5px), це досить хороша ідея. Пан Цедерхольм пояснює, що використовувати від’ємні марджіни на елементах іноді легше, ніж змінити кожен інший аспект дизайну, щоб досягти кінцевого результату.

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

Ви можете бачити його приклад правильного використання від’ємного марджіну тут.

Використовуйте від’ємні марджіни – Ден Цедерхольм

7. Використовуйте CSS для центрування сторінки – Ден Цедерхольм

«Як я центрую сторінку з фіксованою шириною?» Для тих, хто знає, це просто. Для тих, хто не знає, ці два необхідних правила, які потрібні для центрування можуть спантеличити.

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

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

body { text-align: center; }
#container { margin: 0 auto; width: xxxpx; text-align: left; }

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

Використовуйте CSS для центрування сторінки - Ден Цедерхольм

8. Використовуйте правильний DOCTYPE – Джефрі Зельман.

Ви написали валідний XHTML і CSS. Використали W3C standard Document Object Model (DOM), щоб керувати елементами динамічної сторінки. Але в браузерах, які в принципі підтримують ці стандарти, ваш сайт розвалюється. Ймовірно, ви вказали неправильний DOCTYPE.

Джефрі Зельман є одним із засновників чудового ресурсу A List Apart, співзасновник і керівник The Web Standards Project, управляє студією дизайну Happy Cog, і навіть написав книгу по веб-стандартах. Коротше кажучи, Зельман знаходиться у верхньому ешелоні веб-дизайнерів.

неправильний DOCTYPE

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

Використання неповного чи застарілого DOCTYPE або його відсутність взагалі — переключає браузери в режим «Quirks», в якому браузер припускає, що ви написали старомодний, непрацездатний код, на зразок того що був в кінці 1990-х.

Якщо ви знаходите проблеми у своєму макеті, які не мають пояснення, без сумнівів проблема в DOCTYPE.

Використовуйте правильний DOCTYPE – Джефрі Зельман

9. Центруйте елементи за допомогою CSS – Вольфган Бартельме.

Центрування елементів є частим завданням під час розробки інтернет сайтів. Але для людей, які тільки познайомилися з CSS, є величезною загадкою як, наприклад, поцентрувати весь веб-сайт в браузерах відмінних від Internet Explorer.

Вольфган Бартельме – веб-дизайнер на фірмі Bartelme design. Bartelme має один з найбільш витончено створених блогів, і безупинно створює чудові іконки і вишуканий дизайн. Він розробляв дизайн для блогової платформи Squarespace, і також популярне програмне забезпечення MacHeist.

Вольфганг створив туторіал, який допомагає з складними завданням центрування елементів з допомогою CSS. Центровані елементи надзвичайно корисні, але іноді важко досягти того що є в дизайні. Туторіал Бартельме гарантує ідеальне центрування, шляхом використання правильного DOCTYPE і додавання його CSS вуду. Код є дуже простим і прекрасно справляється з поставленим завданням.

Центруйте елементи за допомогою CSS – Вольфган Бартельме

10. Використовуйте команду text-transform – Трентон Мосс

Трентон Мосс знавець веб-юзабіліті. Він має свою власну компанію, яка навчає людей веб-юзабіліті і копірайтингу. Він також пише статті для сайтів на зразок Sitepoint. Трентон дає чудові поради, які базуються на його досвіді веб-експерта.

Звичним є те що дизайни сайту можуть увесь час змінюватись з плином часу, особливо це стосується текстів. Найкраще, що може зробити дизайнер – це передбачити на майбутнє, що стиль тексту може змінитися і використати CSS для оформлення тексту. Трентон Мосс показує нам, як досягти цього через використання простої, рідковживаної команди CSS, яка зветься text-transfom.

Одна з найменш відомих, але дійсно корисна команда CSS – команда text-transform. Три значення для цієї команди: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. Перше правило перетворює всі знаки на великі букви, друге всі в маленькі букви, і третє робить першу букву кожного слова великою буквою.

Використання CSS для оформлення тексту сторінок сайту дозволяє з легкістю змінювати стиль в майбутньому і робить ваш код більш сумісним.

Ця команда є неймовірно корисною для гарантування цілісності стилю усього веб-сайту, особливо, якщо над ним працює декілька різних редакторів. Допустимо згідно з фірмовим стилем сайту слова в заголовках повинні завжди початися з великих букв. Щоб гарантувати це використовуйте text-transform: capitalize. Навіть якщо редактори сайту забувають прописати в тексті слова з великої букви, їх помилки не буде видно на сайті.

Тоді як text-transform невеличка команда яку ми додаємо до CSS стилю, в майбутньому, коли прийдеться щось міняти, вона може значно спростити нам життя.

Використовуйте команду text-transform


Першоджерело

About these ads
Categories: CSS Теґи:,
  1. Грудень 7, 2009 о 23:17

    Прекрасна стаття та багато корисних порад та посилань на цікаві ресурси.

    Лише одне порада, додай можливість це діло ретвітити та додавати у закладки delicious.

    Дякую

    • Wolf
      Грудень 8, 2009 о 13:29

      Додав можливість додавати в закладки через сервіс Addthis.

  2. ostrov_sokr
    Грудень 19, 2009 о 12:57

    Невеличке зауваження – розділ “Поставте float, щоб очистити float – Тревор Девіс”, повинен напевне звучати “Поставте clear (або поставте div з clear), щоб очистити float”.

    • Wolf
      Грудень 21, 2009 о 08:57

      Напевне Ви праві. Я перекладав цей шматок дослівно. Вже виправив. Дякую.

  1. Травень 5, 2010 о 08:00
  2. Травень 25, 2010 о 08:53

Напишіть відгук

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

WordPress.com Logo

Ви коментуєте використовуючи ваш WordPress.com аккаунт. Log Out / Змінити )

Twitter picture

Ви коментуєте використовуючи ваш Twitter аккаунт. Log Out / Змінити )

Facebook photo

Ви коментуєте використовуючи ваш Facebook аккаунт. Log Out / Змінити )

Google+ photo

Ви коментуєте використовуючи ваш Google+ аккаунт. Log Out / Змінити )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d блогерам подобається це: