Is having secondary css style sheets a bad idea? [closed]

StackOverflow https://stackoverflow.com/questions/19575462

Question

So I am working on a web project and everything looks good, we defined a bunch of visual elements and modularized them into separate scss files. So when building our pages, we just import the elements we wanna use and stitch them together.

The problem is, different pages may use the same element but their layout may differ. The same button on one page may float left, while on another page it may float right. The same module on one page may have 30px margin top, while on another page it has 50px margin bottom.

What I thought is to have a secondary style sheet that contains some tiny amount of layout code for each page, and this file is page specific. Sure the client now has to download another asset but it's just a few lines of css.

But is this a bad idea? How bad? And if it is indeed evil, what will be a better approach to solve this problem?

Was it helpful?

Solution

A lot of the times a website's <body> tag will have a class on it like...

<body class="about"> <!-- for the about page -->

or

<body class="home"> <!-- for the homepage -->

and so on. You can do something like this to target it on individual pages:

.button-upload {
  float: left; /* It's floated left most the time */
}

.about .button-upload {
  float: right; /* Not on the about page, though! */
}

OTHER TIPS

that's why we have classes in css so you can seperate style to classes and declare the relevant classes in every page as necessary

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top