sequence of execution css files

Question

I have multiple css files in html file. It cause conflict for some of the styles.

I want to know execution sequence to avoid conflict or suggest me some other method. Below are the code.

    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="libs/ionicons/css/ionicons.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">

    <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox.css">
    <link rel="stylesheet" href="css/nivo-lightbox/nivo-lightbox-theme.css">

    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/main.css"> 
    <link rel="stylesheet" href="css/cropper.min.css">  
    <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fileinput.cs">

We cannot know this without seeing the insides of each. Which would be a rather long process. In short, if you know you have conflicts, you will have to resolve them. If order is important, than tag the most important ones as "important!" — durbnpoisn
– durbnpoisn, Commented Feb 10, 2016 at 19:30
As @durbnpoisn says, please provide more info about your question, and try to give screenshots of your data. Please read this How to ask — Elbert Villarreal
– Elbert Villarreal, Commented Feb 10, 2016 at 21:24

Ted Whitehead · Accepted Answer · 2016-02-10 19:33:14Z

3

The CSS files will be parsed from top to bottom. For example, any conflicting styles in main.css would be overridden by style.css.

I would suggest using a CSS preprocessor like Sass and a task runner like Gulp to bundle your stylesheets together, reducing the number of requests the browser has to make. That would also make it easier to namespace any styles to avoid conflicts.

For example:

#namespace {
  // original code goes here, which will all be prefixed with #namespace
}

FYI, there’s a typo in your code above—css/fileinput.cs is missing an s.

edited Feb 10, 2016 at 19:33

answered Feb 10, 2016 at 19:31

Ted Whitehead

1,82611 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roxx Over a year ago

yeah i know the typo actually during copy 's' was missed out. Anyways thanks for answer. voted up

Ted Whitehead Over a year ago

figured the typo was only in SO and not in your actual source code, but i know i do that sort of thing all the time so wanted to mention it :)

Collectives™ on Stack Overflow

sequence of execution css files

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related