The 3 Short CSS tricks

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;}

you can use this instead

.example {  padding-block: 1rem;}/* or */.example {  padding-inline: 1rem;}

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;}

you can use this instead

textarea {  min-height: 10rem;  max-height: 15rem;  resize: vertical;}

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;}

you can use this instead

.example {  text-align: start;}/* or */.example {  text-align: end;}

My others articles

• My 3 tips about Flexbox that will make your CSS better
• CSS isn't magic. All nuances about the display property

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 [email protected]

Discover more free things from me