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

您的CSS准确无误，这很不错。但是，如果您想让生活更轻松而不重复自己，建议您使用Sass之类的CSS预处理器来编写这样的CSS：

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

    ul {
        list-style-type: none;

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

Answer 2

代码本身很短。您可以注意一些要点，从长远来看将对您有帮助。

尝试最小化>和+的使用。因为这些严格绑定到DOM的结构。如果DOM发生更改，则>或+的样式可能会中断。
最小化层次结构。 nav ul li可以替换为nav li。层次结构越少，DOM绘制就越快。
您还需要做的是将CSS分为两部分。
- 第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，而与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;
}

这段代码有什么问题吗？我是html和CSS的新手

2 个答案: