Adaptation on the site through jquery, good or bad?

Question

css

Need an answer from more experienced front-end developers. Is it good or bad when the site is somewhere around 20-30% adapted through jquery and not css.

var divWork = $("div.work");
    $('div.b-color').css("max-width", divWork.width() + "px");
var win_height = $(window).height();
    var win_width = $(window).width();
if ($(window).width() >= 992) {
        $('div.owner').css('padding-top', win_height / 2 - 180);
        $('div.owner-right, div.owner-left').height(win_height).width(win_width / 2);
        $('div.content-about').height($('div.content-about:first').height());
    } else {
        var div_owner = $('div.owner');
        var owner = div_owner.css('padding-top', win_height / 2 - 180);
        var ownerPadding = div_owner.css('padding-top');
        div_owner.css('padding-bottom', ownerPadding);
        if ($(window).width() < 768) {
            $('div.col-sm-6').removeClass('text-right').addClass('text-center');
        }
        $('div.portfolio ul').css({
            'margin-left': $(window).width() / 2 - 140
        });
    }

Answer 1

Very bad hat

Answer 2

I think the balanced answer would be this: it's better to get by with styles, but the reality is that where the use of CSS is impossible (or unreasonably time-consuming), JS can and should be used. It is desirable to strive to ensure that the code responsible for the adaptation is as clear and concise as possible. Well, so as not to move with the client logic.

Answer 3

not desirable, use on example (SASS)
media (min-width:$screen-xs){
.background-color: #0b0b0b;
}
media (min-width:$screen-sm){
background-color: #0b0b0b;
}
media (min-width: $screen-md){
background: url('../img/black2.jpg')no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -moz-background-size: cover; background-size: cover;
}
media (min-width:$screen-lg){
background: url('../img/black2.jpg')no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -moz-background-size: cover; background-size: cover;
}

Answer 4

In general, you need to learn one simple rule. If this is not a full-fledged JS application, then the page should do without JS as much as possible. Those. with JS disabled, the page should visually behave as intended.

Answer 5

Bad is bad, CSS is bad