Tips for improving your CSS development capabilities

Tips for improving your CSS development capabilities
0. Directory

Directory introduction body 1 use not to add an interval Line to the navigation bar 2 Add the Line-Height attribute to the body element 3 any element vertical center 4 comma-separated list 5 use negative number 6 in nth-child svg icon 7 text display optimization 8 use max-height 9 in Pure CSS Sliders to initialize box-sizing 10 table cell width 11 use Flexbox to get rid of various Margin Hacks 12 to empty connections use Attribute Selector statement

1. Introduction

Original article: A collection of useful CSS protips on github
Translator: love front-end happy to share the FedFun, the free translation is mainly inappropriate, please correct me!
Translation: it is helpful to improve your CSS development skills.

2. Text2.1 use :not()Add an interval line to the navigation bar

We usually use the following code to add an interval to the navigation bar.

/* add border */.nav li {  border-right: 1px solid #666;}/* remove border */.nav li:last-child {  border-right: none;}

Now, we can use:not()The selection operator simplifies the operation, and the code is concise and easy to read.

.nav li:not(:last-child) {  border-right: 1px solid #666;}

Or, we can add the left border.

.nav li:first-child ~ li {  border-left: 1px solid #666;}

2.2 Add the Line-Height attribute to the body element.

We do not need to set each p or h1 element.line-heightYou only need to set the body element. Other text elements will automatically inherit the features of the body.

body {  line-height: 1;}

2.3 Vertical center of any element

It is not a black magic. It can indeed center any element vertically.

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

2.4 comma-separated list

Make the html list look like a list separated by commas in reality

ul > li:not(:last-child)::after {  content: ,;}

2.5 In nth-childNegative

Innth-childSelect 1 ~ N records.

li {  display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) {  display: block;}

2.6 Use the svg icon

And so on.

.logo {  background: url(logo.svg);}

2.7 text display optimization

Some fonts cannot be best displayed on all devices, so you need to set them.

html {  -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}

Note:optimizeLegibilityAttribute Value usage problems, while IE/Edge does not supporttext-rendering.

2.8 use max-height in Pure CSS Sliders

Use max-height to hide and display animations.

.slider ul {  max-height: 0;  overlow: hidden;}.slider:hover ul {  max-height: 1000px;  transition: .3s ease;}

For more information, see the Auto value CSS3 Transition solution.

2.9 Initialization box-sizing

Inherit from htmlbox-sizingAttribute. In this way, it is easier to maintain later.

html {  box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}

2.10 table cell width

.calendar {  table-layout: fixed;}

2.11 use Flexbox to get rid of various Margin Hacks

When implementing the sidebar, we no longer need variousnth-,first-Andlast-childWith other settings such as margin, you can use Flexbox to easily achieve even distribution.

.list {  display: flex;  justify-content: space-between;}.list .person {  flex-basis: 23%;}

2.12 use Attribute selector for NULL connections

For those a with the href attribute but the content is empty, the content is automatically added.

a[href^=http]:empty::before {  content: attr(href);}

Very convenient, right.