Сетки / Испытание: строим сетку [27/32] - оптимальность кода?

Курсы §15. Сетки
1

Доброго времени суток! :grin:
Просьба опытных верстальщиков, проверить код на оптимальность.
Заранее большое спасибо :wink:

с ув. Начинающий, упертый студент)

1. <!DOCTYPE html>
2. <html lang="ru">
3.     <head>
4.         <title>Испытание: строим сетку</title>
5.         <meta charset="utf-8">
6.     </head>
7.     <body>
8.         <div class="header">
9.             <div class="loyout-positioner">
10.                 <div class="loyout-header-top">
11.                     Header
12.                 </div>
13.             </div>
14.             <div class="loyout-header-menu">
15.                 Menu
16.             </div>
17.             <div class="loyout-positioner">
18.                 <div class="loyout-heder-colums">
19.                     Promo 1
20.                 </div>
21.                 <div class="loyout-heder-colums">
22.                     Promo 2
23.                 </div>
24.             </div>
25.         </div>
26.         <div class="features">
27.             <div class="loyout-positioner">
28.                 <div class="loyout-features-colums features-left">
29.                     Left
30.                 </div>
31.                 <div class="loyout-features-colums features-main">
32.                     Main
33.                 </div>
34.                 <div class="loyout-features-colums features-right">
35.                     Right
36.                 </div>
37.             </div>
38.         </div>
39.         <div class="footer">
40.             <div class="loyout-footer">
41.                 Footer
42.             </div>
43.         </div>
44.     </body>
45. </html>

1. html,
2. body {
3.     margin: 0;
4.     padding: 0;
5. }

6. body {
7.     width: 450px;
8.     height: 335px;
9.     font-family: "Arial", sans-serif;
10.     font-size: 10px;
11.     color: white;
12. }

13. .header {
14.     background-color: #34495e;
15.     padding-top:10px;
16. }

17. .loyout-positioner {
18.     width: 350px;
19.     margin: 0 auto;
20.     margin-bottom: 10px;
21.     }
22.     
23. .loyout-positioner::after {
24.     content: "";
25.     display: table;
26.     clear: both;
27. }
28.     
29. .loyout-header-top {
30.     background-color: #c0392b;
31.     min-height: 25px;
32.     padding: 5px;
33. }

34. .loyout-header-menu,
35. .loyout-footer {
36.     min-height: 25px;
37.     padding: 5px 55px;
38. }
39. .loyout-header-menu {
40.     background-color: #3498DB;
41. }

42. .loyout-heder-colums {
43.     background-color: #c0392b;
44.     float: left;
45.     width: 160px;
46.     margin: 10px 10px 10px 0px;
47.     min-height: 50px;
48.     padding: 5px;
49. }

50. .loyout-heder-colums:last-child {
51.     margin-right: 0px;
52. }

53. .loyout-features-colums {
54.     background-color: #3498DB;
55.     min-height: 100px;
56.     padding: 5px;
57.     margin-right: 10px;
58. }

59. .features-left {
60.     width: 60px;
61.     float: left;
62. }

63. .features-right {
64.     width: 60px;
65.     float: right;
66.     margin-right: 0px;
67. }

68. .features-main {
69.     float: left;
70.     width: 180px;
71.     }

72. .footer{
73.     background-color: #34495e;
74. }
2

Эх, вот заставить бы вас скопировать свой код отсюда и вставить его на страницу с заданием…
Нумерация - это конечно красиво, но вот стирать ее из каждой строки не очень удобно.
По поводу кода есть некоторые вопросы.
Во-первых, орфография. Записи типа “loyout”, “heder”, “colums” - это плохо. Учите английский.
Во-вторых, гигантские названия классов. Можно писать короче.
Например, из записи <div class="loyout-features-colums features-main"> вполне можно убрать слова “layout” и “features”, останется:
<div class="features-colums main">
И еще одно. Для menu и footer тоже можно использовать layuot-positioner, тогда отступ слева 55px не понадобится.

1 лайк
3

Полностью согласен с Ineska код вроде хороший но названия классов вырви глаз:) до этого испытания проходя уроки почему не обратили внимания на названия классов у тех кто составлял задания?

1 лайк
4

Приношу мои извинения за нумерацию строк, не подумал.
По поводу названия классов, учел, и в следующих испытаниях использовал однословные названия, максимум из двух слов.
С грамотностью да, у меня проблемы, причем во всех языках, приходится постоянно все перепроверять :frowning:

особое спасибо за

И еще одно. Для menu и footer тоже можно использовать layuot-positioner, тогда отступ слева 55px не понадобится.

большое спасибо за разбор и критику)

1 лайк
5

Дело смотрите как обстоит, если например данный случай требует название класса длинное, которое будет описывать блок или стиль который примениться к нему, то это нормально, в вашем случае можно было например обойтись, columns и left right center либо main, просто бывает что приходиться удлинять. Чтоб самому же потом понять что да к чему