15/28 Испытание

Курсы §13. Мастерская: создаём меню
1

Подскажите, пожалуйста, что лишнего в коде и как его можно уменьшить ?

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

.main-menu {
margin: 0;
padding: 0;
width: 200px;
}

.main-menu > li {
border-bottom: solid 2px #2c3e50;
list-style: none;
background-color: #2980b9;
}

.main-menu a {
display: block;
text-decoration: none;
background: #2980b9;
color: #ffffff;
padding: 10px 15px;
}

.active > a {
border-bottom: solid 2px #2c3e50;
background: #1abc9c;
}

.main-menu ul {
list-style: none;
padding: 10px 10px;
background-color: #ffffff;
}

.active ul a {
text-decoration: underline;
display: block;
padding: 5px;
color: #2980b9;
background: #ffffff;
}

2

Как бы я сделала:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 280px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-family: “Arial”, sans-serif;
  background-color: #ecf0f1;
}

.main-menu {
  margin: 0;
  padding: 0;
  width: 200px;
}

a {
  display: block;  
}

.main-menu > li,
.active > a {
  border-bottom: solid 2px #2c3e50;  
}

.main-menu > li,
.main-menu a {
  background-color: #2980b9;  
}

.main-menu ul,
.active ul a {
  background-color: #ffffff;  
}

.main-menu > li {
  list-style: none;
}

.main-menu a {
  text-decoration: none;
  color: #ffffff;
  padding: 10px 15px;
}

.active > a {
  background-color: #1abc9c;
}

.main-menu ul {
  list-style: none;
  padding: 10px 10px;
}

.active ul a {
  text-decoration: underline;
  padding: 5px;
  color: #2980b9;
}

У Вас есть свойства одинаковые значения свойства border-bottom и background-color, которые используются для нескольких селекторов:

Эти свойства можно сгрупировать:

.main-menu > li,
.active > a {
  border-bottom: solid 2px #2c3e50;  
}

Также, для ссылки дважды указывается блочный тип отображения:

Свойство display можно назначить просто ссылке:

a {
  display: block;  
}

хз, насколько мое решение можно считать приемлемым, но я делала так :thinking:

1 лайк
3

А мой вам как?
Как можно оптимизировать?

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 280px;
  padding: 10px;

  font-size: 14px;
  line-height: 1.4;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

.main-menu {
  margin: 0;
  padding: 0;
  background: #2980b9;
  width: 200px;
}

.main-menu li {
  list-style: none;
}

.main-menu > li > a {
  border-bottom: 2px solid #2c3e50;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
  color: white;
}

.main-menu .active > a {
  background: #1abc9c;
  border-bottom: 2px solid #2c3e50;
}

.active ul {
  border-bottom: 2px solid #2c3e50;
  margin: 0;
  padding: 10px;
  background: white;
}

.active ul a {
  display: block;
  color: #2980b9;
  padding: 5px;
4

.main-menu .active > a {
border-bottom: 2px solid #2c3e50; - избыточен, вы повторяетесь
}

6

Точно, спасибо. А в остальном все нормально?

7

Скобочку не закрыли в .active ul a )

8

Упс, привык с эмметом работать уже, стабильно забываю последнюю скобочку : /

9

Конечно, без наставника тяжело, почти всегда пишу код методом подбора. А уж на такие темы и подавно.

10

Поставьте тогда плагин beautify, он вам и скобочки закрывать будет и пробельчики ставить ) но это зло )

11

да не, уж лучше так, своими руками, а то совсем отобьюсь от рукописного ввода :0

12

Ну там не автоматически, там кнопочку надо будет жать, чтобы усё красиво было

13

знаю, табуляцию. А вообще, хотел спросить именно у вас. Как быть дальше? Я имею ввиду как работать в дальнейшем: что учить, а что нужно просто знать? Как практиковаться? Просто, я все же понял, что это мое (пока не начинал JS). Но вот хочется работать более логично, что ли.

14

Почитайте книжки по CSS от 2016 года и новее, там где на форуме был тред с ссылками (я с телефона, влом искать). То что дают в курсах это основы, для работы маловато будет.

15

Хорошо, поищу, спасибо.

16

Вот это?

1 лайк