Simplify CSS

Question

Simplify CSS

Navigation

#1 by (7 votes)

4

I have a margin like this ( Fiddle example ):

.menu--margen {
    background: #f4f4f4;
    border-right: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
    border-bottom: none;
    margin: 3px auto;
    position: relative;
}

.menu--margen:before {
    padding: 20px;
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-top: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Is there any way to simplify the border css? I've tried:

border: 1px 1px 0px 1px solid #f0f0f0;

But it does not seem to work.

html5 html css

asked by Jordi Castilla 11.04.2016 в 22:03

source

1 answer

signalr - TypeError: chat is undefined Declare array inside loop vs empty it on each loop

score 7 · Accepted Answer

These lines:

border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: none;

You can simplify it in these two lines:

border: 1px solid #bbb;
border-bottom: none;

Where the first defines the style of the four edges and the second only disables the lower border. Also optionally since #bbbbbb has the same 6 hexadecimal digits you can simplify it as #bbb

In the same way you can do with those in the other style

border-right: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: none;

You can change it to:

border: 1px solid #f0f0f0;
border-top: none;