CSS More Short Query

Can 2 CSS Media Query definition overlap

you can combine multiple media queries in a comma-separated list; if
any of the media queries in the list is true, the associated style
sheet is applied. This is the equivalent of a logical "or" operation.

https://developer.mozilla.org/en/CSS/Media_queries

This is the equivalent of a logical "or" operation

makes it look like only one match is applied.

http://reference.sitepoint.com/css/mediaqueries seems to confirm this as well.

If this is true (and it is untested by me), then I would create a common stylesheet to deliver all the common styles no matter what media query is matched and then have device independent stylesheets with additional styles for each targeted device.

How to change text (not font size) according to screen size in CSS?

Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query:

HTML

<span class="full-text">Saturday</span>
<span class="short-text">Sat</span>

CSS

// Hide short text by default (resolution > 1200px)
.short-text { display: none; }

// When resolution <= 1200px, hide full text and show short text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

Replace 1200px with your target resolution breakpoint.

How to change width of an element without using media queries?

You can usemax-width like snippet below:

div {    width:100%;    max-width:400px;  }

<div>I have a page with a bunch of paragraphs, which look too stretched out on large screens. So I set width: 600px to p. Which made it look nice.</div>

Issue with media queries - Prevent override of CSS rules

In order to prevent the override of CSS, use the below code to specify rules only for width between 640px and 840px:

@media screen and (min-width: 640px) and (max-width:840px) { 
  /* CSS rules for width between 640px and 840px */
}

Alternatively you can reorder the code:

@media screen and (max-width:840px) {} 

@media screen and (max-width:640px) {} /* This will override the above CSS rules */

Check out this page: MDN Media Queries to learn some good practices.

Defining CSS media queries within selectors

Short answer, no. There are no performance issues in defining media queries within CSS selectors.

But let's dive in...

As described in Anselm Hannemann great article Web Performance: One or Thousands of Media Queries there is no performance loss from adding the media queries in the manner you are.

As long as the same set of media queries are being used in each selector there is no major performance hit other than your CSS file might be a bit larger.

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

However, it does matter how many different media queries you use. Different being different min-widths, max-widths and so on.

Should the order of CSS files in a HTML page matter?

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

Bootstrap first to establish the framework
Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
Next is your custom stylesheet. This is to override all of the above.
Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.

Is it best to group similar media queries at the end of the CSS or to just keep them separated within the CSS?

Media queries were introduced in CSS3 are used for responsive CSS over different media types. Since usually the CSS code itself is applied for describing the presentation of the document or page, responsiveness is a separate feature altogether, so usually they are kept separate at the end of the CSS formatting codes. However, let me answer this question by stating the usage of both of the formats mentioned in the question.

At the end of code

Most templates of CSS available online usually keep their media queries at the bottom of the entire code making it easier to access and work with the responsiveness feature. Whenever the focus is more on "chasing device-widths" then this type of coding practice helps.

As observed, this allows to group together many basic CSS attributes that are applied over many elements.

Also, considering the cascading nature of CSS, the styling below usually (not always, refer this to know more) overwrites the styling present above. With @media queries present at the bottom of the stylesheet, it allows easy overwriting of relevant styles present above.

Finally ,as mentioned by @rguttersohn, media queries along with @keyframes are kept at the end with @keyframes usually above @media. This makes coding cleaner and easier to comprehend by others as well.

Below relevant styling counterparts

If styling is more layout-centric, it's highly useful to place @media queries next to their styling counterparts. This allows ease in editing the style and its corresponding @media query both in a single go.

This does mean that there is slightly more code, but these too can be cut down by grouping at breakpoints and section ends.

This type of styling is rarely seen in templates available online, however it's an ongoing trend.

To Summarize: I personally am of the opinion to keep all of the @media queries together at the bottom, but if I had to divide the labor of styling, I would opt for keeping the styles and @media queries together.

Also, given the broad and opinionated scope of this question, I think no answer can determined as right or wrong. I hope this answer brings enough light and information to the question.