Hi,
I have multiple pages in my website. I want to use separate css/js files for different pages. Having all the css/js codes in one file makes it a bit unmanageable. Surely, I can create multiple files based on different area of the page (for example, one css for navbar and another for header section etc.). However, the css files under Styles get applied to all the pages by default. Is the css/js separation for different pages possible?
Thanks in advance!
Regards, Anupam
Surely having alll your css on 1 file is a lot more manageable than splitting it out over many so not sure how you came to that conclusion.
You are built on bootstrap which is a HTML/css framework so already you HAVE to have he bootstrap css file being reference on every page. Can I ask the use case as to why you want to have different CSS files for each page?
If you are adamant that you want to split out your CSS files then I guess the only way you can do that is to create your site using this tool, export your design and then manually edit each exported page and remove the css links manually but you will have to do that each time you make a change.
I'm with Chris on this as well, was just about to type an answer when he did already. It's most inefficient to use separate CSS files per page, you are much better off using page style classes in your CSS instead so you can keep it all together in one. That is much faster loading for your visitors as well as more manageable when looking for classes without having to open 20 CSS files to find something that may have gone in the wrong file and so on. All in one page is the most manageable way to do this. You'll also find it's the most efficient in BSS, because creating new classes automatically goes to the first CSS file in the list unless you specify. This can get messy if you create new classes with the button or the CSS UI in the top right, and you forget to tell it where to put them. You'll end up with lots of classes in the wrong files by the time you're done if that happens.
Create a page class like class="page1-title" and alter those items that way that you want to be different on each page. For your users convenience, this should "not" include your menu in any way, unless it's just a style difference in color or shading. If you value your users, give them a straight forward way to get around your site, don't make it a different structure on every page. This of course, would not pertain to external component scripts that you've gotten from others. I keep those separate from the main CSS file myself as well, but I don't do anything per page with them, I leave them as is or edit them to make the component do what I want it to do on all pages.
Chris's way is the only way to do what you're wanting to do at this time, but although I'm looking forward to a time when we can assign specific files to specific pages, this reason would not be one of them..
Hi Chris/Jo,
Thank your for your answers :)
I usually give css id as 'section-header' for the header section of page (and so on for the other sections, like section-feature, section-article etc.). I would have different headers in different pages which in turn will have different styles. I was editing an inner page, was done editing the css for the same and when I landed up in the home page, it was all messed up. So, I was wondering that it would be better off to separate the css on per page basis.
Later, for not having this option, if pre-pended the page name before the corresponding styles (this is suggested by Jo as well). But then, the size of the css became too long requiring multiple scrolls to navigate through the css rules.
Regards, Anupam
Ahh see, that's the beauty of BSS. When done correctly you don't have to scroll much for anything. Search works great, and when you're working on a component, all of the classes and ID's that are in the component show in the Styles main window so if it is not there, that means it's not connected to that component. If it is there, then it is connected. If you have a class on your component, but it's not showing up in the Styles window and should be, then most likely you altered the name of the class in the file or in the component and you just need to do a search in the file it is in. If you have it all in the same file, that means you don't have to open multiple CSS files to find things, it's all right there, just search for that class name and if it's there you can check to see why it's not connected (which is most likely a name difference between the file and the component).
BSS gives you a very easy way of updating your classes that are connected to a component without having to search for them no matter what file they are in, because they are all right there at your fingertips. This would be the same no matter how many CSS files you used, so the separation would actually be a useless setup for using BSS. I could see if you were doing hand coding without a visual interface like BSS, (even then it's still not efficient or speedy for your visitors), but with BSS it would be a wasted amount of time as you'd never see that difference in the app. The only place you'd see it is in the grey name of the file to the right of each class. Need to get to that class specifically within a specific CSS file? just click that grey file name and it opens that CSS page. This isn't needed very often if you follow simple procedures like:
In the styles window all Media Queries go from bottom to top same as responsive design goes smallest to largest. This means the main class is at the bottom and if you add a media query you would duplicate the class and add the media query to the one above not the one below. This shows opposite in the CSS files themselves, but in the app that is what gave me the most headaches at first lol. I just couldn't figure out what it was doing, and I'd get them wrong all the time and have to open the CSS file and fix it and I finally realized it was doing them opposite to how they end up in the actual CSS files. That will help keep you from having to scroll the actual CSS files much at all.
Prepending classes or using ID's is the proper way to do it. Every added CSS file adds time to how long it takes for your pages to load. But then as I mentioned, i don't adhere to all the rules myself either just because I'm stubborn haha. I don't minimize because it's just added work after every export that I don't want to mess with and the internal minimizer doesn't play nice with 3rd party components and such either so I gave up on that idea. Maybe someday, but not right now. I also have multiple CSS files for multiple components as well. I use 3rd party menu systems, gallery setups and a few others and I don't combine those into my main CSS. Some people do, but I don't as I don't want to break things and that usually does break some things.
In the end, you are better to get used to the more proper way of coding (even when hand coding things should be done mostly in one file rather than separate ones, and for sure you don't separate files for the main components of the pages, especially if it's components that are on all the pages and maybe just a different image background or background color etc. For instance, I have a site I'm working on right now that has a different background image for every main category header area of the page. Lots of dropdown items in their menu and they wanted each category to have a different image so we did that. I just named the classes with added numbers so I could keep track of which was which for adding new pages. Simple to do and as I said, it won't matter in BSS, you won't know you went through all that work of separating things because it will show up the same in the Styles window no matter how you do it.
Hope that helps.
Hi Jo,
Thank you for your suggestions. I will try and keep things organized by numbering the css rules. And yes, that really helped :)
Regards, Anupam Bordoloi
With out reading @jo's second post, because I think my brain went numb in the sea of text :)
You could simply put a class to your body element to differentiate 1 page from the next. So you can keep the HTML and CSS relatively clean.
For example the first page you would add <body class="page1"> and do the same for the other pages accordingly.
Then you can write CSS like the following
#section-header{ //stuff that is commonly used
border:1px solid red;
box-shadow:1px 3px 5px #d3d3d3;
}
.page1 #section-header { //specific to page1
background: red url(image1.jpg) no-repeat;
}
.page2 #section-header { //specific to page2
background: green url(image2.jpg) no-repeat;
}
.page3 #section-header { //specific to page3
background: blue url(image3.jpg) no-repeat;
}
And even if your first 3 pages are the same but page 4 is different you would do.
#section-header{ //stuff that is commonly used
border:1px solid red;
box-shadow:1px 3px 5px #d3d3d3;
}
.page1 #section-header, .page2 #section-header, .page3 #section-header { //specific to first three pages
background: red url(image1.jpg) no-repeat;
}
.page4 #section-header { //specific to page4
background: green url(image2.jpg) no-repeat;
}
Just a quick example, I realize that most likely bigger differences but it's something that still could apply to your situation.
Saj