Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added css pro-tips for ('margins') #179

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added css pro-tips for ('margins') #179

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e390704
added css pro-tips for ('margins')
AdebayoIbrahim Jul 18, 2023
da3c2c3
Update README.md
AdebayoIbrahim Dec 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 38 additions & 67 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ A collection of tips to help take your CSS skills pro.

> For other great lists check out [@sindresorhus](https://github.com/sindresorhus/)'s curated list of [awesome lists](https://github.com/sindresorhus/awesome/).


## Table of Contents

* [Protips](#protips)
* [Support](#support)
* [Translations](#translations)
* [Contribution Guidelines](CONTRIBUTING.md)

- [Protips](#protips)
- [Support](#support)
- [Translations](#translations)
- [Contribution Guidelines](CONTRIBUTING.md)

## Protips

Expand Down Expand Up @@ -46,7 +44,6 @@ A collection of tips to help take your CSS skills pro.
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)


### 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:
Expand All @@ -65,11 +62,10 @@ Now elements will be stripped of margins and padding, and `box-sizing` lets you

#### [Demo](http://codepen.io/AllThingsSmitty/pen/kkrkLL)

**Note:** If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.
**Note:** If you follow the [Inherit `box-sizing`](#inherit-box-sizing) tip below you might opt to not include the `box-sizing` property in your CSS reset.

<sup>[back to table of contents](#table-of-contents)</sup>


### Inherit `box-sizing`

Let `box-sizing` be inherited from `html`:
Expand All @@ -92,7 +88,6 @@ This makes it easier to change `box-sizing` in plugins or other components that

<sup>[back to table of contents](#table-of-contents)</sup>


### Use `unset` Instead of Resetting All Properties

When resetting an element's properties, it's not necessary to reset each individual property:
Expand Down Expand Up @@ -120,7 +115,6 @@ button {

<sup>[back to table of contents](#table-of-contents)</sup>


### Use `:not()` to Apply/Unapply Borders on Navigation

Instead of putting on the border...
Expand Down Expand Up @@ -155,7 +149,6 @@ Here, the CSS selector is read as a human would describe it.

<sup>[back to table of contents](#table-of-contents)</sup>


### 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.
Expand All @@ -164,12 +157,8 @@ You can check if a font is installed locally before fetching it remotely, which
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
/* Full name */ local("Dank Mono"), /* Postscript name */ local("Dank-Mono"),
/* Otherwise, download it! */ url("//...a.server/fonts/DankMono.woff");
}

code {
Expand All @@ -181,7 +170,6 @@ H/T to Adam Argyle for sharing this protip and [demo](https://codepen.io/argylei

<sup>[back to table of contents](#table-of-contents)</sup>


### Add `line-height` to `body`

You don't need to add `line-height` to each `<p>`, `<h*>`, _et al_. separately. Instead, add it to `body`:
Expand All @@ -198,7 +186,6 @@ This way textual elements can inherit from `body` easily.

<sup>[back to table of contents](#table-of-contents)</sup>


### 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 than a browser's default implementation:
Expand All @@ -211,15 +198,14 @@ select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
outline-offset: 0.05em;
}
```

#### [Demo](https://codepen.io/AllThingsSmitty/pen/ePzoOP/)

<sup>[back to table of contents](#table-of-contents)</sup>


### Vertically-Center Anything

No, it's not black magic, you really can center elements vertically. You can do this with flexbox...
Expand Down Expand Up @@ -251,7 +237,6 @@ body {
}
```


Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has [a nice write-up](https://css-tricks.com/centering-css-complete-guide/) on doing all of that.

**Note:** Watch for some [buggy behavior](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items) with flexbox in IE11.
Expand All @@ -260,7 +245,6 @@ Want to center something else? Vertically, horizontally...anything, anytime, any

<sup>[back to table of contents](#table-of-contents)</sup>


### Comma-Separated Lists

Make list items look like a real, comma-separated list:
Expand All @@ -277,7 +261,6 @@ Use the `:not()` pseudo-class and no comma will be added to the last item.

<sup>[back to table of contents](#table-of-contents)</sup>


### Select Items Using Negative `nth-child`

Use negative `nth-child` in CSS to select items 1 through n.
Expand All @@ -288,7 +271,7 @@ li {
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
li:nth-child(-n + 3) {
display: block;
}
```
Expand All @@ -297,7 +280,7 @@ Or, since you've already learned a little about [using `:not()`](#use-not-to-app

```css
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
li:not(:nth-child(-n + 3)) {
display: block;
}
```
Expand All @@ -306,7 +289,6 @@ li:not(:nth-child(-n+3)) {

<sup>[back to table of contents](#table-of-contents)</sup>


### Use SVG for Icons

There's no reason not to use SVG for icons:
Expand All @@ -329,7 +311,6 @@ SVG scales well for all resolution types and is supported in all browsers [back

<sup>[back to table of contents](#table-of-contents)</sup>


### 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:
Expand All @@ -342,13 +323,12 @@ It may have a strange name but using the universal selector (`*`) with the adjac

In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`.

For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on _A List Apart_.

#### [Demo](http://codepen.io/AllThingsSmitty/pen/grRvWq)

<sup>[back to table of contents](#table-of-contents)</sup>


### Use `max-height` for Pure CSS Sliders

Implement CSS-only sliders using `max-height` with overflow hidden:
Expand All @@ -370,7 +350,6 @@ The element expands to the `max-height` value on hover and the slider displays a

<sup>[back to table of contents](#table-of-contents)</sup>


### Equal-Width Table Cells

Tables can be a pain to work with. Try using `table-layout: fixed` to keep cells at equal width:
Expand All @@ -387,7 +366,6 @@ Pain-free table layouts.

<sup>[back to table of contents](#table-of-contents)</sup>


### 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:
Expand All @@ -407,7 +385,6 @@ Now column gutters always appear evenly-spaced.

<sup>[back to table of contents](#table-of-contents)</sup>


### Use Attribute Selectors with Empty Links

Display links when the `<a>` element has no text value but the `href` attribute has a link:
Expand All @@ -426,7 +403,6 @@ That's pretty convenient.

<sup>[back to table of contents](#table-of-contents)</sup>


### Style "Default" Links

Add a style for "default" links:
Expand All @@ -442,7 +418,6 @@ Now links that are inserted via a CMS, which don't usually have a `class` attrib

<sup>[back to table of contents](#table-of-contents)</sup>


### 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:
Expand Down Expand Up @@ -470,7 +445,6 @@ Using 20% for padding makes the height of the box equal to 20% of its width. No

<sup>[back to table of contents](#table-of-contents)</sup>


### Style Broken Images

Make broken images more aesthetically-pleasing with a little bit of CSS:
Expand Down Expand Up @@ -508,7 +482,6 @@ Learn more about styling for this pattern in [Ire Aderinokun](https://github.com

<sup>[back to table of contents](#table-of-contents)</sup>


### 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`:
Expand All @@ -531,15 +504,14 @@ article {
}

aside .module {
font-size: .9rem;
font-size: 0.9rem;
}
```

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

<sup>[back to table of contents](#table-of-contents)</sup>


### 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:
Expand All @@ -554,14 +526,13 @@ Once again, we're taking advantage of using the [`:not()`](#use-not-to-applyunap

<sup>[back to table of contents](#table-of-contents)</sup>


### 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`:

```css
:root {
font-size: calc(1vw + 1vh + .5vmin);
font-size: calc(1vw + 1vh + 0.5vmin);
}
```

Expand All @@ -577,7 +548,6 @@ body {

<sup>[back to table of contents](#table-of-contents)</sup>


### Inherit `font` on Form Elements for a Better Mobile Experience

Some form controls do not inherit typographical styles by default. To avoid mobile browsers (iOS Safari, _et al_.) from zooming in on HTML form elements when a `<select>` drop-down is tapped, and to mitigate styling inconsistencies across browsers, set the `font` rule to `inherit`:
Expand All @@ -595,14 +565,13 @@ Learn more in [MDN's guide to styling web forms](https://developer.mozilla.org/e

<sup>[back to table of contents](#table-of-contents)</sup>


### Use Pointer Events to Control Mouse Events

[Pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:

```css
button:disabled {
opacity: .5;
opacity: 0.5;
pointer-events: none;
}
```
Expand All @@ -611,7 +580,6 @@ It's that simple.

<sup>[back to table of contents](#table-of-contents)</sup>


### Set `display: none` on Line Breaks Used as Spacing

As [Harry Roberts pointed out](https://twitter.com/csswizardry/status/1170835532584235008), this can help prevent CMS users from using extra line breaks for spacing:
Expand All @@ -624,47 +592,50 @@ br + br {

<sup>[back to table of contents](#table-of-contents)</sup>


### Use `:empty` to Hide Empty HTML Elements

If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `<p class="error-message"></p>`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.
If you have HTML elements that are empty, i.e., the content has yet to be set either by a CMS or dynamically injected (e.g., `<p class="error-message"></p>`) and it's creating unwanted space on your layout, use the `:empty` pseudo-class to hide the element on the layout.

```css
:empty {
display: none;
}
```

### Use `margin-inline` to add margin to both right and left of an html element,moreover when you want to set margin to top and bottom with same value use the shorthand `margin-block`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lines 605 through 615 should be the only lines being included your pr is modifying a lot of lines please adjust this and resubmit

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cause of changes could be auto format setup in your IDE I'd start their

If you have an HTML element you want to set an equal margin to both right and left, a good use-case is to set a (`margin-inline`) to it, same thing applies to an equal margin on top and bottom in that case you only need to set a (`margin-block`)
```css
div {
margin-inline: auto;
margin-block: 2em;
}
```
**Note:** Keep in mind that elements with whitespace aren't considered empty, e.g., `<p class="error-message"> </p>`.

<sup>[back to table of contents](#table-of-contents)</sup>


## Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

<sup>[back to table of contents](#table-of-contents)</sup>


## Translations

**Note:** I've had less time available to maintain the growing list of translated tips; adding a new tip requires including it with over a dozen translations. For that reason, translated README files may not include all the tips listed on the main README file.

* [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
* [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW)
* [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE)
* [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
* [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
* [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR)
* [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND)
* [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT)
* [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP)
* [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR)
* [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL)
* [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
* [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT)
* [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
* [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN)
- [简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)
- [正體中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-TW)
- [Deutsch](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/de-DE)
- [Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
- [Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
- [λληνικά](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gr-GR)
- [ગુજરાતી](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/gu-IND)
- [Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT)
- [日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP)
- [한국어](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ko-KR)
- [Polskie](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pl-PL)
- [Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
- [Português do Europe](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-PT)
- [Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
- [Tiếng Việt](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/vn-VN)

<sup>[back to table of contents](#table-of-contents)</sup>