Нормально ли сделана шапка?

Question

[50VAJJ]

Привет.

<div class="container">
            <div class="botHeader">
                <a href="#">
                    <div class="FirstBtn">
                        <p></p>
                    </div>
                </a>
                <a href="#">
                    <div class="Secondbtn">
                        <p></p>
                    </div>
                </a>
                <a href="#">
                    <div class="thirthBtn">
                        <p></p>
                    </div>
                </a>
            </div>
            <div class="tags">
                
            </div>
        </div>

.botHeader{
    position: relative;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #000000;
}
.firstBtn{
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 60px;
    top: 20px;
    -webkit-box-shadow: 1px 1px 2px #666666;
    -moz-box-shadow: 1px 1px 2px #666666;
    box-shadow: 1px 1px 2px #666666;
    color: #ffffff;
    font-size: 20px;
    background: #96b0e4;
    padding: 2px 10px 2px 10px;
    text-decoration: none;
}
.firstBtnp{
    font-size: 24px;
    line-height: 12px;
    text-align: center;
    color: rgb(255, 255, 255)
}

.firstBtn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
    cursor: pointer;
}

Нормально ли она сделана? Что бы потом адаптивность добавить, не нужно будет переписывать CSS?
P.S. Для остальных кнопок те же стили, только позиция другая.

Comments

[Bastax13]

JSFiddle или CodePen.

Answer 1

[Adikjoro]

Я бы посоветовал изучить методологию БЭМ. Вот еще видеоурок. Она сильно упростит процесс и подход к верстке.

Answer 2

[Nevada18]

названия классов у вас, конечно, крутые. вы хоть однотипно пишите. а то один класс начинается с большой буквы, другой с маленькой. то camelCase, то непоймиЧтоCase. лучше несколько слов писать через дефис или нижнее подчеркивание

Comments

[50VAJJ]

Да, с названием класса протупил. Тут вопрос в другом: есть класс botHeader, а потом кнопки, к которым сразу стили привязываются. Нужен ли ещё промежуточный класс между botHeader и классами кнопок?

[Nevada18]

50VAJJ: Зачем промежуточный класс? и адаптивность чего имеется ввиду? самой кнопки?

[50VAJJ]

Nevada18: Адаптивность - это чтобы в проценты всё потом перевести. Класса HeaderBot.

[Nevada18]

50VAJJ: доп класс не нужен, этот элемент имеет динамическую ширину и сам под все подстраивается, кнопка благодаря маргину остается по центру.

[50VAJJ]

Nevada18: на самом деле там три кнопки, слева и справа ещё. Им маргинал надо будет менять?