Tag Info

New answers tagged


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 { // .. ...


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; ...


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 ...


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.


I would rather look at Bootstrap. It is 1 CSS file that contains all the CSS. It works on almost 99% of browsers and is extremely responsive. Click on the live demo an zoom in (Ctrl + = zoom in, Ctrl - = zoom out, Ctrl 0 = normal) or open it on your mobile to see how it renders.


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 ...


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 ...


@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font rules or include them in styles.css. Unused font that needs to be downloaded will not be downloaded so declaring them but never using them will not hurt ...


It was not included in CSS3 for a few reasons. A little more about reasons can be found at http://stackoverflow.com/questions/4781141/why-doesnt-the-selector-h3nth-child1containsa-work/4781167#4781167 The best alternative to use is CSS3 Substring Matching Attribute Selectors which allow wild cards

Top 50 recent answers are included