This question already has answers here:
css best practices - combining all css into a single stylesheet?
(4 answers)
Closed 8 years ago.
Are there any notable differences between placing all my CSS into custom.css, and dividing it up by controller (For example, putting all user-related CSS into user.css, etc)?
Dividing it up is more organized, but one concern I have is that if I have to write '#import "bootstrap";' at the top of every css file, my app might load bootstrap seperately for every file, thereby possibly increasing the load time.
Any input would be appreciated!
Adding css in different files is, as you said, purely for organizational purposes. It has no functionality differences.
However, when you refer to the #import bootstrap implementation, i would suggest against adding that in every css file, for the reason you stated above (because you can miss something or you can link it twice). If you simply add a reference link at the top of your template html page (if you are using one) or at the top of your html pages (if you are not using one), it ensures that bootstrap is loaded once per page (or once per session if its a single page application) so you wont have to worry about missing bootstrap or loading it multiple times unnecessarily.
hope this helps!
I think it is a matter of personal preference. the more you have code, the more difficulty you will have when debugging or going through the file. For me, I usually store them under the root folder in a Css folder. and I also like breaking them down and not mixing my bootstrap files with my custom cssbut that's just me.
I also split it using specific values like for example if i have a css for a specific browser, i put it in the folder a folder like css/firefox/overrider.css
I think it is just a matter of preference. for the import, individual csswill be better (correct me if I am wrong). It is better explained here: Import vs Link files
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I've been adhering to the practice of having all CSS files in one folder. Is it just for the sake of keeping things organized or does it have any other benefit besides that.
This questions isn't just for clarification purposes, I have a whole lot of Websites that I'm trying to decrease their load time and I was wondering if this method will help.
two reasons come in mind right now (to do with keeping both html, js and css seperate):
both css and js can be reused in multiple html files if are in external file but you need to copy same code in each page if is a single html+css+js page.
If you want you can develop a new version of the code, css or js, for a online page and when you finish the only thing you need to do is to change the filename in the link or script element in html. This means you're not being repetitive
Placing them into a single css also means that it's easier to find the styling and bulk edit a lot of the html styling in a single place.
I also found:
Easier editing: Suppose you find that distances are calculated wrong (or whatever you are currently working on), then it's definitely easier to just open the file that contains the object responsible for distance calculation than scrolling through your huge HTML file looking for the culprit.
Syntax highlighting / Code completion / other features of you IDE (like refactoring): This might work partially with code inside of HTML files, but not all that well. So, you could work faster and actually see errors before they become bugs.
Cachability: While your HTML code will be different for all the pages of your site, your CSS and JS won't, and it would be silly to reload them for every page (which happens when they are put directly into the HTML).
Page load time: With CSS and JS in the HTML file, they have to be loaded before the browser will see any actual HTML, so the page will show slower. Also, search engines that don't really care about your scripts will have to load them, and there are penalties based on page load time.
Minification: In production, you use a minified (and concatenated) version of your CSS and JS, and of course you don't want to manually create that every time you make a change, so you do it programatically. Trying to do that without separate files would become very ugly, and you wouldn't be able to cache that minified version, which would be quite the performance hit.
CSS generators: When you start to care about keeping code duplication to a minimum, you will quickly tire of writing CSS, which is full of duplications, and switch, for example, to SASS (like I did quite some time ago). You will definitely need separate files to make that work.
So, in answer to your question,
Yes, for the majority of websites, separating them (like mvc does by default) will likely quicken your load time. (very few exceptions appear in this rule, however a site with 1 or 2 style declarations may be slightly faster when placed within the html, but if you ever use MVC you won't look back at not separating them!)
Storing all the css files into one folder will not decrease load time. Best way to decrease the load time is to combine all CSS files together and to minify it. Bad thing here is when time comes to change your styles. You would have to keep original files, or to decompress/pretty print it, than change, than minify again. Some CMS have an option to minify and cache all of your styles (and javascript files), which is much better. On the other, your server side, make sure all of your styles are gzipped before they are delivered to client browser. More about how to enable compression on Apache
Why have all CSS files in one folder?
Why have many CSS files to begin with? If you interested in "decreasing the load time" then you should consider having only one CSS file.
Long story short, you can organize your CSS and JavaScript files any way you want. However, when serving the files you must combine and minify all CSS files into one (likewise for JavaScript).
I personally keep related CSS, images and JavaScript together. I find it much easier to work with files that way. An example would be:
- resources
- plugin1
- plugin1.js
- plugin1.css
- images
- plugin2
- plugin2.js
- plugin2.css
- images
I have written a script that combines CSS files from all folders into one file, minifies them and copy the result to a directory below the wwwroot.
The organisation it's very important for a projet, you don't put apple into a pear bag it's a reflex, but, in fact you can do it ...
For the code it's the same, you put CSS files into CSS folder, but you can don't do it.
Imagine than you have 30 CSS files, 40 PHP files, 50 pictures et 10 js files ... You need to organised this !
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would wish to start a discussion to get some good ideas on how to organise style sheets in a very big project with a big team of developers working on it.
One possible approach here is to have just one sheet with all the styles organized using comments and regions, unfortunately even using a one-lined writing approach with tabs this sheet would become incredibly big and even having SVN commits and updates could become messier.
So we think it would be better to divide styles in different sheets. What we are not sure is how to organize this as we have different ideas for it.
One possible idea is to organize it for types: colors.css, fonts.css, forms.css, ...
Another idea is to group them by functionality/behaviour: navigator.css, menu.css, warnings.css, errors.css, ...
We could also organize them by page: login.css, contact.css, home.css, ...
Or even use a combination of those three ideas together.
Now what worries me is the fact that we would prefer not to add all the styles to every page, as not all the pages require all the styles and we are really worried about performance as our project is consumed by millions of users everyday. We of course compress it later on deploying but even so we think it's wiser to load only the required ones per page.
On being so, I am worried about other developers not loading styles in correct order, as having different sheets needed to be loaded depending on the page, or on the group of pages, they could get this messed up and on doing so cascading will fail (imagine they load menu.css before global.css, global would override some menu styles!!!).
Now we could just go for one sheet, we could just load all of them always, or we could use some idea we came to like using an alphabetical prefix to tell developers the loading order:
a_global.css
a_forms.css
b_region1.css
b_anotherregion.css
c_page.css
But that looks a bit horrible being honest. So now I was wondering if there is some type of popular css architecturing out there or at least some good ideas we could use for our project here.
Many Thanks!!
Go with a preprocessor, so you can organize source files however you want. (Our team uses LESS, because we've started with Twitter Bootsrap and it stuck). The compiled CSS file should not be under version control, each developer should compile their own version for testing. I'd recommend a grunt task to compile a minified version for production. I'd go with component-centric approach (forms, navs, grid, typography etc).
Using a preprocessor gives you the power of variables and mixins. You can keep files like variables.less and mixins.less in which you define common styles. So you when that blue color changes into slightly lighter blue you just change it in one file.
One large file including all the CSS you need should be fine as it is cached by browsers, so it minimizes HTTP requests to your serwver. Page-specific stylesheets are OK when a particular page has many uncommon elements.
Create a style guide html template which includes every common element you can think of. Headings, link colors, lists, photo thumbnails, form inputs, grid configurations, accordions etc. When you need to create a new component add it to this template, modify the stylesheets, see if it breaks any other elements and how it fits with the rest. Then use these snippets to create particular pages.
SASS or LESS
This will help you to keep your code easy managed. (variables, mixins etc)
Divide in multiple count of files.
Always a good idea. How to divide.
I suggest basically to divide them per page.
BUT -
Exclude general styles to seperate files which will be included everywhere.
By the way, one single file doesn't imply low performance. Are you sure that 10 requests for smaller sheets will be faster than one request for bigger file?
Additionally this files will be cached in web browser, so one file doesn't look like a bad idea.
Is there a way of filtering large CSS files for the only required selectors on a page, and creating css files that contain just these selectors?
Case: I have a very large CSS file that I want to filter on a per page basis, so that the file size is cut down and can be cached by mobile devices. I was thinking along the lines of something like a server side dust me selectors tool.
The particular project I am working on is using ASP.NET MVC.
Thanks
Heads up that while you might get smaller individual page loads, the overall load of browsing the site will be higher given that you're hitting the server each and every time for a new CSS file (rather than just caching a site-level CSS file once).
In addition, if you find that there are a lot of unique per-page CSS declarations, the CSS for the site may not be written very well. So the solution may be to go back and rethink the CSS structure to begin with, perhaps looking into OOCSS models:
http://wiki.github.com/stubbornella/oocss/
Unfortunately, none of that answers your specific question.
Where multiple people can work on same css. is it possible to follow semantic name rules even in large websites.
If I would write all main css first time with semantic names . then what and how i should guideline/instruction to other developer to maintain css readability, validation . and to know quickly where other are adding their own css if required.
Right now every one just go to down and write required css classes ot IDs at bottom. and most of the time they don't write semantic names.
How to make good documentation/guide with text or with images for other developers on how to use css in whole site and how i wrote and what i used.
Update:
We use only one CSS file. I don't want to divide one css in multiple. Want to keep css managable even using one CSS file for whole site.
A similar question was asked a while ago: How to manage CSS Explosion there is a number of good answers there, and a number of great links (check out those provided by Paul D. Waite for example.)
Your main problem is going to be structuring the CSS file well. You will need clean rules for that: Keep everything grouped within the CSS file. Maybe using a CSS editor that can help you "navigate" through the style sheet is a good idea (similar to a programming IDE's "code explorer" feature). I don't know, however, if such a thing exists.
Other than that:
Using version control is a MUST. I personally am totally happy with centralized versioning using Subversion and TortoiseSVN; others believe in distributed version control like git or hg. For a team of designers, I think the centralized approach of Subversion is good, but that is a discussion in itself.
Maybe it's a good idea to split the style sheet into thematically relevant separate files to avoid chaos, and compile it using a tool like LESS or xCSS.
Define a clear, concise coding style. Use a CSS beautifier like Polystyle ($14 per license but money well spent) or Code Beautifier (based on CSS Tidy, haven't used it but looks interesting) and run it frequently on the file.
Have a number of links handy of pages that use the style sheet. Have people test those pages after they have made a change to the style sheet.
I would break down your css logically into groups and put each of these groups into its own css file. For example: header, footer, sidebar, content groups. Maybe some pages even deserve their own css file if big enough.
Similarly, give ids and classes on pages names that make sense. If it is a css rule for sub headings on a navigation bar, make sure it comes off as that in naming. Similarly to any other coding, don't use any magic numbers, etc. for naming.
See Modularizing web applications, includes specially CSS
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
When my site depends on many css files, I realize it is a mess. It means, I use different css files from another team, and I put them together with mine. Hmm, many files then!. I get stuck with organizing them. Anybody has a good solution?
You can use cssmerge to merge the files after removing duplicate rules and properties.
Your 'all in one tub' approach suggests you might trample on each-other's CSS definitions.
The ordering in which you include each CSS file may well dramatically affect your site.
There isn't an easy answer for you. You need to get the other team(s) to work in the same way, or perhaps work with them using a version control system where you all contribute CSS to one place.
I'm really interested in hearing about how people group their CSS files and prevent naming conflicts.
But I also think you should consider how you package the CSS for a production release. It really depends on the framework you're using and your application code, but ideally you'll have some way to specify which pages depend on which files, and a build step that concatenates the CSS files for a page together and runs them through YUI Compressor, and outputs a unique filename including a checksum of the content or a date, so that the file can be cached indefinitely. (And then of course you'd put the CSS file at the top of the document)
These are some tips for merging and organizing CSS manually
Separate code into sections like Link Styles,Common Classes ,Layout or Structure Styles ,Header ,Navigation ,Content ,Footer
Indent descendants and related rules
This allows you more easily recognize page structure within your CSS and how elements relate to each other. This method can also be applied for a specific tag such as a heading tag.
Compress your Code to one line
Instead of having each attribute on its own line, have them all on the same line. This reduces the file size of your CSS file and also makes it easy to scan when trying to find a specific tag.
Alphabetize attributes
This just seems to make my CSS easier to read when I’m scanning it or looking for something.
Use shorthand wherever possible
This makes your CSS easier to read and understand and is much more efficient.
Reset your CSS
There are a ton of methods for resetting your CSS
Use separate CSS stylesheets for different elements
Have a main style sheet that you import others into. You could have a stylesheet just for typography, another for layout, and another for colors. By keeping these elements organized within their own style sheets this can make it easier to manage your code.
Declare colors used at the top of your CSS files
Within CSS comments at the top of your file code the colors you are using in your file and the color they represent.
I really like styleneat.com. Only if it wasn't a web app.