splincodewd January 19, 2016 at 01:59

Some practical CSS tips

CSS Protips

This is a modern solution to common problems, a collection of tips that will help you improve your professional CSS skills.

From translator

Greetings, another translation of CSS related notes has been prepared for you. Portland developer Matt Smith shared CSS tips and posted them on GitHub . I especially liked his selection, it is structured, not particularly cumbersome in terms of boring large texts and descriptions, and in general even a beginner will understand. I will be glad if in the comments we discuss each item and eventually give some conclusions. So let's get started.

We use the pseudo-class: not to set the navigation frame
Add line spacing to the body element
Center everything vertically
Correctly Separate List Items with Commas
Negative serial number in nth-child
We use SVG logos
Axiomatic CSS
CSS slider maximum height
Inherit box-sizing
Same cell width
Dynamic indentation with flexbox
We use the attribute selector for empty links
Default Styles for Plain Links

We use the pseudo-class: not to set the navigation frame

Instead of setting the border in this way ...

/* добавляем рамку */
.nav li {
  border-right: 1px solid #666;
}

... and even reset the border to the last element ...

/* удаляем рамку */
.nav li:last-child {
  border-right: none;
}

... you could just use the pseudo-class: not (), which will help us select only the elements we need:

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

Of course, you could use such a selection .nav li + li or even .nav li: first-child ~ li , however, if we intentionally use: not (), it is clear to us that CSS defines the border for all elements except the last, and now any person will understand what is happening here. This method is supported in IE9 + and the rest.

Add line spacing to the body element

You should not add line height for each paragraph or heading (<p>, ), respectively, defining each element. Instead, add this code to the body of the body element:

body {
  line-height: 1;
}

In this way, any text elements inherit this property from the main parent body element.

Center everything vertically

No, this is not black magic, you can really 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;
}

Want to center somehow else? Vertically, horizontally ... somehow, somewhere? At CSS-Tricks you can read the article and then you can do anything you want. The example has support in IE11 + and the rest.

Note : Watch out for flexbox bugs (errors) in IE11 and control the html-layout process.

Correctly Separate List Items with Commas

We can make our li elements so that they really look like a real list, whose entries are separated by commas:

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

Using the pseudo-class: not (), we add a comma after each element of the ul list, except for the last.

Negative serial number in nth-child

Use the negative arguments in nth-child to select items 1 through n.

li {
  display: none;
}
/* выбираем элементы с 1 по 3 и отображаем их */
li:nth-child(-n+3) {
  display: block;
}

Or, now that we know everything about using the pseudo-class: not (), we can try this:

/* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */
li:not(:nth-child(-n+3)) {
  display: none;
}

Well, that was pretty easy.

We use SVG logos

No, no reason not to use SVG:

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

SVG scales well to any resolution and is supported in all browsers, IE9 +. Now we can use svg instead of .png, .jpg, or .gif files.

Note : If you have an SVG icon for only one button and, in case the SVG has not been loaded, you can use the available text prompt:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

Axiomatic CSS

Lobotomized owl (axiomatic CSS), yes, this is a rather strange name, but using the universal selector (*) and single-level selector (+) you can get powerful CSS features:

* + * {
  margin-top: 1.5em;
}

In this example, all elements in the stream that are located after another element should receive an indent equal to 1.5em . You can read more about the " lobotomized owl in an article by Haydon Pickering, or a translation in Russian .

CSS slider maximum height

You can implement the CSS slider using "max-height" and "overflow: hidden" :

.slider ul {
  max-height: 0;
  overflow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease; /* анимация для max-height */
}

Inherit box-sizing

Let box-sizing inherit from html:

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

Now it’s easier for us to control box-sizing in plugins or components that use their own rules of behavior. Support in IE8 + and the rest.

Same cell width

Sometimes, tables can be painful to work, so try using table-layout: fixed to use cells of the same width:

.calendar {
  table-layout: fixed;
}

We get rid of the pain with table-layout . Support in IE8 + and the rest.

Dynamic indentation with flexbox

When working with a column layout, you can get rid of the use of css selectors nth- * , first- * , and last-child with the flexbox value space-between :

.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
  flex-basis: 23%; /* базовый размер отдельно взятого блока */
}

Support in IE11 + and others.

We use the attribute selector for empty links

Display links when the a-element has no text value, but the href attribute contains a link:

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

It is quite convenient. Support in IE9 + and the rest.

Default Styles for Plain Links

Add default link style:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Now links inserted through the visual editor of your CMS, which usually do not have a class, will be different from the rest of the links without affecting the cascade.

Tags: