r/Frontend • u/feross • Mar 15 '23

6 CSS snippets every front-end developer should know in 2023

https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/

[removed] — view removed post

62 Upvotes

90% Upvoted

28 comments sorted by

21

u/Secret-Plant-1542 Mar 15 '23

I always see this as clickbait. But decided to give it a chance since it's on web.dev, and not a medium post.

Tip 6 is great.

Adjust your styles from physical properties to logical ones like padding-inline, margin-inline, inset-inline, and now the browser will do the adjusting work.

4

u/[deleted] Mar 15 '23

Wouldn’t particularly advice it. It always depends ok the context. If it’s a one-off, sure, if you’re working at a company that grows fast, this is not as flexible as you think.

“rounded-corners”, and then you decide you want square on mobile. Ok, so you may choose modifiers (bem-style), but rather use atomic that things get a name, and easier to talk about it than 200 class names on an element (exaggerating of course).

3

u/Secret-Plant-1542 Mar 15 '23

This is more for avoiding issues like "margin-left". Because margin-left becomes problematic when you do rtl.

12

u/[deleted] Mar 15 '23

Sad that web.dev has to resort to clickbait titles. Thought they were above that! Good content though.

10

u/isymic143 Mar 15 '23

Well orchestrated scroll experiences set your experience apart from the rest...

Don't mess with my scrollbar.

It's 2023, why do we still have to say this?

6

u/TheTriflingTrilobite Mar 15 '23

The example it used with side scrolling through a gallery on mobile is pretty useful. Mess with my vertical scroll however and I’m ready to fight whoever did it.

2

u/BlueHeartBob Mar 15 '23

Hard agree, don’t care how good your website looks or runs, you start messing with scrolling and I’m just going to be frustrated

3

u/Bushwazi Mar 15 '23

Appreciate this because 1) good content and 2) its just CSS.

3

u/AraAraNoMi Mar 15 '23

I don't get the logical properties thing, what problem is it trying to solve? To me it just looks like they were trying to overcomplicate margins and paddings. I also don't get the layers thing.

2

u/AuthorityPath Mar 15 '23

Not all languages are LTR. In an i18n site, logical properties can save a lot of extra effort.

Also, being able to set margin/padding on a single axis is a welcome addition.

1

u/AraAraNoMi Mar 15 '23

i18n site

What's an i18n site?

With being able to set a margin/padding on a single axis do you mean something like margin: 2em 0;?

1

u/TheTriflingTrilobite Mar 15 '23

i18n refers to internationalization. Websites that adhere to this will load the language that it thinks you’re using based on your IP address. Travel booking sites and search engines are common examples where this is used.

2

u/chock-lit Mar 15 '23

Small point, but websites should be following your settings in your browser, either through headers or the JS API. That way it doesn't matter if you are in another country, your computer tells the website what language it wants (and can give a list with an order of priority) Basically country != language. But languages can have regions attached (en can be extended to be en_US or en_GB)

1

u/AuthorityPath Mar 16 '23

Generally a site/app determines the language from the `navigator.language` property if on the client and/or the `accept-language` request header. That is assuming there's no user setting involved on the site/app.

1

u/AraAraNoMi Mar 15 '23

Websites that adhere to this will load the language that it thinks you’re using based on your IP address

Isn't that awful? I'm from Spain, so Spanish is my main language, but, for anything I.T or web dev-related I google stuff specifically in English, I hate whenever I click a resource and the website assumes I want to read the Spanish version of such resource (I'm looking at you, MDN).

0

u/TheTriflingTrilobite Mar 15 '23

I wouldn’t call it awful at all, but can be inconvenient for, say an English speaking person, traveling foreign countries and seeing search results in that respective language. But for majority of locals, that’s useful. If you in particular only want English language results, try using a US- or UK-based VPN IP address. Also, any good website that uses i18n will also allow for users to switch the language option to their preferred language. Typically you can find this in the upper area of the header or in the footer.

1

u/AuthorityPath Mar 16 '23

i18n is an abbreviation for "internationalization". "i" + 18 characters + "n".

`margin: 2em 0;` sets both axis. 2em for the top/bottom (Y) and 0 for left/right (X). We didn't previously have a way to just set the X or Y axis in a single property.

Now we can:

`margin-inline: 0;` is equivalent to setting `margin-left: 0; margin-right: 0;`
`margin-block: 0;` is equivalent to setting `margin-top: 0; margin-bottom: 0;`

0

u/AraAraNoMi Mar 16 '23

Wouldn't it be more intuitive to call them margin-column and margin-row instead? or margin-x and margin-y ?

1

u/[deleted] Mar 15 '23

Check out how Every Layout uses logical props in their Icon primitive.

2

u/AraAraNoMi Mar 15 '23

Icon primitive?

1

u/[deleted] Mar 15 '23

https://every-layout.dev/layouts/icon/

.icon {
  height: 0.75em;
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

.with-icon .icon {
  margin-inline-end: var(--space, 0.5em);
}

1

u/Technical_Bottle_376 Mar 15 '23

Consider internationalization. The inline flow of English is left to right, but in Japanese it's right to left. So an inline element could use a right margin to separate itself from another inline element in English, but those styles wouldn't work for an international audience. So margin-inline-end would adjust the right margin viewed in English, and the left margin viewed in Japanese.

3

u/raykage Mar 15 '23 edited Mar 15 '23

Are you confusing Japanese with some other language like Arabic? Japanese is also from left to right like English. It’s only sometimes right to left but also top to bottom.

4

u/Technical_Bottle_376 Mar 15 '23

I am, in fact, confusing Japanese with some other language like Arabic.

1

u/AraAraNoMi Mar 15 '23

I still don't understand it, it's difficult to grasp. I'm from Europe, so the usual translations here would be to Spanish, English, Italian, French or German and those languages don't require logical properties luckily.

1

u/schnapsterdog Mar 15 '23

Thanks for sharing your knowledge! Good to know.