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 4 years ago.
Improve this question
Is there any advantage to having a single monster .css file that contains style elements that will be used on almost every page?
I'm thinking that for ease of management, I'd like to pull out different types of CSS into a few files, and include every file in my main <link /> is that bad?
I'm thinking this is better
positions.css
buttons.css
tables.css
copy.css
vs.
site.css
Have you seen any gotchas with doing it one way vs. the other?
This is a hard one to answer. Both options have their pros and cons in my opinion.
I personally don't love reading through a single HUGE CSS file, and maintaining it is very difficult. On the other hand, splitting it out causes extra http requests which could potentially slow things down.
My opinion would be one of two things.
1) If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests)
2) If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at runtime build time (runtime minification/combination is a resource pig).
With either option I would highly recommend caching on the client side in order to further reduce http requests.
EDIT:
I found this blog that shows how to combine CSS at runtime using nothing but code. Worth taking a look at (though I haven't tested it myself yet).
EDIT 2:
I've settled on using separate files in my design time, and a build process to minify and combine. This way I can have separate (manageable) css while I develop and a proper monolithic minified file at runtime. And I still have my static files and less system overhead because I'm not doing compression/minification at runtime.
note: for you shoppers out there, I highly suggest using bundler as part of your build process. Whether you're building from within your IDE, or from a build script, bundler can be executed on Windows via the included exe or can be run on any machine that is already running node.js.
A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.
Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.
http://lesscss.org
http://sass-lang.com
If you don't want to mess around with Ruby, this LESS compiler for Mac is great:
http://incident57.com/less/
Or you could use CodeKit (by the same guys):
http://incident57.com/codekit/
WinLess is a Windows GUI for comipiling LESS
http://winless.org/
I prefer multiple CSS files during development. Management and debugging is much easier that way. However, I suggest that come deployment time you instead use a CSS minify tool like YUI Compressor which will merge your CSS files into one monolithic file.
Historically, one of the main advantages x in having a single CSS file is the speed benefit when using HTTP1.1.
However, as of March 2018 over 80% of browsers now support HTTP2 which allows the browser to download multiple resources simultaneously as well as being able to push resources pre-emptively. Having a single CSS file for all pages means a larger than necessary file size. With proper design, I don't see any advantage in doing this other than its easier to code.
The ideal design for HTTP2 for best performance would be:
Have a core CSS file which contains common styles used across all pages.
Have page specific CSS in a separate file
Use HTTP2 push CSS to minimise wait time (a cookie can be used to prevent repeated pushes)
Optionally separate above the fold CSS and push this first and load the remaining CSS later (useful for low-bandwidth mobile devices)
You could also load remaining CSS for the site or specific pages after the page has loaded if you want to speed up future page loads.
You want both worlds.
You want multiple CSS files because your sanity is a terrible thing to waste.
At the same time, it's better to have a single, large file.
The solution is to have some mechanism that combines the multiple files in to a single file.
One example is something like
<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />
Then, the allcss.php script handles concatenating the files and delivering them.
Ideally, the script would check the mod dates on all the files, creates a new composite if any of them changes, then returns that composite, and then checks against the If-Modified HTTP headers so as to not send redundant CSS.
This gives you the best of both worlds. Works great for JS as well.
Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests.
Having several little CSS files means development is easier (at least, I think so : having one CSS file per module of your application makes things easier).
So, there are good reasons in both cases...
A solution that would allow you to get the best of both ideas would be :
To develop using several small CSS files
i.e. easier to develop
To have a build process for your application, that "combines" those files into one
That build process could also minify that big file, btw
It obviously means that your application must have some configuration stuff that allows it to swith from "multi-files mode" to "mono-file mode".
And to use, in production, only the big file
i.e. faster loading pages
There are also some software that do that combining of CSS files at run-time, and not at build-time ; but doing it at run-time means eating a bit more CPU (and obvisouly requires some caching mecanism, to not re-generate the big file too often)
Monolithic stylesheets do offer a lot of benefits (which are described in the other answers), however depending on the overall size of the stylesheet document you could run into problems in IE. IE has a limitation with how many selectors it will read from a single file. The limit is 4096 selectors. If you're monolithic stylesheet will have more than this you will want to split it. This limitation only rears it's ugly head in IE.
This is for all versions of IE.
See Ross Bruniges Blog and MSDN AddRule page.
There is a tipping point at which it's beneficial to have more than one css file.
A site with 1M+ pages, which the average user is likely to only ever see say 5 of, might have a stylesheet of immense proportions, so trying to save the overhead of a single additional request per page load by having a massive initial download is false economy.
Stretch the argument to the extreme limit - it's like suggesting that there should be one large stylesheet maintained for the entire web. Clearly nonsensical.
The tipping point will be different for each site though so there's no hard and fast rule. It will depend upon the quantity of unique css per page, the number of pages, and the number of pages the average user is likely to routinely encounter while using the site.
I typically have a handful of CSS files:
a "global" css file for resets and global styles
"module" specific css files for pages that are logically grouped (maybe every page in a checkout wizard or something)
"page" specific css files for overrides on the page (or, put this in a block on the individual page)
I am not really too concerned with multiple page requests for CSS files. Most people have decent bandwidth and I'm sure there are other optimizations that would have a far greater impact than combining all styles into one monolitic CSS file. The trade-off is between speed and maintainability, and I always lean towards maintainability. The YUI comperssor sounds pretty cool though, I might have to check that out.
I prefer multiple CSS files. That way it is easier to swap "skins" in and out as you desire. The problem with one monolithic file is that it can get out of control and hard to manage. What if you want blue backgrounds but don't want the buttons to change? Just alter your backgrounds file. Etc.
Maybe take a look at compass, which is an open source CSS authoring framework.
It's based on Sass so it supports cool things like variables, nesting, mixins and imports. Especially imports are useful if you want to keep seperate smaller CSS files but have them combined into 1 automatically (avoiding multiple slow HTTP calls).
Compass adds to this a big set of pre-defined mixins that are easy for handling cross-browser stuff.
It's written in Ruby but it can easily be used with any system....
here is the best way:
create a general css file with all shared code
insert all specific page css code into the same page, on the tag or using the attribute style="" for each page
on this way you have only one css with all shared code and an html page.
by the way (and i know that this is not the right topic) you can also encode your images in base64 (but you can also do it with your js and css files). in this way you reduce even more http requests to 1.
SASS and LESS make this all really a moot point. The developer can set up effective component files and on compile combine them all. In SASS you can toggle off the Compressed Mode while in development for easier reading, and toggle it back on for production.
http://sass-lang.com
http://lesscss.org
In the end a single minified CSS file is what you want regardless of the technique you use. Less CSS, Less HTTP requests, Less Demand on the server.
The advantage to a single CSS file is transfer efficiency. Each HTTP request means a HTTP header response for each file requested, and that takes bandwidth.
I serve my CSS as a PHP file with the "text/css" mime type in the HTTP header. This way I can have multiple CSS files on the server side and use PHP includes to push them into a single file when requested by the user. Every modern browser receives the .php file with the CSS code and processes it as a .css file.
You can just use one css file for performance and then comment out sections like this:
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
etc
I'm using Jammit to deal with my css files and use many different files for readability.
Jammit doest all the dirty work of combining and compressing the files before deployment in production.
This way, I've got many files in development but only one file in production.
A bundled stylesheet may save page load performance but the more styles there are the slower the browser renders animations on the page you are on. This is caused by the huge amount of unused styles that may not be on the page you are on but the browser still has to calculate.
See: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Bundled stylesheets advantages:
- page load performance
Bundled stylesheets disadvantages:
- slower behaviour, which can cause choppyness during scrolling, interactivity, animation,
Conclusion:
To solve both problems, for production the ideal solution is to bundle all the css into one file to save on http requests, but use javascript to extract from that file, the css for the page you are on and update the head with it.
To know which shared components are needed per page, and to reduce complexity, it would be nice to have declared all the components this particular page uses - for example:
<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">
I've created a systematic approach to CSS development. This way I can utilize a standard that never changes. First I started with the 960 grid system. Then I created single lines of css for basic layouts, margins, padding, fonts and sizes. I then string them together as needed. This allows me to keep a consistent layout across all of my projects and utilize the same css files over and over. Because they are not specific. Here's an example: ----div class="c12 bg0 m10 p5 white fl"/div--- This means that the container is 12 columns across, utilizes bg0 has margins of 10px padding of 5 the text is white and it floats left. I could easily change this by removing or adding a new - What I call a "light" style- Instead of creating a single class with all these attributes; I simply combine the single styles as I code the page. This allows me to create any combination of styles and does not limit my creativity or cause me to create a massive number of styles that are similar. Your style sheets become a lot more manageable, minimized and allow you to re-use it over and over. This method I have found to be fantastic for rapid design. I also no longer design first in PSD but in the browser which also saves time. In addition because I have also created a naming system for my backgrounds and page design attributes I simply change out my image file when creating a new project.(bg0 = body background according to my naming system) That means that if I previously had a white background with one project simply changing it to black simply means that on the next project bg0 will be a black background or another image..... I have not found anything wrong with this method yet and it seems to work very well.
Related
I'm thinking about changing the processCSS gulp task that Aurelia CLI creates to create physical css files, instead of including it directly in the app-bundle.
Are there any major drawbacks within the Aurelia framework to doing this?
I'm more comfortable with separate css files after preprocessing, but I don't want to do it if I'd be missing out on some performance benefits, or create other troubles down the road.
I don't think there's any major drawback that can't be reasonably overcome. However, I would try to evaluate the benefit of doing it your way, instead of bundling it together.
I'll list a couple of points I can think of, in no particular order.
It can be challenging to get the modules and paths set up correctly if you are requiring CSS from standalone CSS modules. If you are using plain CSS files, then you will need to included and maintain the Link tags in your host HTML page. All this is easier if the CSS is bundled directly into the app bundle. Especially when adding more CSS due to 3rd party libraries etc.
if you are using the organizational pattern where you create css-per-component instead of having one monolithic CSS file, then there are potential performance impacts to making http requests for each individual css file, although the impact is probably more thoeretical than practical.
when deploying, it is really nice to just deploy a minimum number of files.
when all css is bundled, you can add comments at top of each CSS source file to help identify the source file when looking at the CSS in the browser inspector.
One last thing, it may be worth your time to experiment loading the CSS in different ways, including as individual files and see which way works best for your environment.
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 !
I recently stumbled across a project that has 27 different CSS files used by the same theme, and they are for specific sections in the application, rules split like this: there's a CSS file for the menubar, there's two more files for contact forms, another one does the footer, specific-page formatting, two more for galleries, so on.
So I asked lead what's the reasoning for so many CSS files and if it's safe to concatenate.
His reply was that all files sum 126KB, bandwidth matters and there's 500+ CSS rules, so best not concatenate to prevent selector collisions.
I know that 126KB of uncompressed CSS files is an awful lot, but I also know (from the best practices guide) that all these files should be downloaded single shot, so browsers will cache one biggie instead of downloading them one by one across the browsing session.
Why should I not keep myself from gluing all these files together? Is it a big deal?
Due to how cascading works, there is no possible way to cause harm just by concatenating the files together, provided you keep them in the order they appeared in the source. This will ensure that later files overriding earlier ones will still do so.
Then, you can consider minifying the CSS. This won't change the function of the selectors, but will compress them to reduce bandwidth.
All in all, having 27 CSS files is just stupid. The user would have to wait for 27 connections to be established, requests to be made, and downloads to be completed, just to see the page. Now, this does improve somewhat with proper cacheing, but even so...
Why should I not keep myself from gluing all these files together? Is it a big deal?
If you know that the CSS files do not have any conflicting directives and that they should be loaded in the same order for each page in the application, then you should, in fact, bundle them into one minified CSS file.
But that's just it. Typically when you find yourself in this situation, it's extremely difficult to discern which CSS directives are applied to which screen(s).
Emphasis: The situation that you are facing indicates technical debt.
While I agree that 27 CSS files is utterly nuts, and that ideally it should be merged and minified, there are some use cases where dividing stylesheets make sense.
Consider this:
You are working on a subsite, which requires a large number of CSS rules, that are not otherwise used on the site. If there is no guarantee that the user will visit both the sub site and the main site (and therefore take advantage of caching), it makes sense to keep two stylesheets, so the browser doesn't have to read through a huge stylesheet to see if anything matches the HTML document.
Now, this is no common case, but it does happen. An example would be a large corporation, with a lot of subdivisions with their own sites. They might include one stylesheet for all their shared styles (corporate specific UI and so on) and separate stylesheets for layouts and overrides.
That said, I very much doubt that 27 stylesheets would ever make sense. The original author probably didn't have a clue, and thought it was more structured that way. Modularized CSS is actually pretty neat, but it should always be merged and minified before it reaches the client. This is the common work method in SASS. You will have a lot of partial stylesheets for specific parts or functions of the site, but as soon as you hit Ctrl+S, it's automagically merged into one neat little package.
Now, you could probably figure out in what order the CSS files on your site is loaded, simply by visiting each page and noting the order. It would be tedious work, and there's no guarantee it will ever really pay off, but it can be done.
What are the best ways to use LESS for CSS.
Basically should the Devs write a Less File and then have it compile for production
Should I link the LESS code and the javascript file.
Or should I skip the LESS rout altogether and just remake the classes
I am trying to wrangle together some rather sloppy css and want to get control of it before making major improvements. I think it would be very good to have site wide variable so Less seems like a good thing with the variables and nesting.
I am replacing a lot of the background images with css gradients and box shadows so I am also trying to get rid of the vendor prefixes.
Sometimes I see what kindof looks like class overload but is it bad to append a lot of classes to an element such as
<div class="comment dark-shadow round-corners"></div>
Less is a great styling language. I use it extensively, and it really helps with code maintainability, as well as with speed of writing the styles.
I personally feel that your styles should not be dependent on javascript to render, so I use the less.app to compile all my LESS into CSS. I rest more peacefully knowing that all my CSS is there and that it works correctly before I put anything "live".
If you are interested I have also been compiling a LESS mixin library that can be very useful: https://github.com/jdmiller82/-lessins-
I agree with Jonathan, I don't think you should depend on the users browser to render the styles.
I came up with a solution that uses node.js on the server to intercept requests like styles.css and try to find the equivalent .less file (in this case styles.less) and parse it and return it as CSS.
So on your server you would just have styles.less but you could request the URL example.com/styles.css and get the parsed LESS file. That way the integration is seamless for the rest of your application and it doesn't require the user has JavaScript enabled either.
You don't have to be using node.js for the rest of your app either. I did this in a PHP application.
You can read my tutorial here: http://programming-perils.com/155/parse-less-files-on-the-fly-and-serve-them-as-css/
I realize this answer is about two years later than the above ones but I think the question is still relevant.
I think there are use cases where compiling some LESS client side is a good idea (provided you aren't supporting IE 8 or below) and you have a use case that validates it. For example, an application I've worked on recently has a customizable, theme-able interface where text colors, etc need to be modified based on whether the background color they're on is light or dark and may eventually need to support the ability for the user to change them and see those changes reflected on the site in realtime. This is a great use case for client side LESS I think. Note that only a small LESS stylesheet is compiled and the rest of the application LESS that's not related to theming is precompiled. I haven't seen much of a perceived difference in performance.
So when you see comments like "you don't seriously think any decent developer uses less clientside do you?", I'd take them with a grain of salt.
The way to use LESS for a production website is to compile LESS files into CSS files.
For local development you can have a file-watcher that rebuilds the CSS files for LESS files that were changed.
If you have multiple CSS files to produce from LESS, you should separate them out.
For example, if you have 30 less files and they produce two CSS files a.css and b.css, you will want to separate those two jobs so that you can compile faster. It's faster for developing because you will only compile a.css if you change any LESS files that affect it.
Many people say to keep the number of external CSS and JavaScript files to minimum to reduce round trip time. For example, Google recommends maximum two CSS and JavaScript files per web site, respectively.
The problem is, I've broken up CSS code into several files depending on its nature as part of "modularization". For example, I've put CSS code that is only used in a certain part of the application in a separate file. As a result, some files have less than a hundred lines of code.
I'm a Java develper, and this is actually a recommended practice in Java, but CSS is a totally different creature and I don't know much about CSS. Here are my questions.
Does it make sense to keep as many CSS files as you see fit for readability and maintainability?
How many CSS files are manageable in a web project?
What's the average number of CSS files in web applications that you've worked on in the past?
The best solution is to write a script that combines (and minifies) multiple CSS or JS files.
You might benefit from a solution like Bundler, or Chirpy
http://www.codethinked.com/bundler-now-supports-css-and-less
http://chirpy.codeplex.com/
We use chirpy because we found a bug in Bundler that can inject query string params into you css files.
As a bonus to file consolidation, you also get .less syntax handling.
I agree with what other have said here, yes when you develop you have muliple CSS files, but for production you should merge an minify them.
However I do not agree you should merge them all into 1 single file. As the will mean people who just want to visit your home page must wait for CSS on pages x,y,z also to download.
What I usually do is have 2 or 3 CSS files.
1 small CSS file just for the home page only so it load super quick so casual visitors do not have to wait to see what my site is about
Another CSS file for every other page availble to guest users
Another CSS file for a members only sectons of the website that require a login.
You can also use scripts like HEAD.JS which will manage your CSS and javascript asynchronously
From there site http://headjs.com/
There is a common misbelief that a single combined script performs best. Wrong:
latest browsers and Head JS can load scripts in parallel. loading 3 parts in parallel instead of as a single chunk is usually faster.
if an individual file is changed the whole combination changes and you loose the benefits of caching. it's better to combine only the stable files that doesn't change often.
many popular libraries are hosted on CDN. you should take the advantage of it instead of hosting yourself
iPhone 3.x cannot cache files larger than 15kb and in iPhone 4 the limit is 25kb. And this is the size before gzipping. if you care about iPhones you should respect these limits.
As you point out, having multiple CSS files often leads to better maintainability and modularity.
The number of CSS files needed depends on the size of your project and the level of modularity in the project.
Serving up on CSS file instead of many often makes a noticeable difference in the page loading time, so the ideal solution is to have some kind of tool that combines, and maybe even compresses, the CSS files. This can easily be done in runtime by a tool such as Minify.
Combining resources can be beneficial in that it can reduce the number of HTTP requests; Reducing the number of HTTP requests certainly lowers overhead and can improve performance. It can also have benefits for caching, in that there can be fewer objects in the cache.
That said, this kind of optimization is only useful with metrics. There are profilers out there (Firebug has one) that can show you how many requests you're making and how long they take. You may (or may not) find there are more time-effective ways to increase performance and reduce load on your server.