Список самых популярных наименований class’ов и id’шников
При верстке я всегда использую от макета к макету одинаковое наименование классов и айдишников (id). И дело даже не в том, что лень или не хватает фантазии придумывать каждый раз что-то новое. Вовсе нет. Скорее это обусловлено тем, что в наименования закладывается логическая оставляющая. Привожу примеры наименования блоков (id’шники) с кратким описанием что и к чему:
- #header - для “шапки”
- #footer - для “подвала”
- #center - центральная часть
- #left, #right, #leftside, #rightside - для левого и правого сайдбара
- #content - для контентной части
- #news - новости
- #menu - меню навигации
- #submenu - как правило дополнительное меню, например, меню каталога
- #subscribe - форма подписки
- #feedback - форма обратной связи
Список классов:
- .active - указание на то, что элемент активен (в меню или подменю)
- .left, .right - указание на выравнивание слева, справа (обтекание); стили для картинок с различным выравниванием
- .title - блок заголовка
- .clear - обнуление обтекания
- .logo - логотип
- .phone, .address - блок с телефоном и адресом, как правило в шапке
- .btn - стиль для кнопки (”Отправить” или “Подписаться”)
- .descr, .full - краткое описание, полное описание (например, в каталогах)
- .foto, .gallery, .fotogallery - класс для отображения фотогалереи
Ну это из моей практики, а вот что говорит статистика
50 самых популярных наименований классов (class)
Было проанализировано 2148723 сайтов.
| Место | Наименование | Частотность |
|---|---|---|
| 1 | footer | 179528 |
| 2 | menu | 146673 |
| 3 | style1 | 138308 |
| 4 | msonormal | 123374 |
| 5 | text | 122911 |
| 6 | content | 113951 |
| 7 | title | 91957 |
| 8 | style2 | 89851 |
| 9 | header | 89274 |
| 10 | copyright | 86979 |
| 11 | button | 81503 |
| 12 | main | 69620 |
| 13 | style3 | 69349 |
| 14 | small | 68995 |
| 15 | nav | 68634 |
| 16 | clear | 68571 |
| 17 | search | 59802 |
| 18 | style4 | 56032 |
| 19 | logo | 48831 |
| 20 | body | 48052 |
| 21 | left | 47822 |
| 22 | style5 | 47645 |
| 23 | right | 45855 |
| 24 | date | 44613 |
| 25 | contentpaneopen | 44395 |
| 26 | moduletable | 44188 |
| 27 | link | 43629 |
| 28 | blog | 42469 |
| 29 | bodytext | 40450 |
| 30 | style6 | 39496 |
| 31 | mainlevel | 38993 |
| 32 | contentheading | 38982 |
| 33 | top | 37720 |
| 34 | normal | 37101 |
| 35 | inputbox | 36342 |
| 36 | article_seperator | 35366 |
| 37 | style7 | 34710 |
| 38 | news | 34543 |
| 39 | navbar | 33912 |
| 40 | links | 33830 |
| 41 | first | 33427 |
| 42 | box | 33011 |
| 43 | section1 | 32938 |
| 44 | white | 31341 |
| 45 | last | 30730 |
| 46 | style8 | 30441 |
| 47 | post | 30261 |
| 48 | smalltext | 30199 |
| 49 | submit | 28724 |
| 50 | pathway | 28624 |
50 самых популярных наименований id’шников
Было проанализировано 1806424 сайтов.
| Место | Наименование | Частотность |
|---|---|---|
| 1 | footer | 288061 |
| 2 | content | 228661 |
| 3 | header | 223726 |
| 4 | logo | 121352 |
| 5 | container | 119877 |
| 6 | main | 106327 |
| 7 | table1 | 101677 |
| 8 | menu | 96161 |
| 9 | layer1 | 93920 |
| 10 | autonumber1 | 77350 |
| 11 | search | 74887 |
| 12 | nav | 72057 |
| 13 | wrapper | 66730 |
| 14 | top | 66615 |
| 15 | table2 | 57934 |
| 16 | layer2 | 56823 |
| 17 | sidebar | 52416 |
| 18 | image1 | 48922 |
| 19 | banner | 44592 |
| 20 | navigation | 43664 |
| 21 | layer3 | 42825 |
| 22 | form1 | 42119 |
| 23 | autonumber2 | 41960 |
| 24 | table3 | 41504 |
| 25 | home | 41040 |
| 26 | copyright | 38893 |
| 27 | page | 37274 |
| 28 | layer4 | 35327 |
| 29 | image2 | 35215 |
| 30 | left | 34953 |
| 31 | searchform | 33184 |
| 32 | __viewstate | 32714 |
| 33 | table_01 | 32540 |
| 34 | table4 | 31583 |
| 35 | map | 30269 |
| 36 | active_menu | 30243 |
| 37 | right | 30206 |
| 38 | image3 | 29759 |
| 39 | news | 29078 |
| 40 | body | 29037 |
| 41 | autonumber3 | 28774 |
| 42 | layer5 | 27982 |
| 43 | table5 | 25767 |
| 44 | contact | 23668 |
| 45 | layer6 | 23600 |
| 46 | head | 22947 |
| 47 | image4 | 22638 |
| 48 | navbar | 22516 |
| 49 | links | 22456 |
| 50 | title | 21952 |
Удивляет, конечно, наличие в таком масштабе наименований среди классов: style1, style2, style3, style4, style5, style6, style7, style8.
И среди id: layer1, layer2, table2, layer3, table3, layer4, table_01, layer5, table5, layer6
Неужели так сложно давать названия элементам в соответствии с их содержимым? Кто еще так же бездарно верстает?)
Привет, пока нет комментариев, будь первым!