Share 12 awesome CSS skills

The following CSS advanced skills

• Use :not() to apply/unapply borders on menu

• Add line height to body

• Everything is centered vertically

• Comma separated list

• Use negative nth-child to select items

• Use SVG

• for icons Optimize display text

• For pure CSS sliders use max-height

• Inheritance box-sizing

• TableUniform width of cells

• Use Flexbox to get rid of various hacks of margins

• Use attribute selector for empty link

Use :not() to apply/unapply borders on menu

First add a border to each menu item

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

...and then remove the last element...

//* remove border */

.nav li:last-child {
  border-right: none;
}

...You can directly use the :not() pseudo-class to apply elements:

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

This way the code is clean, readable, and easy to understand.

Of course, if your new element has sibling elements, you can also use the universal sibling selector (~):

..nav li:first-child ~ li {

  border-left: 1px solid #666;
}

Add line height to body

You don't need to add line-height separately to each

, , etc. Just add it to body:

body {
  line-height: 1;
}

This way text elements can easily inherit from body .

Everything is centered vertically

To center all elements vertically, it's too easy:

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Look, isn't it very simple?

Note: Be careful with flexbox in IE11.

Comma separated list

Make HTML list items look like a real, comma-separated list:

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

Use the :not() pseudo-class for the last list item.

Use negative nth-child to select items

Use negative nth-child in CSS to select item 1 to item n.

li {
  display: none;
}

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

It's that easy.

Use SVG

for icons There is no reason not to use SVG for icons:

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

SVG has good scalability for all resolution types and supports all browsers returning to IE9. This way you can avoid .png, .jpg or .gif files.

Optimize display text

Sometimes fonts don't display optimally on all devices, so let your device browser help you:

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

Note: Please use optimizeLegibility responsibly. Additionally, IE/Edge has no text-rendering support.

Use max-height

for pure CSS sliders Use max-height and overflow hiding to implement a CSS-only slider:

.slider ul {
  max-height: 0;
  overlow: hidden;
}

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

Inherit box-sizing

Let box-sizing inherit html:

html {
  box-sizing: border-box;
}

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

This makes it easier to change box-sizing in plugins or other components that leverage other behaviors.

Table cells are of equal width

Tables are cumbersome to work with, so be sure to use table-layout: fixed to keep cells of equal width:

.calendar {
  table-layout: fixed;
}

Various hacks to get rid of margins using Flexbox

When you need to use column separators, you can get rid of the nth-, first-, and last-child hacks through flexbox's space-between property:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

List separators will now appear at evenly spaced positions.

Use attribute selector for empty links

Display the link when the element has no text value but the href attribute has a link:

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