Question

我想知道，如何在浏览器中呈现CSS。在悬停时写下重复的CSS属性有什么问题。

span.addMedication .two-way-toggle-big
{
    display: inline-block;
    border: solid 1px orange;
    padding: 15px;
    font-size: 18px;
    font-weight: 100;
    cursor: pointer;
    width: 70px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
}
span.addMedication .two-way-toggle-big:hover
{
    display: inline-block;
    border: solid 1px orange;
    padding: 15px;
    background-color: rgb(247, 157, 32);
    color: white;
    font-size: 15px;
    cursor: pointer;
    width: 70px;
    margin-right: 5px;
    text-align: center;
}

Answer 1

从技术上讲，这没有什么不对，但你无论如何也不应该这样做。 CSS实际上被认为是级联的，所以你会想要相应地工作。

它会使您的文件和文件大小膨胀，但对我来说最大的问题是可读性：

在您的代码中，我无法立即看到:hover上的哪些更改，我必须更长时间地查看它，就像立即跟随您所知：

span {
    display: inline-block;
    border: solid 1px orange;
    padding: 15px;
    font-size: 18px;
    font-weight: 100;
    cursor: pointer;
    width: 70px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
}
span:hover {
    background-color: rgb(247, 157, 32);
    color: white;
}

如果您有兴趣，有很多不同的CSS-Style-Guides，这些都是为了让您的写作更易于维护。看看吧;）

编写重复的CSS有什么不好的影响？

1 个答案: