Последовательность выполнения css-файлов

Question

У меня есть несколько файлов css в html-файле. Это вызывает конфликт для некоторых стилей.

Я хочу знать последовательность выполнения, чтобы избежать конфликта или предложить мне другой метод. Ниже приведен код.

<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"> 

Answer 1

Файлы CSS будут анализироваться сверху донизу. Например, любые конфликтующие стили в main.css будут переопределены style.css.

Я бы предложил использовать препроцессор CSS, такой как Sass, и бегун задач, такой как Gulp, чтобы объединить ваши таблицы стилей вместе, уменьшив количество запросов, которые должен сделать браузер. Это также облегчило бы пространство имен для любых стилей, чтобы избежать конфликтов.

Например:

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

FYI, есть опечатка в коде выше- css/fileinput.cs пропускает s.