Есть ли проблемы с этим кодом? Я новичок в HTML & CSS

Question

Я не уверен, что этот код написан самым коротким и эффективным способом. Пожалуйста, помогите мне .. Как я могу написать в кратчайший путь? И как я могу улучшить себя?

* {margin: 0;padding: 0;box-sizing: border-box;}

body {
background: #fff;
font-family: Arial;
}

a {
text-decoration: none;
color: #333;
}

nav {background-color: #f7f7f7;
width: 100%;
display: block;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline-block;
position: relative;
}

nav ul:not(.sub-menu) > li {
padding: 15px;
}

nav ul:not(.sub-menu) > li + li {
margin-left: 20px;
}

nav ul li.has-children:hover ul.sub-menu {display: block;
}

nav ul.sub-menu {
position: absolute;
display: none;
white-space: nowrap;
/* Her bir liste öğesinin tek bir satır olması için. */
top: 100%;
}

nav ul.sub-menu li {
display: block;
}

nav ul.sub-menu li a {
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}

nav ul.sub-menu li a:hover {background-color: #eee;}

nav ul.sub-menu li + li a {
border-top: 0;
}

Answer 1

Ну, сам код довольно короткий.Вы можете позаботиться о нескольких моментах, которые помогут вам в долгосрочной перспективе.

1. Постарайтесь свести к минимуму использование > и +.Поскольку они строго связаны со структурой DOM.Если DOM изменится, стили с > или + могут сломаться.

2. Свернуть иерархию.nav ul li можно заменить на nav li.Чем меньше иерархия, тем быстрее будет рисование DOM.

3. Что-то еще, что вы должны сделать, это разделить CSS на 2 части.

   • Часть 1: все css уровня элемента (давайте назовем его normalize.css) и
   • Часть 2: все css класса (давайте назовем его styles.css).

Normalize.css теперь содержит глобальные стили для элементов HTML, которые распространены на всей вашей веб-странице.

* {margin: 0;padding: 0;box-sizing: border-box;}

body {
  background: #fff;
  font-family: Arial;
}

a {
  text-decoration: none;
  color: #333;
}

nav {
  background-color: #f7f7f7;
  width: 100%;
  display: block;
}

nav ul {
  list-style-type: none;
}

nav li { // note that the `ul` is removed
  display: inline-block;
  position: relative;
}

style.css теперь содержит все css на основе классов, которые не зависят от его положения в DOM.

.menu-item { // add a class `menu-item` to the immediate UL items in the <nav/>
  padding: 15px;
  margin-left: 20px;
}

.menu-item:first-child {// remove margin-left from the first-child
  margin-left: 0;
}

.menu-item:hover .sub-menu {
  display: block;
}

.sub-menu { // removing the unnecessary qualifiers. `.sub-menu` is enough
  position: absolute;
  display: none;
  white-space: nowrap;
  top: 100%;
}

.sub-menu-item { // add class `sub-menu-item` to the <li> of `.sub-menu`
  display: block;
}

.sub-menu-item a { // you can further go ahead to add a special class to the `<a/>` inside `.sub-menu-item`
  display: block;
  padding: 12px 20px 12px 10px;
  background-color: #f7f7f7;
  border-with: 0 1px 1px 1px;
  border-color: #eee;
  border-style: solid;
}

.sub-menu-item a:hover {
  background-color: #eee;
}

nav ul.sub-menu li + li a { // similarly you can remove the `+` with `:first-child` or the suitable.
  border-top: 0;
}

Answer 2

Ваш CSS точен, и это хороший момент.Но если вы хотите упростить свою жизнь и не повторяться, я советую вам использовать препроцессор css, например Sass , чтобы писать css следующим образом:

nav {
    background-color: #f7f7f7;
    width: 100%;
    display: block;

    ul {
        list-style-type: none;

        li {
            display: inline-block;
            position: relative;
        }
    }
}