Tag Info

Hot answers tagged

8

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet. The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place). According ...


3

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier? If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared. If you ...


3

If a block of content is hidden with CSS, the browser still needs to download the HTML inside that element. All browsers except Opera download the images, too. (In fact, since Opera has switched to Webkit it likely downloads hidden images now.) One of the best ways to reduce load in mobile browsers is to use background images in CSS (e.g. sprites) where ...


2

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping. Splitting up will probably get you some more speedup, but only under some conditions. You'd have to make sure that only one stylesheet ...


1

I'd be inclined to say this. For production, always keep them in one file; the reason being that it's more efficient for the browser, and that should be your primary interest (IMO) when moving from development to production. Development's a different kettle of fish. I tend to split Media queries up so that they're by whatever element, eg: .foo { // .. ...


1

You should split your CSS files based on media queries because CSS files are render blocking. When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries. This also goes for adding async to a JavaScript script tag; ...


1

Simple: use 1 stylesheet and just add comments to them to make it easier to find and change the CSS styles e.g.: //sheet 1 (mobile device 800 px) code //sheet 2 (mobile device 768 px) code //sheet 3 (mobile device 480 px) code //sheet 4 (desktop size 1024 px) code If you want you could use multiple stylesheets and call them for each specific size.


1

design and develop with web standards validate your documents, and style sheets constantly! cross-browser/cross-platform test daily! at the very least before you submit a pull request or make a commit to a repository. you should be writing conforming documents anyways, but this is crucial for writing cross-browser/cross-platform css. note: the true ...



Only top voted, non community-wiki answers of a minimum length are eligible