DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

CSS isn't magic. My 3 favorite CSS tricks

Hey folks!

I'd like to talk about how to stop use 0 for margins and paddings, why resize: none is bad, why you should use start and end values!

But before embarking on reading I leave the link on my Substack newsletter about CSS. You know what to make 😎

Let's go!

margins and paddings without 0 values

A lot of time there is the practice of using the margin and padding shorthand that leads to complication of code maintaining in the future. The problem is people set 0 value when it doesn't need. For example, if they have to set top and bottom paddings to 1rem they'll write padding: 1rem 0;

In this case, the 0 value will lead to you have to override it in the future. And do that every time. So you will go to overrides hell.

As a solution, I recommend using new logical margin-block, margin-inline, padding-block and padding-inline properties.

don't do this

.example {
  padding: 1rem 0;
}

/* or */

.example {
  padding: 0 1rem;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

.example {
  padding-block: 1rem;
}

/* or */

.example {
  padding-inline: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

resize: none vs resize: vertical

Whenever I see textarea with a fixed height I want to scream: "Give me userfriendly textarea". I want to enter data comfortably. Give me this.

I understand developers do that because textarea changing breaks the layout. But we can find a more elegant solution.

Set a minimal comfortable height and save resizing of it but disable width changes using resize: vertical. And your users will not break the layout by chance.

don't do this

textarea {
  height: 10rem;
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

textarea {
  min-height: 10rem;
  max-height: 15rem;
  resize: vertical;
}
Enter fullscreen mode Exit fullscreen mode

The start and end keywords

When our website becomes popular there is the important issue of translating on different languages. For example, I often wanted to translate the website from English to Arabic.

The problem is following, English is a matter of languages where the beginning of the line is on the left (LTR) and in Arabic the beginning of the line is on the right (RTL).

So if I use the text-align: left for Arabic users they will be confused because the beginning of the line will be by the left and no right like he thought.

It happens because the left and right values don't consider text direction, i.e when we use the left or right value a text is aligned to the left or right edge always.

But we can fix it using the start and end values that consider the text direction. If a browser of our user is setting in LTR language the beginning of the line will be by left. And if it's setting in RTL language then by right.

don't do this

.example {
  text-align: left;
}

/* or */

.example {
  text-align: right;
}
Enter fullscreen mode Exit fullscreen mode

you can use this instead

.example {
  text-align: start;
}

/* or */

.example {
  text-align: end;
}
Enter fullscreen mode Exit fullscreen mode

P.S.
✉️ I make unlimited Q&A sessions about HTML/CSS via email with expect responses in 2 days.

😎 I make HTML/CSS reviews of your non-commercial projects and recommendations for improvement.

🧑‍🏫I help in searching high-quality content about HTML/CSS

Please, use my email for communication 👉 melnik909@ya.ru

💪 Discover more free things from me

Discussion (3)

Collapse
andrewbaisden profile image
Andrew Baisden

Some good tips thanks.

Collapse
clementgaudiniere profile image
Clément Gaudinière

I like the tip for text-align: start; instead of text-align: left; to make translations easier, it's something you don't necessarily think about.

Collapse
amiamigo profile image
Ami Amigo

This is pretty cool. Are all those properties supported by browsers especially the padding ones?