CODEWITHSUNDEEP
cssmedia-queries
bbuller
bbuller

Reputation: 195

CSS Media Queries - where should they be defined?

Is there a preference to where CSS media queries are defined? I.e. should I call them from my html like this:

<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" />
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" />

Or should I maintain one CSS file and define the media queries there?

Upvotes: 1

Views: 114

Answers (2)

Pevara
Pevara

Reputation: 14310

Personally I would go for everything in a single file. You could (or should) manage the size and structure of your code by using a css preprocessor like less or sass. This way you can develop in multiple files, and combine / minimize them before you upload them to your webserver.

The main reason to use a single file is speed. Usually an extra request takes a lot longer then downloading a few extra kilobytes. It is also what is advised by the 'big ones' like Yahoo and Google...

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

Whatever works best for you, really.

Personally I prefer defining them inside my main CSS file, alongside the rules that they affect. For example:

#someElement {font-size:24pt;}
@media all and (min-width:350px) {
    #someElement {font-size:12pt}
}

This keeps them close together so I don't lose track of them. It also means fewer HTTP requests.

Upvotes: 1

Related Questions