From f131762db9ab6379cab705ecf0bedfa2ad0d52be Mon Sep 17 00:00:00 2001
From: Felipe Fialho <hi@felipefialho.com>
Date: Wed, 29 May 2024 10:03:43 -0300
Subject: [PATCH] docs(css): add avoid shorthand properties (#51)

---
 README.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/README.md b/README.md
index 30518fa..43ce76f 100644
--- a/README.md
+++ b/README.md
@@ -362,6 +362,11 @@ The tips above could be used in any CSS framework or preprocessor, like SCSS, St
 - 5.3 [CSS Class Names](#53-css-class-names)
 - 5.4 [CSS Good Practices](#54-css-good-practices)
 - 5.5 [CSS Media Queries](#55-css-media-queries)
+- 5.6 [Spacing and size of image and components](#56-spacing-and-size-of-image-and-components)
+  - 5.6.1 [Dynamic values](#561-dynamic-values)
+  - 5.6.2 [Images and well defined components](#562-images-and-well-defined-components)
+- 5.7 [Avoid using shorthand properties](#57-avoid-using-shorthand-properties)
+
 
 ### 5.0 CSS Stylelint
 
@@ -746,6 +751,30 @@ If you are using a image, or a component that has a design size and it sizes at
 }
 ```
 
+## 5.7 Avoid using shorthand properties
+
+Shorthand properties are great for reducing CSS, but they can also make the code harder to read and override. It's better to use longhand properties to make the code more readable and maintainable.
+
+**✅ Good:**
+
+```scss
+.element {
+  margin-left: auto;
+  margin-right: auto;
+}
+```
+
+**❌ Bad:**
+
+```scss
+.element {
+  margin: 0 auto;
+}
+```
+
+Shorthands can be used when you want to apply the same value to multiple properties.
+
+
 **[⬆ back to summary](#-summary)**
 
 ## 6. JavaScript