Using a css files for multiple pages?


#1

I've made a few pages using HTML and CSS. Now every time I edit the css on one page it changes all the others. Should I use multiple CSS files?


#2

Well, you can use one CSS sheet for all your pages, that's common practice in production.

You will want to be careful regarding the names you give your IDs and Classes.

If you give the same class name to a div on different pages, once you update it all pages divs with the same name will obviously update.

Give different names to different elements throughout your website and you should be ok.

Update: the in production comment meant that only one CSS sheet will be linked in order to alleviate the number of requests sent when your website is live (published) on your web host. If you have 5 linked CSS sheets, that's 5 additional calls to be made, and it's not always efficient. But while you're developing your website, it's sometimes best to use several sheets for different pages / concerns, and then bring them all together within one sheet for efficiency.


#3

Thank you. That was my problem. I need to get a bit creative with descriptions.

I am wondering if I need to change the block id also with every new page I create from the template?


#4

You'll want to be really careful with your own naming conventions.
I say convention, even though there aren't per say. It's up to the developer's creativity.
But you will want to create your own conventions, that you'll remember and respect, for your own sanity.

I'd just recommend to be as logical and descriptive as possible, while making it as simple as possible.
Why? Because once your project takes thousand lines of code to run, separated on multiple sheets and HTML pages, it can become an absolute nightmare to maintain.

So, say you have a form to sign up for registration on your app

<form id="registration-form">
   <input name="username" type="text" class="registration-input" />
   <input name="email" type="email" class="registration-input" />
   <button type="submit" value="Sign up" class="registration-button"></button>
</form>

Here every aspect of the form will be determined by "registration-something".
That will help you keep things tidy and clear not only in your HTML, but especially in your CSS.

Now say that you have the form to log into your app, but you want it to look different than the one above.
They might as well be on different pages, and look nothing alike.
It will take a different set of names, but respect your naming convention:

<form id="login-form">
   <input name="username" type="text" class="login-input" />
   <input name="email" type="email" class="login-input" />
   <button type="submit" value="Login" class="login-button"></button>
</form>

That way, you keep everything clear, tidy, maintainable (not only for you, but for any other developer that might work on your project at a later stage - decrypting someone else's code can be a daunting experience) and you don't risk breaking things on other pages while trying to change something on your index page, for example.

I am wondering if I need to change the block id also with every new page I create from the template?

Template? Are you using a framework such as Foundation or Bootstrap? If yes you should have noticed certain naming conventions put in place by the framework devs. It's up to you to respect them or change them, but try to make all pieces fit together. As explained above.

Last but not least, try to keep your CSS as tidy as possible. Because that's the real nightmare. Especially when you start getting rid of elements throughout your site (HTML pages) and forget to delete them in your CSS. Everything just becomes a huge mess and you can't remember what goes where and what does what. Hence the importance of sorting your CSS by names or areas of the site that fit together. Make a lot of comments throughout your documents, that should help you remember the use of certain classes / ids and keeping things tidy.

Hope that helps!


#5

I would add a suggestion that when using id on a parent element, tie all the child elements to that id in your selectors, then class is not needed on any of them.

#login {

}
#login input {

}
#login button {

}

Latency (delay time of a request) is less and less an issue these days, and while we do want to minimize our requests, we also want to look for leanness. In this sense, if we have several theme variations spread about the site but not on all the pages, we can separate that theme and load it only for the page that needs it. All the generic, page default style rules can go in the main stylesheet file, and the custon styles in another. To be sure they always load in the correct order, add an @import to the top of the custom sheet that imports the default stylesheet (and parses it) before it parses the custom one.

<link rel="stylesheet" href="custom.css">

custom.css

@import default.css
/* all style rules below this point */