Слишком много css стили

Question

Столкнулся с такой проблемой слишком много css стилей, каждому дать класс и стилизовать это нормально?

Думаю это просто ужас лишь на nav уходить 250строк кода, можете подсказать на какие то уроки которые учить как писать более кратко и правильно.

И еще советы от вас было бы не лишним.

Html

<body>
    <header class="header">
        <nav class="navbar">
            <div class="navbar__links">
                <button class="navbar__links-close">
                    <img class="navbar__links-close-icon" src="images/icons/links-close.svg" alt="">
                </button>

                <a class="navbar__link" href="#">Кухонные ножи TUOTOWN</a>
                <a class="navbar__link" href="#">Складные ножи TUOTOWN</a>
                <a class="navbar__link" href="#">Кухонные ножи QXF</a>
                <a class="navbar__link" href="#">Точильные камни</a>
                <a class="navbar__link" href="#">Наборы для BBQ</a>
                <a class="navbar__link" href="#">Кухонные принадлежности</a>
                <a class="navbar__link" href="#">Туристические товары</a>

                <a class="navbar__question" href="#">Новости</a>
                <a class="navbar__question" href="#">О компании</a>
                <a class="navbar__question" href="#">Контакты</a>
                <a class="navbar__question" href="#">Как проехать</a>
            </div>

            <div class="navbar__menu header__navbar-menu">
                <div class="navbar__menu-left">
                    <button class="navbar__links-btn">
                        <img class="navbar__links-btn-icon" src="images/icons/links-btn.svg" alt="">
                    </button>

                    <div class="navbar__map">
                        <img class="navbar__map-icon" src="images/icons/map.svg" alt="">
                    </div>

                    <a class="navbar__phone" href="tel:+7 981 120-11-17">
                        <p class="navbar__phone-text">8 981 120-11-17</p>
                        <img class="navbar__phone-icon" src="images/icons/phone.svg" alt="">
                    </a>
                </div>

                <a class="navbar__logo" href="#">
                    <img class="navbar__logo-icon" src="images/icons/logo.svg" alt="">
                </a>

                <div class="navbar__menu-right">
                    <div class="navbar__basket navbar__basket--disable">
                        <img class="navbar__basket-icon" src="images/icons/basket.svg" alt="">
                    </div>

                    <div class="navbar__mail">
                        <img class="navbar__mail-icon" src="images/icons/mail.svg" alt="">
                    </div>

                    <div class="navbar__search">
                        <img class="navbar__search-icon" src="images/icons/search.svg" alt="">
                        <input class="navbar__search-input" type="search" name="" id="" placeholder="Поиск...">
                    </div>
                </div>
            </div>
        </nav>

        
    </header>





    <script src="js/plugins/navbar.js"></script>
</body>

CSS

@import "vars";

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    background: rgba(33, 33, 33, 0.8);
    backdrop-filter: blur(5.5px);

    /*links*/
    &__links {
        position: absolute;
        top: 0;
        left: -200%;

        z-index: 1;

        width: 500px;
        height: 100vh;

        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 23px;

        box-sizing: border-box;

        padding: 40px 48px;

        background: url("../images/menu-bg.png") no-repeat;
        background-color: #000000;
        background-size: cover;

        overflow-y: auto;

        transition: all 0.3s ease;
        &--active {
            left: 0;
        }
    }

    &__links-close {
        width: 6px;
        height: 12px;

        background-color: rgba($color: #000000, $alpha: 0);

        cursor: pointer;
    }

    &__links-close-icon {
        width: 100%;
        height: 100%;
    }

    &__link {
        font-family: "Montserrat";
        font-weight: 500;
        font-size: $ml;
        line-height: 22px;
        text-transform: uppercase;

        color: $white;
    }

    &__question {
        font-family: "Montserrat";
        font-weight: 600;
        font-size: $m;
        line-height: 18px;
        text-transform: uppercase;

        color: $dark-white;
    }
    /*links*/

    /*menu*/
    &__menu {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 23px 0;
    }

    /*menu-left*/ /*menu-right*/
    &__menu-left,
    &__menu-right {
        display: flex;
        align-items: center;
        gap: 23px;
    }

    &__links-btn {
        background-color: rgba($color: #000000, $alpha: 0);
    }

    &__links-btn-icon,
    &__map-icon,
    &__logo-icon,
    &__basket-icon,
    &__mail-icon,
    &__search-icon {
        width: 100%;
        height: 100%;
    }

    &__map,
    &__basket,
    &__mail,
    &__links-btn {
        width: 23px;
        height: 23px;

        cursor: pointer;
    }

    &__phone-text {
        font-family: "Montserrat";
        font-weight: 500;
        font-size: $l;
        text-transform: uppercase;
        color: $white;
    }

    &__phone-icon {
        display: none;
        width: 100%;
        height: 100%;
    }

    &__logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 150px;
        height: 35px;
    }

    &__search {
        width: 23px;
        height: 23px;

        cursor: pointer;

        position: relative;
    }

    &__search-input {
        position: absolute;
        top: 200%;
        right: 0;

        display: none;
        width: 300px;
        padding: 10px;

        background-color: $dark-light;
        color: $white;

        &:focus {
            outline: 1px solid $dark;
        }

        &--active {
            display: block;
        }
    }
    /*menu*/
}

@media screen and (max-width: 767px) {
    .navbar {
        &__menu {
            padding: 10px 0;
        }
        /*menu-left*/ /*menu-right*/
        &__menu-left,
        &__menu-right {
            gap: 10px;
        }

        &__phone-text {
            display: none;
        }

        &__phone-icon {
            display: block;
        }

        &__links-btn,
        &__map,
        &__phone,
        &__basket,
        &__mail,
        &__search {
            width: 18px;
            height: 18px;
        }

        &__logo {
            height: 25px;
        }

        //links
        &__links {
            gap: 23px;

            padding: 30px 25px;
        }

        &__link {
            font-family: "Montserrat";
            font-weight: 500;
            font-size: $sm;
            line-height: 22px;
            text-transform: uppercase;

            color: $white;
        }

        &__question {
            font-family: "Montserrat";
            font-weight: 600;
            font-size: $xs;
            line-height: 18px;
            text-transform: uppercase;

            color: $dark-white;
        }
        /*links*/
    }
}

@media screen and (max-width: 450px) {
    .navbar {
        &__logo {
            display: none;
        }

        &__links {
            width: 100%;
        }
    }
}

Answer 1

Если говорить об ограничении размера файла, то единственное что я нашёл:

For IE up to IE9 the css file size is max 288kb

и

Internet Explorer has is said to have a limit of 4096 CSS rules per file

Обе проблемы решаются разбитием этого файла и подключением через @import, но и с ним есть ограничения: максимально @import'ов на файл - 31 штука, максимальная глубина вложенности (т.е. @import file.css, в нём @import file1.css и т.д) - 4 вложения.
Эти ограничения на @import, вроде на все браузеры распространяется, лично до этих пределов не доходил.

Остальным же браузерам чхать на то, сколько и какого веса файлы обрабатывать, ну это в теории, там дальше будет страдать юзер, но это можно чуть ускорить, допустим на Apache использовать gzip или deflate.

Если же разбирать ваш вопрос "нормально ли столько писать" - нормально, порой бывают решения, где ещё больше строк кода.
Но ответ на данный вопрос куда сложнее, тут я бы сказал дело вкуса и опыта, ну и поддержка данного кода.

Допустим кто-то пишет

background-color: #fff;
background-image: url(img/image.jpg);
background-repeat: center center;

А вместо этого можно написать

background: #fff url(img/image.jpg) no-repeat;

Минус две строки кода, но для кого-то данная запись может показаться не понятно, особенно если прописать туда все "части" background'а:

background: transparent url(asdasd/asdasdasd/asdasdasd/asdasdasd.png) no-repeat round center 150% / cover fixed;

/* Что отдельно будет выглядеть так: */
background-color: transparent; /* можно и не писать, оно дефолтное */
background-image: url(asdasd/asdasdasd/asdasdasd/asdasdasd.png);
background-repeat: no-repeat round;
background-position: center 150%;
background-size: cover;
background-attachment: fixed;

Кто-то пишет

div {
  display: block;
  width: 100%;
}

Хотя это можно и не писать, т.к. дефолтные значения эти правила у <div> и так дефолтные.

Кто-то может написать

transition:
  width 0.3s ease,
  height 0.3s ease,
  background 0.3s ease,
  color 0.3s ease;

А можно сократить до такого:

transition: .3s ease;
transition-property: width, height, background, color;

В этом случае правила transition-duration и transition-timing-function одинаковые и мы можем так "сэкономить" места, но придётся всё "разбирать", если где-то нужно будет использовать другие значения.

В общем, всё сложно ?, но заморачиваться не нужно.
Строгих правил или ограничений нет (почти).
Писать "грамотно" - научит время, стоит ли переживать за "много кода на один элемент" - нет (подключите ещё автопрефиксер на 100 версий, строк станет раза в два больше - и даже это, условно, нормально).

БЛОГ НА HUSL

Слишком много css стили

Ответы (1 шт):