не так давно я писал про IE7 и css
http://karman.com.ua/forum/topic10200.html Вот нашел еще 5 советов как можно улучшить код css
Техника 1. Разделяйте свой кодперва определите структуру Вашего макета и выделите наиболее важные модули в CSS-коде. В большинстве случаев принято выбирать порядок CSS-селекторов согласно порядку дивов и классов. Например, Вы можете выбрать глобальные стили (body, абзацы, списки и т.д.), заголовки, текстовые стили, навигацию, формы, комментарии и т.д.
Примером применения данной техники служит пример ниже:
Код
/*-----------------------------------------
[Master Stylesheet]
Project: StudioForYou
Version: 1.1
Last change: 08/08/08 [fixed Float bug, wp]
Assigned to: WebProffy (wp)
Primary use: Company
-----------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
Очень удобно иметь один главнынй CSS-файл, служащий для импорта всех имеющихся каскадных таблиц стилей в веб-документы.
Техника 2. Создайте оглавлениеОглавление позволяет моментально пробежаться глазами по структуре кода и понять, что к чему и куда. Наиболее популярным является создание оглавления в виде иерархического дерева с указанием используемых идентификаторов и классов рядом с соответствующими элементами.
На примерах ниже Вы можете увидеть данную технику в действии:
Код
/*-----------------------------------------
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
-----------------------------------------*/
или так:
Код
/*-----------------------------------------
[Table of contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-----------------------------------------*/
Другим решением является создание оглавления в виде простого нумерованного списка:
Код
/*-----------------------------------------
[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
-----------------------------------------*/
<!-- some CSS-code -->
/*-----------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
Техника 3. Описание используемых цветов и шрифтовОчень удобно иметь некую памятку, расшифровывающую цифровое обозначение цветов. С ее помощью можно быстро произвести поиск и замену конкретного цвета в нужном месте.
Код
/*-----------------------------------------
# [Color codes]
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
Помимо этого памятку можно немного расширить и уточнить путем внесения некой конкретики, как то, где используется конкретный цвет:
Код
/*-----------------------------------------
[Color codes]
Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)
a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
-----------------------------------------*/
Такое же решение подходит и для организации памятки по шрифтам:
Код
/*-----------------------------------------
[Typography]
Body copy: 1.2em/1.6em Verdana, Helvetica, Arial;
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode";
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
Notes: decreasing heading by 0.4em with every subsequent heading level
-----------------------------------------*/
Техника 4. Организация порядка CSS-свойств и их группировкаСуществует несколько вариантов группировки CSS-свойств. Одни веб-мастера предпочитают сперва указывать цвета и шрифты, другие - “наиболее важные” свойства, как позиционирование.
Код
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
Некоторые веб-мастера поступают еще оригинальнее - они группируют свойства в алфавитном порядке:
Код
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
Техника 5. Использование отступовДля лучшего сканирования Вашего кода рекомендуется использовать отступы. Получившийся в результате код будет выглядеть иерархическим.
Код
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: serif; margin-bottom: 20px; }
#main-column p { color: #333; }
К приведенному выше примеру можно добавить комментарии:
Код
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
Идеи экспертов для улучшения CSS кода.
23.9.2008, 13:36. Re: Идеи экспертов для улучшения CSS кода.
