Здравствуйте. Оцените пожалуйста код на оптимальность. Спасибо.
CSS:
body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1; }
.main-menu { (рассматриваем весь блок “меню” и записываем общие правила)
list-style: none; (с начала убираем маркеры списка, ибо потом мы о них забудем)
margin: 0; (избавляемся от “отступов по умолчанию”)
padding: 0; (избавляемся от “отступов по умолчанию”)
width: 200px; (ширина “меню”, значение подбираем уже когда весь код написан )
background: #2980b9; } (задаем всему блоку “меню” синий цвет)
.main-menu a { (общие правила для всех “ссылок” в блоке “меню”)
display: block; (делаем “ссылки” блочными элементами)
padding: 10px 15px; (задаем внутренние отступы для “ссылок”)
color: #ffffff; (задаем белый цвет текста в “ссылках”)
text-decoration: none; (избавляемся от подчеркивания в “ссылках”)
border-bottom: 2px solid #2c3e50; } (задаем каждому блоку с “ссылкой” рамку снизу)
.main-menu ul { (общие правила для “блока подменю” пункта меню “Курсы”)
list-style:none; (снова в первую очередь убираем маркеры списка, ибо забудем)
margin: 0; (избавляемся от “отступов”)
padding: /* 10px / 0; (считаем, что “10px” сейчас в коде нет и там только “0”)
background: #ffffff; (задаем всему “блоку подменю” белый цвет)
/ border-bottom: 2px solid #2c3e50; */ } (считаем что этой строчки еще в коде нет)
.active li a { (задаем правила для “ссылок” внутри “блока подменю”)
color: #2980b9; (задаем синий цвет текста в “ссылках”)
padding: 5px 15px; (задаем внутренние отступы для “ссылок”)
text-decoration: underline; (задаем “ссылкам” внутри “блока подменю” подчеркивание)
border: none; } (избавляемся от нижних рамок под “ссылками” в “блоке подменю”)
.main-menu .active > a { (используя контекстные и дочерние селекторы
background: #1abc9c; } задаем зеленый фон “ссылке” “Курсы”)
Теперь у нас остается две проблемы:
- отсутствие одной нижней рамки;
- проблема с отступами “ссылок” в “блоке подменю” пункта меню “Курсы”.
Решение:
- в общих правилах для “блока подменю” (.main-menu ul) дописываем строчку border-bottom: 2px solid #2c3e50;
(закоментирована в коде) и получаем отсутствующую нижнюю рамку; - в общих правилах для “блока подменю” (.main-menu ul) задаем внутренние отступы не padding: 0; а
padding: 10px 0; (в коде 10px закоментировано) и получаем решенное на 100% задание.
Внимание, вопрос: одно дело решить задание на 100%, а другое – правильно написать код в соответствии
с правилами построения логической структуры. Просто не покидает ощущение, что много правил в этом коде
можна было бы написать иначе и в других местах и результат был бы тоже 100%.
Как Вам код? Кто бы что убрал/добавил/поменял?
Если кто то знает то поделитесь пожайлуста “наводкой” на какую то литературу как правильно
писать код и групировать элементы. Спасибо.