From 974afe0c3e366f10c7bfd611079fadf46b9c28c6 Mon Sep 17 00:00:00 2001 From: James Alhassan Date: Sun, 29 Jan 2023 19:32:52 +0000 Subject: [PATCH] Update README.md Protips arranged alphabetically for easy navigation and search of topics --- README.md | 51 +++++++++++++++++++++++++-------------------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 2fc40830..6cbe15e5 100644 --- a/README.md +++ b/README.md @@ -18,33 +18,32 @@ A collection of tips to help take your CSS skills pro. ## Protips - -1. [Use a CSS Reset](#use-a-css-reset) -1. [Inherit `box-sizing`](#inherit-box-sizing) -1. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties) -1. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation) -1. [Check If Font Is Installed Locally](#check-if-font-is-installed-locally) 1. [Add `line-height` to `body`](#add-line-height-to-body) -1. [Set `:focus` for Form Elements](#set-focus-for-form-elements) -1. [Vertically-Center Anything](#vertically-center-anything) -1. [Comma-Separated Lists](#comma-separated-lists) -1. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child) -1. [Use SVG for Icons](#use-svg-for-icons) -1. [Use the "Lobotomized Owl" Selector](#use-the-lobotomized-owl-selector) -1. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders) -1. [Equal-Width Table Cells](#equal-width-table-cells) -1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox) -1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links) -1. [Style "Default" Links](#style-default-links) -1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes) -1. [Style Broken Images](#style-broken-images) -1. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing) -1. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted) -1. [Use `:root` for Flexible Type](#use-root-for-flexible-type) -1. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience) -1. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) -1. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) -1. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) +2. [Check If Font Is Installed Locally](#check-if-font-is-installed-locally) +3. [Comma-Separated Lists](#comma-separated-lists) +4. [Equal-Width Table Cells](#equal-width-table-cells) +5. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox) +6. [Hide Autoplay Videos That Aren't Muted](#hide-autoplay-videos-that-arent-muted) +7. [Inherit `box-sizing`](#inherit-box-sizing) +8. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes) +9. [Select Items Using Negative `nth-child`](#select-items-using-negative-nth-child) +10. [Set `display: none` on Line Breaks Used as Spacing](#set-display-none-on-line-breaks-used-as-spacing) +11. [Set `:focus` for Form Elements](#set-focus-for-form-elements) +12. [Set `font-size` on Form Elements for a Better Mobile Experience](#set-font-size-on-form-elements-for-a-better-mobile-experience) +13. [Style Broken Images](#style-broken-images) +14. [Style "Default" Links](#style-default-links) +15. [Use a CSS Reset](#use-a-css-reset) +16. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links) +17. [Use `unset` Instead of Resetting All Properties](#use-unset-instead-of-resetting-all-properties) +18. [Use `:not()` to Apply/Unapply Borders on Navigation](#use-not-to-applyunapply-borders-on-navigation) +19. [Use SVG for Icons](#use-svg-for-icons) +20. [Use the "Lobotomized Owl" Selector](#use-the-lobotomized-owl-selector) +21. [Use `max-height` for Pure CSS Sliders](#use-max-height-for-pure-css-sliders) +23. [Use `rem` for Global Sizing; Use `em` for Local Sizing](#use-rem-for-global-sizing-use-em-for-local-sizing) +24. [Use `:root` for Flexible Type](#use-root-for-flexible-type) +25. [Use Pointer Events to Control Mouse Events](#use-pointer-events-to-control-mouse-events) +27. [Use `:empty` to Hide Empty HTML Elements](#use-empty-to-hide-empty-html-elements) +28. [Vertically-Center Anything](#vertically-center-anything) ### Use a CSS Reset