Grow your CSS skills. Land your dream job.

Good/Bad practice.

  • # November 26, 2012 at 11:38 pm

    Is it a good practice to inline all CSS properties in your jQuery? or just add the class using jquery and put all the CSS properties directly on the style.css?

    Like when you’re adding a HTML element via jQuery and you want to style it.

    I like to ask for opinions because a buddy of mine is teaching me that it is not good to inline all those CSS into your jQuery script. I’m having doubts on it because I’m adding the HTML element(eg: div overlay for the page)., and I think all the extra CSS code directly included in my stylesheet will be just be a waste when Javascript is disabled.

    I’m not really sure.

    Hope you understand what I’m asking.

    Thanks guys.

    # November 26, 2012 at 11:58 pm

    You should always have your styles in your style sheet. So therefore, you should just use JavaScript, or the jQuery library, to manipulate class names. It makes it a pain to maintain when you are blurring the lines between interactivity and style. If you are concerned about an increased file size for users with JavaScript turned off, then just have it in a separate style sheet.

    Also, you should try and have the html elements in your markup, but hidden using CSS, and then just grab them with JavaScript. If you are mixing content, style and interaction all into your JavaScript files, then you probably need to think twice about how you are handling it.

    # November 27, 2012 at 12:03 am

    @joshuanhibbert,
    So what do you think about this one. [Append Site Overlay DIV](http://css-tricks.com/snippets/jquery/append-site-overlay-div/ “Append Site Overlay DIV”).
    Thanks.

    # November 27, 2012 at 12:04 am

    I think that it is bad practice, and that if you were to ask @chriscoyier, he might suggest the same. That was written over three years ago.

    Here’s how I would handle it:

    <div id="overlay" class="hidden"></div>
    .hidden {
    display: none;
    }
    #overlay {
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    z-index: 5000;
    }
    $(function() {

    var docHeight = $(document).height(),
    $overlay = $('#overlay');

    $overlay.show();

    $("#overlay").height(docHeight);

    });
    # November 27, 2012 at 12:07 am

    OK. Thanks. Now I can go on.
    Anymore tips or links for good practices on JS and jQuery.
    @joshuanhibbert, thanks a lot really.

    # November 27, 2012 at 12:08 am

    Yeah keep CSS in CSS as much as you can for sure. Don’t be too dogmatic about it though. There are always cases where certains ways of doing things make sense. In the case of that snippet – it does what it says on the box. In general though, I’d move that style out of the JavaScript and into the CSS.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".