Join multiple CSS files into single one

Question

I had to covert some PSD-s into html, but every page had its own styling so I went forward and made one for each.

The client now requires them to be joined into a single one. Is that possible?

Thanks.

Edit: They don't have unique ID/classes.

It's possible yes, just add them all into one file - but hope you've used an unique naming convention otherwise could hit problems — StudioTime
– StudioTime, Commented Feb 12, 2016 at 8:58
They don't have unique id-s and classes. Forgot to mention that. — as__
– as__, Commented Feb 12, 2016 at 9:01
If you don't have unique ID/classes then it will be overwrite(I think which will be in last will applied,correct me if I am wrong) — Dhara
– Dhara, Commented Feb 12, 2016 at 9:07
You should definitely start by adding ID/Classes and add files one by one after thorough unit testing — RandomUser
– RandomUser, Commented Feb 12, 2016 at 9:09
Yes that's correct. Whichever is called last will be used with the exception of "!important" values in previous loaded files. — as__
– as__, Commented Feb 12, 2016 at 9:10

David Wilkinson · Accepted Answer · 2016-02-12 11:19:56Z

2

Since you converted the PSD's to HTML, I assume you've still got access to the code? In which case, your best best is to give each page a unique identifier (class or ID) at a high enough level that you can specificy with parent / child selectors. Example:

Page 1:

<body id="aboutus">

Page 2:

<body id="services">

You can then target via CSS the elements that are on each page within the same CSS file (the laws of specificity will take effect: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/):

#aboutus h1 {
    color: red;
}

#services h1 {
    color: green;
}

Option 2 (Credit to Darren Sweeney):

In addition to adding an id / class to the body element I've mentioned above, you can make the process of adding styles for each page a lot easier by using a CSS preprocessing language such as SASS / SCSS. For example:

SCSS:

#aboutus {
    h1 {
        color: red;
    }
    p {
        font-size: 10px;
    }
    a {
        text-decoration: underline;
        .active {
            color: #fff;
        }
    }
}
#services {
    h1 {
        color: green;
    }
    p {
        font-size: 15px;
    }
    a {
        text-decoration: underline;
        .active {
            color: #000;
        }
    }
}

edited Feb 12, 2016 at 11:19

answered Feb 12, 2016 at 9:10

David Wilkinson

5,1281 gold badge21 silver badges32 bronze badges

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

7 Comments

as__ Over a year ago

Thanks, do you now any tool that would automate the process of adding that ID to every css line?

David Wilkinson Over a year ago

Hmmm, you could start with class selectors - as you know they all begin with a period (.) You could then do a find and replace in a text editor, finding all .'s and appending them with the #aboutus, etc... This won't work for elements without a class such as h1's. Failing that, you could do it manually the first id for a page (i.e. - manually go through each element and add the id of a page first). You could then copy it over to another text editor tab and find and replace the id of that page for another one then paste it back in to the master CSS file?

print x div 0 Over a year ago

@as__ do you have a single line for every css selector and attributes in a single line? In this case you can use a multi-line selector (like Notepad++ has).

StudioTime Over a year ago

Failing that use scss and simply wrap the whole css per page in the outer id then process the css

as__ Over a year ago

@DarrenSweeney Hey Darren, thanks a lot for your answer. I think your answer is the best way to go for this. Could you write it as an answer and maybe explain it a tad more. I have not had experience with scss earlier :)

|

Collectives™ on Stack Overflow

Join multiple CSS files into single one

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related