30 кращих CSS технік для початківців

28

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

1. Зробіть css код доступним для читання

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

При написанні CSS, більшість розробників, відносяться до однієї з двох груп.

Група 1: Все на одному рядку

.someDiv { background: red; padding: 2em; border: 1px solid black; }

Група 2: Кожен стиль отримує свою власну позицію

.someDiv {
background: red;
padding: 2em;
border: 1px solid black;
}

Обидві ці практики є цілком прийнятними, хоча в цілому вважається, що друга група зневажає першу! Просто пам’ятайте — вибирайте метод, який виглядає краще ДЛЯ ВАС. Це все, що має значення.

2. Тримайте свій css код згідно

Переконайтеся, що CSS є послідовним. Ви повинні почати розробляти власний «суб-мова» CSS, що дозволяє швидко давати імена. Є певні класи, які я створюю майже в кожній темі, і використовую те ж ім’я кожний раз, при створенні нової роботи. Я, наприклад, використовую » .caption-right» Float зображення, які містять підпис з правого боку.

Подумайте про такі речі, як використовувати підкреслення і тире у вашому ID і імена класів, і в яких випадках їх використовувати. Коли ви почнете створення своїх власних стандартів CSS, ви станете набагато більш досвідченими.

3. Почніть з Framework

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

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

30 кращих CSS технік для початківців

Я не згоден. CSS Framework — фантастичний інструмент для тих, хто вміє ним користуватися.
Це не питання винаходу колеса, а швидше питання розуміння, як працює колесо.

Якщо ви тільки знайомитеся з CSS, я особисто рекомендую, щоб ви залишалися в стороні від цих Framework щонайменше рік. В іншому випадку, ви будете тільки плутати себе. Вчитися CSS … потім зрізати кути!

4. Використовуйте Скидання

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

MeyerWeb є популярним скиданням разом з розробником скидів Yahoo. Або ви завжди можете створити власний скидання.

5. Організуйте стиль з низхідною структурою

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

Узагальнені класи (body, a, p, h1 і т. д.)

#Header

#NAV-меню

#main-content

Не забувайте коментувати кожен розділ!

/ ****** main content *********/
styles goes here…
/ ****** footer *********/
styles go here…

6. Змішуйте елементи

Елементи стилю, іноді мають однакові властивості. Замість переписування попереднього коду, чому б не об’єднати їх? Наприклад, ваш H1, H2 і Н3 елементи мають одні і ті ж шрифт та колір:

h1, h2, h3 {font-family: tahoma, color: #333}

Ми могли б додати унікальні характеристики кожного з цих заголовків стилями, якщо ми хочемо (тобто h1 { size: 2.1 em}) в кінці таблиці стилів.

7. Створіть спочатку HTML код макета

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

8. Використовуйте декількох класів

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

«контейнер», в якому Ви хочете зробити обтікання праворуч, і у вас вже є клас .right в CSS, який має що-небудь з правого боку. Ви можете просто додати додатковий клас у декларації, ось так:

<div class=»box right»></div>

Ви можете додати скільки завгодно класів (розділених пробілами) у будь-якій декларації.

Будьте дуже обережні при використанні імен класів «right» і «left». Я буду їх використовувати, але тільки для таких речей, як блог. Як же так? Давайте уявимо, що далі ви вирішите, що краще бачити поле спливаючим ліворуч. В цьому випадку, вам доведеться повернутися на HTML і змінити ім’я класу — все для того, щоб змінити дизайн на цій сторінці. Це безглуздо. Пам’ятайте — HTML для розмітки і змісту. CSS — для оформлення.

Якщо вам необхідно повернутися до HTML, щоб змінити дизайн на цій сторінці, то Ви робите помилку!

9. Використовуйте правильний тип документа

Декларація типу документа (doctype) має значення в питаннях наявності або відсутності розмітки і CSS. Справді, весь зовнішній вигляд вашого сайту може сильно змінитися в залежності від DOCTYPE, який ви заявляєте.

Дізнайтеся більше про те, які типи документа використовуються на List Apart.

30 кращих CSS технік для початківців

10. Використовуйте скорочення

Ви можете зменшити ваш код з допомогою Значних скорочень. Для таких елементів, як padding, margin, font і деяких інших, ви можете поєднувати стилі в одному рядку. Наприклад, Div цих стилів:

#crayon {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}

Ви можете комбінувати ці стилі в одній рядку, наприклад так:

#crayon {
margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
}

Якщо вам потрібна додаткова допомога, ось всеосяжне керівництво з властивостями CSS скорочень.

11. Залишайте Ваші коментарі в коді CSS.

Як у будь-якому іншому мовою, це чудова ідея коментувати свій код в секції. Щоб додати коментар, просто додайте / * коментар, і * /, щоб закрити його, ось так:

/* Here’s how you comment CSS */

12. Розумійте різницю між блоковими і малими елементами

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

Ось списки елементів, які можуть бути малими або блоковими:

span, a, strong, em, img, br, input, abbr, acronym

І блокові елементи:

div, h1…h6, p, ul, li, table, blockquote, pre, form

13. Відсортуйте властивості в алфавітному порядку.

Хоча це скоріше легковажний відгук, він може стати в нагоді для швидкого сканування.

#cotton-candy {
color: #fff;
float: left;
font-weight:
height: 200px;
margin: 0;
padding: 0;
width: 150px;
}

Е-ех … жертвувати швидкістю для кращої читабельності? Я б не став — але вирішуйте самі!

14. Використовуйте CSS Компресори

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

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

30 кращих CSS технік для початківців

15. Исползуйте класи Generic

Ви виявите, що існують певні стилі, які Ви застосовуєте знову і знову. Замість того, щоб додавати особливий стиль для кожного ID, Ви можете створити загальні класи і додати їх ідентифікатори або інші класи CSS (з використанням ради № 8).

Наприклад, я вважаю, що я використовую Float: right і Float:left знову і знову в моїй конструкції. Тому я просто додаю класи .left .right в мій стиль, і посилаюся на них в елементах.

.left {float:left}
.right {float:right}
<div id=»coolbox» class=»left»>…</div>

Таким чином, вам не потрібно постійно додавати «float: left», щоб всі елементи, які необхідні, спливли.

16. Використовуйте «Margin: 0 auto» для центрування

Багато новачків в CSS не можуть зрозуміти, чому ви не можете просто використовувати Float: center для досягнення центру впливу на блокові елементи. Якби все було так просто! На жаль, ви повинні будете використовувати

margin: 0 auto; // top, bottom — and left, right values, respectively.

для центрування Div-а абзаців та інших елементів у макеті.

17. Не завжди обертайте елементи DIV

Коли ви починаєте, є спокуса обернути елемент Div, створити для нього стиль

<div class=»header-text»><h1>Header Text</h1></div>

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

<h1>Header Text</h1>

Тоді ви зможете легко додавати стилі h1, замість батьківського Div.

18. Використовуйте Firebug

Якщо ви ще не завантажили Firebug, то зупиніться і зробіть це. Серйозно. Це невеликий інструмент, який повинен мати будь-веб-розробник. Серед багатьох функцій, які поставляються з розширеннями Firefox (налагодження JavaScript, HTML перевірити, знайти помилки), можна також візуально перевірити, змінювати і редагувати CSS в режимі реального часу. Ви можете дізнатися більше про те, що робить Firebug на офіційному сайті Firebug.

30 кращих CSS технік для початківців

19. Менше Hack

Уникайте використання хаків, якщо це можливо. Звичайно, дизайн повинен виглядати однаково у всіх браузерах, але використання тільки хаків робить ваші дизайни важко підтримуваними в майбутньому. Крім того, використання скидання файлу (див. № 4) може усунути майже всі нерівності між браузерами.

20. Помірно використовуйте абсолютне позиціонування

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

21. Використовуйте Text-transform

Text-transform є вельми корисною властивістю-CSS, що допомагає «стандартизированно» форматувати текст на вашому сайті. Наприклад, Ви бажаєте створити деякі заголовки, які прописуються тільки малими літерами. Просто додайте text-transform в заголовок стилю ось так:

text-transform: lowercase;

Тепер всі літери в заголовку будуть малими за замовчуванням. text-transform дозволяє вам змінити ваш текст (перша літера назви, всі букви великими або малими літерами).

22. Не використовуйте негативні поля, щоб приховати h1

Часто люди використовують своє зображення тексту заголовка, а потім використовують display:none або негативний margin для выравниванияһ1 на сторінці. Matt Cutts, глава команди Google Webspam, офіційно заявив, що це погана ідея, Так як Google може подумати, що це спам.

р-Cutts прямо просить уникати приховування тексту Вашого логотипу з CSS. Просто використовуйте Alt тега. Хоча багато хто стверджує, що ви все ще можете використовувати CSS, щоб приховати тег H1 поки h1 теж, що і текст логотипу, я вважаю за краще підстрахуватися на всякий випадок.

23. Перевірте Ваш CSS і XHTML

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

24. Ems проти Пікселів

Завжди були наполегливі обговорення, буде краще використовувати пікселі (px) або емы (em) при визначенні розмірів шрифту. Пікселі — більш статичний спосіб визначення розмірів шрифту, емы більш масштабоване, з різними розмірами. З появою різних типів перегляду веб-сторінок (ноутбук, мобільний тощо), емы, все частіше стають за замовчуванням для вимірювання розміру шрифту, оскільки вони допускають найбільшу гнучкість форми. Ви можете дізнатися більше про те, чому ви повинні використовувати їх для розмірів шрифту в цій гілці форуму вдумливо. About.com також має велику статтю про відмінності між вимірами розмірів.

25. Не варто недооцінювати Список

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

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

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

<a href=»#»>Home</a>
<a href=»#»>About</a>
<a href=»#»>Services</a>
<a href=»#»>Контакти</a>

Хоча технічно це буде прекрасно працювати після невеликого доопрацювання CSS, але код недбалий. Якщо ви хочете додати список посилань, використовуй маркірований список, дурна гуска!

26. Уникайте додаткових Селекторів

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

body #container .someclass ul li {….}

У цьому випадку, просто .someclass li працювали б нормально.

.someclass li {…}

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

27. Додайте Поля і відступи для всього

Різні браузери представляють елементи по-різному. IE робить певні елементи інакше, ніж Firefox. IE 6 являє елементи інакше, ніж IE IE 7 і 8. Хоча браузери починають більш чітко дотримуватися стандартів W3C, вони все ще не досконалі.

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

* {margin:0;padding:0;}

Тепер для всіх елементів padding та margin нуль, якщо не визначено інший стиль в таблиці стилів.

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

28. Коли все готово, спробуйте об’єктно-орієнтувати CSS

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

Якщо ви новачок в CSS / XHTML іграх, OOCSS може бути трохи складним на початку. Але необхідно більше зрозуміти принципи об’єктно-орієнтованого програмування в цілому.

29. Використовуйте кілька таблиць стилів

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

Наприклад, у мене могла бути виборча програма, яка буде мати унікальний набір стилів. Замість того, щоб, в тому числі, робити опитування основних стилів, я міг би просто створити poll.css стилів тільки для сторінок, які показують опитування.

Однак, будьте впевнені, що розгляд питання про числі HTTP запитів, робляться. Багато дизайнери воліють розвивати кілька стилів, а потім об’єднати їх в один файл. Це дозволяє скоротити кількість HTTP запитів до одного. Крім того, весь файл буде зберігатися в кеші на комп’ютері користувача.

30. Перевірте, чи Закриті Елементи перед початком налагодження

Якщо ви помітили, що ваш проект виглядає трохи непевним, є ймовірність, що це тому, що ви забули закрити тег </ div>. Ви можете скористатися XHTML валідатором, для знаходження будь-яких помилок.

Ви також можете прочитати…

30 рецептів правильної верстки для новачка HTML

20+ кращих порад по HTML-форм для початківців

Переклад і редакція: Ріг Віктор і Андрій Бернацький.

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування