Javascript 如何改进此标题？

我想知道：

• 这是专业品质的标题吗
• 如果没有，我可以添加或更改什么

我尝试过不完全定位标题中的元素并将按钮向右浮动，但这总是导致按钮太低。我应该保持元素的绝对位置，还是有其他我不知道的方法

我也很难为我的元素设置正确的ID和类，你知道一种让代码更枯燥的方法吗

我知道这远远不是专业的质量，我是一个白痴，但我在编写干净的代码时遇到了困难，我不知道哪种方法最适合制作这样的标题。我尝试过谷歌搜索帮助，并查看其他网站的代码，但我总是被他们的例子弄糊涂

如果你能给我一些建议，我将不胜感激，谢谢

HTML:

---

堆栈溢出可能不是供将来参考的地方，但不要担心！以下是我的看法：

不要将ID与css一起使用

您应该避免在css中嵌套元素选择器。相反，我建议如下

在命名变量时，我喜欢根据类型设置它们的格式。所以把你的颜色叫做$color black，而不是$black等等

我不会使用命名的css颜色。要么使用变量，要么写出它们。即使是“安全”的颜色，如黑色和白色，它只是看起来邋遢

这可以追溯到#2，但避免使用元素类型作为选择器。给你的按钮等类，并使用它们代替。当然，除非这个按钮样式在你的网站中是通用的

---

希望这个反馈能帮助你！祝你的标题好运。

比SOI更适合codereview，我认为这很好，我要做的是通过使用适当的文本标记（例如：标题）使其对SEO更加友好。

<header id="master-head">
    <div id="master-head-content">

        <span id="master-head-title">Brodie Been</span>

        <span id="master-head-primary">
            <a href="#">My Work</a>
            <a href="#">About Me</a>
        </span>

        <span id="master-head-secondary" class="menu-right">
            <button id="master-head-contact">CONTACT ME</button>
        </span>
    </div>
</header>

$shadowColor:rgba(0,0,0,0.16);
$softBlack:#404040;
$primaryColor:#348DC8;

@mixin vertCenter{
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
}


body{
    background:#404040;
    font-family:Open Sans;

    button{
        display:inline-block;
        position:relative;
        border:none;
        color:white;
        text-decoration:none;
        font-size:14px;
        background:$primaryColor;

        &:hover{
            cursor:pointer;
            color:white;
            background:$softBlack;
        }
    }
}








#master-head{
    position:relative;
    height:100px;
    font-size:14px;
    background:white;

    #master-head-content{
        width:100%;
        height:100%;

        #master-head-title{
            @include vertCenter;
            padding-left:50px;
            font-size:24px;
        }

        #master-head-primary{
            @include vertCenter;
            padding-left:300px;

            a{
                text-decoration:none;
                color:inherit;
                margin-right:30px;

                &:hover{
                    margin-bottom:-1px;
                    border-bottom:1px solid black;
                }
            }
        }

        #master-head-secondary{
            @include vertCenter;
            right:50px;

            #master-head-contact{
                width:130px;
                height:50px;
            }
        }
    }
}