In-Depth Guide to CSS Logical Properties

No video

In-Depth Guide to CSS Logical Properties

Рет қаралды 7,275

CSS Weekly

Күн бұрын

Пікірлер: 44

@guillermomf Жыл бұрын

Good video. These days I was learning about these concepts and how to use them and your video has helped me so much 👍🏼👍🏼

@CSSWeekly Жыл бұрын

Thank you so much, Guillermo! I'm thrilled to hear this video has helped you! 🙏🥰

@markrobbins6985 Ай бұрын

Great video. I'm going to start using logical properties in all my designs.

@CSSWeekly Ай бұрын

I’m thrilled to hear this, Mark! 🙂 It takes quite some time to get used to it, so be patient with yourself during the transition period. 🙂

@SteinGauslaaStrindhaug 2 ай бұрын

Sounded unfamiliar at first, but then I realised I'm actually very used to it already from flex layout. I now actually wish they also used "inline" and "block" for flex-direction too, because I can never remember which is which of "column" and "rows" 😅 But I do remember which way we read and I have internalised the meaning of "inline" as along the line of the text and "block" as perpendicular to that direction from using the display property for about 20 years now.

@CSSWeekly 2 ай бұрын

I'm so happy to hear this, Stein! 🙏 Both grid and flex use the logical instead of directional principles, so it should feel familiar. Although, I still find it weird to write inset-inline-start. 🙂 The problem with flex and the flexis axis (main and cross) is that they're switching. I even made a short video about to finally remember if I need justify-content or align-items. 🙂 (Here's the link if you want to check it out: kzfaq.infoo1CNbB_yGUE)

@dschony 11 ай бұрын

Thanks! This is a real update in CSS for me. I'm starting to use it immediatly.

@CSSWeekly 11 ай бұрын

Thank *you* for watching and commenting, Daniel! 🙏 I’m thrilled to hear that you learned something new! 🙂

@steventanner7395 Жыл бұрын

I believe logical properties will be simpler once I become accustomed to them. Thank you for this presentation.

@CSSWeekly Жыл бұрын

They surely will. It takes a bit of time to get used to this new model, but once it “clicks,” you won’t even think about them. 🙂 Thanks so much for this comment and your kind words, Steven! 🙏

@muscimilieng Жыл бұрын

Very interesting, didn't knew about these

@CSSWeekly Жыл бұрын

Thanks for your comment! I'm happy to hear that you've learned something new from this video. 🙂

@martunjaykumar752 10 ай бұрын

Good one, thanks for sharing.

@CSSWeekly 10 ай бұрын

Thank you so much, Martunjay! I'm thrilled to hear this! 🙂

@ajdrag Жыл бұрын

Great video. Keep them coming! Thank you.

@CSSWeekly Жыл бұрын

Thank you so much! I most certainly will! 🙂

@picturit Жыл бұрын

Have been using them for quite some time now. Good presentation! 👍

@CSSWeekly Жыл бұрын

Thank you so much, Hans! It means a lot! 🙏

@FunDumb Жыл бұрын

TRBL: Top, Right, Bottom, Left. Troublesome paddings and margins. Barney Rubble, TRBL!

@CSSWeekly Жыл бұрын

Indeed! Top, Right, Bottom, Left are trouble logically and performance-wise. 🙂

@ZiaCodes Жыл бұрын

Where can i find css logical values like vb vi you used? So much value in single video,Appreciate it!

@CSSWeekly Жыл бұрын

Thank you so much for your kind words, I'm thrilled to hear you found it valuable! 🙏 For some reason, they're not mentioned on MDN's Logical Properties & Values page, but they are here, in the table under "Relative length units": developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units

@saifashraf2135 Жыл бұрын

This is super cool, thank you for sharing!

@CSSWeekly Жыл бұрын

Thank you so much, Saif! I'm thrilled to hear that you found it super cool! 🙂

@JeffKlunder Жыл бұрын

Haven't heard of this logical properties thing; looks interesting. Thing that comes to mind: if you're 100% sure you only will have left to right writing, is it still best practice to replace the margin-right/left stuff?

@CSSWeekly Жыл бұрын

That's an interesting question, Jeff. 🙏 I wouldn't immediately replace all my code with logical properties in that case, but for new code, or a new project, it is probably a good idea to start thinking in terms of logical properties. All new properties that will come to CSS will be logical, like with CSS Grid, for example, so in the long run, you'll certainly benefit from adopting the logical mindset. 🙂

@JeffKlunder Жыл бұрын

@@CSSWeekly Ah, sounds reasonable. Thanks for the reply and keep these awesome videos coming 👍

@CSSWeekly Жыл бұрын

Thanks you so much for commenting and watching, Jeff! 🙂

@D7460N Жыл бұрын

This is so good. Thank you.

@CSSWeekly Жыл бұрын

Thanks so much! It means a lot! 🙏

@badcatdesign Жыл бұрын

Noooooo..... still feels "illogical" 🖖 I always identified with the "TRouBLe" TRBL of CSS.

@CSSWeekly Жыл бұрын

It certainly takes a bit of time to get used to it. But it's surely worth it. 🙂

@badcatdesign Жыл бұрын

@@CSSWeekly The hardest part for me is losing shorthands for margin and padding.

@CSSWeekly Жыл бұрын

Yes, I agree with that. 😕 There is an open issue for shorthands: github.com/w3c/csswg-drafts/issues/1282 So hopefully this will be added to browsers sometime soon. 🙂

@neekfenwick Жыл бұрын

I agree, however if you've used flex layout much you'll be used to thinking about the 'start' and 'end' of a layout, and if direction is row or column they adjust logically in a similar way to these logical properties. This is the first I've seen of these logical properties, and to be honest I only develop for ltr Western layouts, but it would be good to practise them if they are well supported in browsers :)

@CSSWeekly Жыл бұрын

Sorry Nick, I'm only now seeing this. 😔 Great points about flex. And if we get more new properties that work logically, it's proabaly worth getting used to the this paradigm. 🙂 And browser support is pretty good: caniuse.com/?search=logical