Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Order of loading css

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #191620
    portia
    Participant

    Hi,

    I have my media queries in the main.css. The dropline menu css code is in a separate stylesheet: droplinebar.css

    The order of loading stylesheet is as follows:

    <link rel=”stylesheet” href=”css/normalize.css”>
    <link rel=”stylesheet” type=”text/css” href=”css/droplinebar.css”>
    <link rel=”stylesheet” href=”css/main.css”>

    So if I have all my media queries in main.css. It works fine apart from anything related to dropline menu. It does not change anything. If, on the other hand, I put the media query line in droplinebar.css, it works as intended. I don’t want to split the media query code over two stylesheets. Any help on that? Thank you.

    #mydroplinemenu entry below doesn’t work below (main.css) however if I put another @media query with #mydroplinemenu in droplinebar.css it works fine (changes the background of the menu).

    @media only screen and (max-width: 40em) {
    body {
    }
    footer {
    width: 100%;
    }
    .main {
    width: 90%;
    }
    #mydroplinemenu {
    background-color: red;
    }
    }

    You can check everything here: http://www.install-design.co.uk/id/

    Thank you

    #191626
    Westin
    Participant

    It is good practice to divide your code into separate files for development purposes, however, for the sake of HTTP requests, you should look into be compressing all of those files into one.

    I would suggest taking a look at something like sass to help with that. Once you learn that, try implementing Compass to help with vendor prefixes.

    If you are not interested in learning sass right now, at least copy and paste the contents of normalize.css, droplinebar.css, and main.css into one file.

    #191627
    portia
    Participant

    Thanks for your reply. I know of sass/compass, started playing with it. Would it be possible, though, to convert the existing code into sass at this stage? or does it only make sense when you start a new project?

    #191630
    Westin
    Participant

    Thanks for your reply. I know of sass/compass, started playing with it. Would it be possible, though, to convert the existing code into sass at this stage? or does it only make sense when you start a new project?

    Sass is essentially an extension of CSS that gives you conditionals, functions, variables, ect. In other words, you can take any existing CSS code, throw it into an .scss file and it will work with no problem.

    Since you only have about 500 lines of css uncompressed, it should not take too long to implement sass into your existing code if you wanted to. Technically, you don’t have to touch your current CSS to implement sass, so that is up to you.

    I personally would go ahead and implement sass into my current code.

    #191665
    portia
    Participant

    Ok. Thank you for that. I actually decided to start fresh and went the sass/compass way. I’ll be back soon:)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.