Перегляд CSS: Поради для початківців для добре структурованого коду

Мета цієї статті — допомогти початківцям верстальщикам не стати говнокодерами низкоквалифицированными фахівцями. Звичайно, вона не претендує на звання повноцінного посібники, але може припинити деякі поширені помилки. Якщо ви вже почали тісне знайомство з процесом створення сайтів, то вас напевно цілковито не лякають такі поняття, як HTML, CSS і JavaScript. А значить, вам відмінно зрозумілі перші постулати «правильного» коду:

• Каскадні стилі і скрипти для сторінки необхідно писати в окремих документах. У-перших, це прискорює завантаження сторінки. У-друге, легше один раз виправити код в підключеному CSS-файлі, ніж вручну змінювати усi сторінки.
• HTML є засобом для створення костяка сторінки, а каскадні стилі — для опису зовнішнього виду і усіляких «плюшек».
• Від слів «Internet Explorer» у вас починається нервовий тик, тому як ви вже представили, як ваш ідеальний макет потрібно оптимізувати під старі версії браузерів.

Далі я хочу озвучити поради по правильної структуризації CSS-коду. Зрозуміло, це не універсальні правила, тому що живої проект сповнений несподіванок. А коли потрібно допрацьовувати чужий проект, то доводиться працювати з тим, що є. Але, якщо ви тільки вчіться верстати, то краще почати усi робити правильно і прагнути стати професіоналом. Отже, чого потрібно уникати при написанні коду?

Пункт №0: Скидання стилів Як це ні дивно, але я хочу почати з того, що повинен вміти робити кожен верстальник. Мова йде про скиданні стилів. У скидання є свої противники, є ті, хто радить підключати обнуление стандартних значень стилів окремим файлом, і ті, хто за загальний файл CSS. В будь-якому випадку, мати поняття про такий можливості необхідно.

Справа в тому, що у кожного браузера є «своє понимание» того, якими повинні бути відступи у абзаців, значення для таблиць, посилань і так далі. Тому верстку починають зі скидання цих значень, щоб забезпечити кроссбраузерность. Цієї завданням задавалися багато кодери, але одним з класичних вважається resset.css від Еріка Мейєра:


При використанні настільки загального скидання ви повинні бути обережні, адже пізніше необхідно буде обов'язково призначити всім тегам стилі. Якщо ви що-то забудете, то контент-менеджер може зіткнутися з деякими проблемами (маркований перелік не має маркерів і інші схожі непорозуміння). До речі, якщо для відновлення вам знадобиться подивитися стандартні значення, відвідайте цей сайт. Наприклад, для ul стандартні значення виглядають так:

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

Пункт №1: Відміна раніше встановлених стилів Хороший верстальник не скасовує стилі, якщо це не скидання стандартних стилів. Сенс каскадных стилів в тому, щоб нові стилі успадковували попередні і доповнювали їх. Каскадні таблиці стилів по визначенню повинні успадковувати попереднім определениям і доповнювати їх, а не скасовувати. Якщо ж вам доводиться робити скасування, то, мабуть, ви поспішили з присвоєнням якого-то властивості. Звичайно, не забуваємо про роботі з готовим проектом, коли повністю реструктурировать код просто нераціонально. Тоді, як йдеться, «маємо, что маємо».

Наприклад, у нас є абзац, якому потрібно візуальне виділення. Ми задаємо йому розмір шрифту і нижнє підкреслення. Але в якому-то місці у нас відпадає необхідність підкреслення. В такому випадку код може мати наступного вид:

Звичайно, це дуже грубий приклад, але зате наочний і явно неправильний. Набагато логичней було б написати так:

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

Пункт №2: Використання занадто докладних селекторов Іноді можна наштовхнутися на такий код:

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

Пункт №3: Використання дуже широких селекторов Іноді для дуже загальних тегів застосовують занадто докладний опис. Наприклад:

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

Пункт №4: Жорстко задані опису стилів

Подібні «страсти» в CSS-файле — це спроба хоч як-то засунути елемент в потрібне місце. Якщо ви ретельно планували сторінку, то до використанню таких «костылей» справа не дійде. А може, ви просто погано розібралися в блокової верстці і не можете вважати себе хорошим верстальщиком?

Пункт №5: Обережне використання !important Інструмент !important дозволяє підвищити пріоритет стилю. Тому використовувати його потрібно тільки в тих випадках, коли ви впевнені, що подібний пріоритет вам буде потрібен завжди. Наприклад, для виведення помилки. Якщо ж ви застосували !important, щоб грубо перекрити свої помилки, то краще ще раз переглянути код.

Пункт №6: Тонкощі використання ID Варто бути обережним, перш ніж використовувати ідентифікатор. Тому що один і той ж id можна використовувати один раз на сторінці. Пріоритет id набагато вище класу, що вимагає ще більшої обережності при використанні. Класи ви можете оголошувати скільки завгодно раз або застосовувати безліч класів до одному і тому ж елементу. Наприклад:

То є id варто застосовувати тільки для специфічних елементів, але краще всього — для зв'язки з JavaScript.

Пункт №7: Незрозумілі імена класів Коли пишете код, класу варто приписувати зрозуміле позначення, яке б максимально точно давало визначення того, чому він належить. При проектуванні великого проекту потрібно уникати занадто загальних назв класів, наприклад .tel. Допустимо, у вас є телефон гарячої лінії в шапці документа, а також номера в розділі контактів. Тому використання названий — .tel-header і .tel.contacts — додасть конкретики. Таким чином, ви не заплутаєтеся і точно будете знати, де і навіщо використовується клас.

Пункт №8: Зайва точність назви класів Протилежністю попередньої помилку можна вважати такий клас:

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

Пункт №9: Коментарі Багато початківці верстальщики недооцінюють коментарі, вважаючи їх дурною тратою часу. Повірте, якщо ваш проект перейде до іншим фахівцям, коментарі значно сэкономят їх час при розборі всього коду. Корисна практика — залишати позначки в HTML файлі поруч з закрывающимся div про тому, який елемент був закритий. Дана процедура прискорює роботу з кодом. Да і, повірте, повернувшись через півроку до сайту для нововведень, ви самі себе будете дякувати за педантичні опису.

Інтернет-ресурси для вивчення CSS W3.org — цей сайт Мекка для верстальника, тому як є офіційним ресурсом Консорціуму Всесвітній Павутини. Саме ця організація розробляє і впроваджує стандарти. Технічний англійська досить простий, тому у вас є шанс впоратися з корисної інформацією на сайті навіть при поганому володінні мовою.


Htmlbook.ru — корисний ресурс для новачків в верстці. Тут ви можете ознайомитися зі довідниками і самоучителями по CSS і HTML. На сайті можна також протестувати свої вміння, знайти інформацію про готових рішеннях багатьох, особливо стандартних, проблем. Крім того, ви зможете випробувати свої вміння на типових макетах. Сайт дуже зручний, а на сторінках з докладним описом селекторов і тегів можна побачити табличку, показывающую, з який версії є підтримка коду в тому або іншому браузері (враховуються навіть популярні платформи смартфонів). На форумі часто проходять конкурси для бажаючих поекспериментувати з CSS3, HTML5 або JavaScript.

Css-tricks.com — цей ресурс дуже зручний тим, що містить безліч видеоуроков, а в розділі Snippets можна знайти різні готові рішення. Мінус проекта — його англоязычность (зрозуміло, це мінус для тих, хто не володіє англійським мовою).

Ruseller.com — російськомовний проект з великим об'ємом корисного матеріалу. Багато статті є перекладом з іноземних ресурсів. На сайті є уроки по юзабіліті, деяким популярним CMS і багато інше, що може стати в нагоді не тільки новачкові.

Подібних ресурсів безліч, особливо на англійською языке — так що, шукайте і вчіться. Бажаю цікавих проектів, адекватних замовників, «красивого» коду і відсутності багів!