From 17f22660b28591557307e685e0b0ce3e9cf14059 Mon Sep 17 00:00:00 2001 From: Hardik Chopra Date: Sun, 27 Dec 2020 22:38:30 +0530 Subject: [PATCH 1/3] :green_heart: Improved Code --- README.md | 79 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 53 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index d3394008..796af595 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,9 @@ A collection of tips to help take your CSS skills pro. 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) +--- -### Use a CSS Reset +### 1. Use a CSS Reset CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like [Normalize](http://necolas.github.io/normalize.css/), _et al._, or you can use a more simplified reset approach: @@ -69,8 +70,9 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you [back to table of contents](#table-of-contents) +--- -### Inherit `box-sizing` +### 2. Inherit `box-sizing` Let `box-sizing` be inherited from `html`: @@ -92,8 +94,9 @@ This makes it easier to change `box-sizing` in plugins or other components that [back to table of contents](#table-of-contents) +--- -### Use `unset` Instead of Resetting All Properties +### 3. Use `unset` Instead of Resetting All Properties When resetting an element's properties, it's not necessary to reset each individual property: @@ -120,8 +123,9 @@ button { [back to table of contents](#table-of-contents) +--- -### Use `:not()` to Apply/Unapply Borders on Navigation +### 4. Use `:not()` to Apply/Unapply Borders on Navigation Instead of putting on the border... @@ -155,8 +159,9 @@ Here, the CSS selector is read as a human would describe it. [back to table of contents](#table-of-contents) +--- -### Check If Font Is Installed Locally +### 5. Check If Font Is Installed Locally You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too. @@ -181,8 +186,9 @@ H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argylei [back to table of contents](#table-of-contents) +--- -### Add `line-height` to `body` +### 6. Add `line-height` to `body` You don't need to add `line-height` to each `

`, ``, _et al_. separately. Instead, add it to `body`: @@ -198,8 +204,9 @@ This way textual elements can inherit from `body` easily. [back to table of contents](#table-of-contents) +--- -### Set `:focus` for Form Elements +### 7. Set `:focus` for Form Elements Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent then a browser's default implementation: @@ -219,8 +226,9 @@ textarea:focus { [back to table of contents](#table-of-contents) +--- -### Vertically-Center Anything +### 8. Vertically-Center Anything No, it's not black magic, you really can center elements vertically. You can do this with flexbox... @@ -260,8 +268,9 @@ Want to center something else? Vertically, horizontally...anything, anytime, any [back to table of contents](#table-of-contents) +--- -### Comma-Separated Lists +### 9. Comma-Separated Lists Make list items look like a real, comma-separated list: @@ -277,8 +286,9 @@ Use the `:not()` pseudo-class and no comma will be added to the last item. [back to table of contents](#table-of-contents) +--- -### Select Items Using Negative `nth-child` +### 10. Select Items Using Negative `nth-child` Use negative `nth-child` in CSS to select items 1 through n. @@ -306,8 +316,9 @@ li:not(:nth-child(-n+3)) { [back to table of contents](#table-of-contents) +--- -### Use SVG for Icons +### 11. Use SVG for Icons There's no reason not to use SVG for icons: @@ -329,8 +340,9 @@ SVG scales well for all resolution types and is supported in all browsers [back [back to table of contents](#table-of-contents) +--- -### Use the "Lobotomized Owl" Selector +### 12. Use the "Lobotomized Owl" Selector It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability: @@ -348,8 +360,9 @@ For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http: [back to table of contents](#table-of-contents) +--- -### Use `max-height` for Pure CSS Sliders +### 13. Use `max-height` for Pure CSS Sliders Implement CSS-only sliders using `max-height` with overflow hidden: @@ -370,8 +383,9 @@ The element expands to the `max-height` value on hover and the slider displays a [back to table of contents](#table-of-contents) +--- -### Equal-Width Table Cells +### 14. Equal-Width Table Cells Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width: @@ -387,8 +401,9 @@ Pain-free table layouts. [back to table of contents](#table-of-contents) +--- -### Get Rid of Margin Hacks With Flexbox +### 15. Get Rid of Margin Hacks With Flexbox When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property: @@ -407,8 +422,9 @@ Now column gutters always appear evenly-spaced. [back to table of contents](#table-of-contents) +--- -### Use Attribute Selectors with Empty Links +### 16. Use Attribute Selectors with Empty Links Display links when the `` element has no text value but the `href` attribute has a link: @@ -424,8 +440,9 @@ That's pretty convenient. [back to table of contents](#table-of-contents) +--- -### Style "Default" Links +### 17. Style "Default" Links Add a style for "default" links: @@ -440,8 +457,9 @@ Now links that are inserted via a CMS, which don't usually have a `class` attrib [back to table of contents](#table-of-contents) +--- -### Consistent Vertical Rhythm +### 18. Consistent Vertical Rhythm Use a universal selector (`*`) within an element to create a consistent vertical rhythm: @@ -455,8 +473,9 @@ Consistent vertical rhythm provides a visual aesthetic that makes content far mo [back to table of contents](#table-of-contents) +--- -### Intrinsic Ratio Boxes +### 19. Intrinsic Ratio Boxes To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div: @@ -483,8 +502,9 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No [back to table of contents](#table-of-contents) +--- -### Style Broken Images +### 20. Style Broken Images Make broken images more aesthetically-pleasing with a little bit of CSS: @@ -521,8 +541,9 @@ Learn more about styling for this pattern in [Ire Aderinokun](https://github.com [back to table of contents](#table-of-contents) +--- -### Use `rem` for Global Sizing; Use `em` for Local Sizing +### 21. Use `rem` for Global Sizing; Use `em` for Local Sizing After setting the base font size at the root (`html { font-size: 100%; }`), set the font size for textual elements to `em`: @@ -552,8 +573,9 @@ Now each module becomes compartmentalized and easier to style, more maintainable [back to table of contents](#table-of-contents) +--- -### Hide Autoplay Videos That Aren't Muted +### 22. Hide Autoplay Videos That Aren't Muted This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video: @@ -567,8 +589,9 @@ Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunap [back to table of contents](#table-of-contents) +--- -### Use `:root` for Flexible Type +### 23. Use `:root` for Flexible Type The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using `:root`: @@ -590,8 +613,9 @@ body { [back to table of contents](#table-of-contents) +--- -### Set `font-size` on Form Elements for a Better Mobile Experience +### 24. Set `font-size` on Form Elements for a Better Mobile Experience To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `