Звичайно, кожен може написати CSS. Зараз, навіть програми це можуть зробити за Вас. Але будь CSS хороший? Ось 5 рад по миттєвого покращення Вашого CSS.
1. Зробити файл скидання
Серйозно, завжди використовуйте скидання. Можливо, Ви використовуєте скидання Еріка Мейєра або YUI скидання або Ваш власний користувальницький скидання. Так чи інакше, використовуйте.
Ви можете обнулити margin і padding для всіх елементів. Як на прикладі:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Скиди Еріка Мейєра і YUI дуже великі, я б сказав вичерпні. Я переконаний, що в кінцевому рахунку ви скинете всі і перевизначити всі властивості елементів. Ось чому Ерік Мейер не рекомендує використовувати його повністю, у більшості проектів повний список скидання файлу Еріка Мейєра ні до чого. Видаліть з нього стилі тих елементів, які не використовуєте в своєму проекті. Пробуйте, експериментуйте, створюйте свій власний скидання файл.
І, будь ласка, не використовуйте це:
* { margin: 0; padding: 0; }
Це займе більше часу на обробку, і що ви думаєте станеться з radio button, коли ви приберете у нього padding? З елементами форм іноді відбуваються дивні речі, тому їх краще залишити в спокої.
2. Алфавитизация властивостей CSS
Як Ви думаєте, в якому прикладі швидше знайти властивість margin-right?
Приклад 1.
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Приклад 2.
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
Ви не можете сказати, що у другому прикладі не швидше. При алфавитизации Ваших властивостей, Ви самі для себе скорочується час для пошуку специфічного властивості.
Я знаю людей, які організовують список саме так, а хто-то іншим не алфавитизрованным способом. Але скажу Вам точно, що якщо Ви працюєте над одним проектом ще з кимось (наприклад, в компанії), то Вам набагато простіше буде взаємодіяти зі своїм напарником, прислухавшись до цієї поради.
3. Організація
Ви повинні організувати свою таблицю стилів так, щоб Ви без проблем знайшли шукані речі або щось потрібне в списку стилів. Використовуйте коментарі ефективно. Приміром, ось як я структурую мою таблицю стилів:
/*****Reset*****/
Remove margin and padding from elements
/*****Basic Elements*****/
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
/*****Generic Classes*****/
Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently
/*****Basic Layout*****/
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
/*****Header*****/
Define all elements in the header
/*****Content*****/
Define all elements in the content area
/*****Footer*****/
Define all elements in the footer
/*****Etc*****/
Continue to define the other sections one by one
Використовувати коментарі і групувати схожі елементи допоможе Вам швидше знайти те, що потрібно.
4. Послідовність
Який варіант запису для коду Ви прийміть, такого і дотримуйтеся його. Подивіться на 1-шу і 2-ий рядок у прикладі. Так от, обидва варіанти запису мають право на життя. Кожна людина має право на вибір. Тому виберіть собі більш зручний і дотримуйтеся його.
Особисто я використовую комбінацію обох. Якщо селектор має більш 3-х рядків, то я рекомендую використовувати 2-ий варіант (розбити на кілька рядків), інакше 1-ий.
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: right;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
Я працюю таким чином, тому що 3 властивості поміщаються в один рядок текстового редактора без перенесення на наступний рядок. Так що з’ясуйте що краще для вас і дотримуйтесь цього.
5. Почніть в правильному місці
Не чіпайте Вашу таблицю стилів, поки Ви не написали свою розмітку сторінки.
Коли я починаю приступати до створення сайту, я роблю розмітку всього документа в цілому від цього тега body до закривається тега body. І тільки після цього приступаю до створення таблиці стилів. Я не додаю зайві div и, ID класи. Я додам лише деякий div и до header, footer, content, тому що я знаю, що вони будуть присутні на сторінці.
Продумуючи розмітку, ви не зіткнетеся з проблемою зайвих div-ів і зайвих класів, які можуть бути критичними. Вам потрібно буде додавати ці речі після того, як ви почали писати CSS, і якщо при реалізації зіткнулися з якою-небудь проблемою, намагайтеся її вирішити.
Використовуйте CSS властивості батьківських тегів для призначення властивостей дочірнім елементів, а не на автоматі додавайте нові класи і ідентифікатори до тегам. Просто запам’ятайте, CSS нічого не варто без добре відформатований документа.
*Примітка редактора: Не можу промовчати. Як сказав Тревор, навіть не чіпаєте CSS файл, поки розмітка не готова на 100%.
Висновок
Такими є лише деякі з порад, які допоможуть Вам краще писати код. Це аж ніяк не означає кінець списку. Як тільки я прийду до інших, ми обов’язково поділимося ними з вами.
Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
E-mail:[email protected]
Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування
P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.
Тут Ви можете з нуля підняти HTML&CSS
