CODEWITHSUNDEEP
css
mkorman
mkorman

Reputation: 978

CSS: is splitting layout and look and feel a good idea?

One of the things I find hard to work with in CSS is how rules mix layout (ie: position, sizing) and look and feel (color, shadows, fonts, etc.).

We're working in a 'reskin' project, where we want to keep the layout of our solution, but change the look and feel. To this end I'm thinking of splitting the current styles in two: one stylesheet for layout and the other for skin, and then replace the latter with the new, reskinned one.

Just to illustrate my point. A current CSS rule could look like this:

Styles.css:

.my-class {
    /* layout rules */
    width: 100px;
    height: 50px;
    float: left;

    /* look and feel rules */
    border: 1px solid red;
    font-weight: bold;
}

My idea would be to split this into 2 individual rules, in 2 files:

Layout.css:

.my-class {
    width: 100px;
    height: 50px;
    float: left;
}

Skin.css: (could be replaced with a different 'skin' file)

.my-class {
    border: 1px solid red;
    font-weight: bold;
}

Is there any reason why this would not work? Does this have any drawbacks (other than the increased page load time?)

Upvotes: 2

Views: 435

Answers (1)

GiftZwergrapper
GiftZwergrapper

Reputation: 2782

If you have a clear way of separating the CSS you can do it this way. In our company it is separated the same way, you just have to pay attention when adding new CSS so you don't mix it up.

There is no increase in page load time, when you use PHP to merge the files together and minimize it when the user visits your website. Check out this link, there is an explanation on how to combine and minify CSS with PHP.

Upvotes: 1

Related Questions