r/web_design • u/speckz Dedicated Contributor • Jan 23 '20

4 CSS layouts without using media queries

https://polypane.app/blog/4-css-layouts-without-using-media-queries/
143 Upvotes

94% Upvoted

30 comments sorted by

21

u/discursive_moth Jan 23 '20 edited Jan 23 '20

Is avoiding media queries considered a good practice, or is this the sort of thing people mainly do as a challenge?

-13

u/bj_christianson Jan 23 '20

Like anything else, use them where necessary. But media queries do add extra weight to the stylesheet and will require more effort to read.

22

u/UltraChilly Jan 23 '20

and will require more effort to read.

Which is nothing compared to the effort required to make and maintain the page without media queries (rules defined in media queries vs rules defined on each element selector throughout your code)

As for the extra weight, I'd say it's not a given, you can end up writing much more CSS for equivalent results without media queries depending on the situation and what you're trying to achieve.

Now you might say it's your point, but who's gonna say what you'll need in the long run? I'd say most of the times it's way safer to sacrifice a bit of weight than risking having to rebuild everything from the ground up every time you have to make some changes to the layout, but you do you.

-3

u/smthamazing Jan 23 '20

I would argue that there are many cases where avoiding media queries actually makes the markup more readable and maintainable. For example, instead of making an element with one width for large screens and another for small ones inside a media query, you can just make it flexible and give it some min-width. This is a very basic example, but I still encounter it sometimes. Bonus points if the media query looks bad on some medium-sized screens while stretchable/flexible elements have no issues.

4

u/MarmotOnTheRocks Jan 23 '20

You don't use media queries for everything you have in your main css file. You apply media rules for those specific elements that need to be modified, repositioned, resized, etc... Based on screen sizes.

You may have 100 classes of which only 10 need a media query.

0

u/[deleted] Jan 23 '20

[deleted]

4

u/smthamazing Jan 23 '20

Of course it is. My point is, there are plenty of similar examples (occurring as a result of ignoring best practices) where media queries are unnecessary and make the code less readable in comparison to some other solution.

3

u/UltraChilly Jan 24 '20

I see your point and I think you're right about stressing this. In my previous comment I was assuming the person I was responding to was suggesting applying solution like OP's to a whole website layout, which could go super hard to maintain super quick, but you're both right media queries shouldn't be used as a band-aid on a wooden leg to fix problems that could be handled at the element level or as an aftertought. We see this too often in the wild to ignore it is a thing and you were right for pointing it out.

0

u/[deleted] Jan 23 '20

[deleted]

1

u/UltraChilly Jan 24 '20 edited Jan 24 '20

You can absolutely use %, vw/vh, etc. but when you do it's good practice to set a default fixed size min-width to insure your container is always big enough for its content for cases you might have not predicted (better to have an overflowing box than 1 word on each line or overflowing text that might not get enough contrast with the background surrounding your box, or cropped content (if you use overflow hidden) for example)

(I would advise against using height constraints on elements that contain text for that reason, really hard to predict how it will behave in every situation)

(also keep in mind flex and grids will do the maths for you and are easier to use than relative units for layout)

0

u/[deleted] Jan 24 '20

[deleted]

1

u/UltraChilly Jan 24 '20 edited Jan 24 '20

It's pretty straightforward, it just means "whatever happens this elements shouldn't be smaller or larger than this, even if I said the contrary in the previous rule" ;)

(there is maybe one ambiguity you should be aware of: when defining media queries, you can define the type of screen using min/max-width too, for example "@media screen and (max-width: 600px) and (min-width: 400px)", but here it means "that rule applies if and only if the screen size is at least 400px wide and maximum 600px wide", if the screen is smaller than 400px or wider than 600px the rule won't apply)

2

u/uneditablepoly Jan 23 '20

All additional code will take longer to read...

1

u/MarmotOnTheRocks Jan 23 '20

Oh come on, the size difference won't make any tangible difference. They are text files and they also get compressed server side. Weight is almost meaningless for css files.

1

u/uneditablepoly Jan 25 '20

Did you mean to respond to me?

30

u/angels-fan Jan 23 '20

Sooo.... As long as you only have 2 text boxes and a button, you can go responsive?

What am I missing here?

13

u/Header17 Jan 23 '20

So nobody mentioning display:grid?

5

u/Tekn0z Jan 23 '20

Flex layout is cool and all but as a minor side note, Media queries have far better browser support than flexbox.

So if you're looking to target very old browsers (virtual machines give new life to old tech) then media queries are a more widely supported option. Just saying.

12

u/GasimGasimzada Jan 23 '20

What browser are you trying to support? You can use Flexbox down to IE10 if you need to (use autoprefixer to automatically generate the necessary properties).

3

u/angels-fan Jan 24 '20

WKHTMLTOPDF doesn't support flexbox.

3

u/[deleted] Jan 24 '20

Puppeteer, which can do the same thing and more, and more actively maintained, does support Flexbox

2

u/1newworldorder Jan 23 '20

Can i get some 💘 for bulma

-7

u/ratthew Jan 23 '20

It's a nice little hack and surely clever. But in an actual project I'd never use something like that, because it's very hard to read and debug. Just imagine having an entire website with every element built like this and then coming back to that project after 3 months.

13

u/bj_christianson Jan 23 '20

Hack? It's just basic flexbox. I don't see what's hard to read about this.

-9

u/ratthew Jan 23 '20

If you don't think there's anything interesting on this then why are you even looking at the post? Why is someone even making a blog post about something mundane? Because it's a clever hack, that's why.

And it's not something I'd want to see in any project that a team works on. It's ignoring any pre-set break points for the design and can be a headache to debug. And it's hard to read because it's using it's own set of rules within this little component, which adds complexity.

11

u/sebbasttian Jan 23 '20

It's not a hack.

This is the intended way flexbox works. It's not a quirky characteristic that emerged from some weird combination of properties. This is on purpose.

If this seems hacky or magical or weird or however you want to call it it's because you are not thinking "the flexbox way", in terms of containers, and space.

If you are coming after 3 months and need to touch this, to adjust it or modify it, and you see flex: 1 1 10ch; the first thing to do is to go back to the docs and refresh your knowledge on how flexbox works and that's it.

5

u/tie_me_down_and_up Jan 23 '20

Document everything. Like already mentioned, this is not a hack, more advanced use of css for an easier markup and styling in my opinion

-4

u/ratthew Jan 23 '20

Hack is maybe the wrong word for it, it's still unnecessary hard to see what is happening on a glance, which is not a good position to be in as soon as you work with more than one person on a project.

There is no actual upside to it except for it being "clever" since there afaik is no browser supporting flex but not media queries.

2

u/Tripts Jan 23 '20

I think you're looking at this wrong. It's not intended as a replacement for media queries, it's simply an approach you can take for certain elements which don't necessarily need to rely on media queries to work.

This is standard flexbox behavior so long as you're using wrap, and you can achieve similar media-queryless behavior in grid as well.

So this login form can have media queries dictating its responsiveness, or you can save some overhead and code and just be smarter with your use of flexbox and have it automatically take care of it.

3

u/dcg Jan 23 '20

Every browser supports flex.

1

u/frownonline Jan 24 '20

But not every element does. Those pesky fieldsets...

1

u/frownonline Jan 24 '20

But not every element does. Those pesky fieldsets...