01 -- css coding skills -- css secrets, 01 -- css secrets

01 -- css coding skills -- css secrets, 01 -- css secrets

I. Minimize code duplication

1. Button

#btn {    padding: .3em .8em;    border: 1px solid #446d88;    background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);    border-radius: .2em;    box-shadow: 0 .05em .25em gray;    color: white;    text-shadow: 0 -.05em .05em #335166;    font-size: 125%;    line-height: 1.5;}

 

2. Easy code maintenance vs. Less code

3. currentColor automatically obtains the color value from the text.

hr {    height: .5em;    background: currentColor;}

 

3. inherit from inherit
Inherit can be used in any CSS attribute, and it is always bound to the parent element.
Calculate the value (for a pseudo element, the host element that generates the pseudo element will be taken)
This inherit keyword is also very useful for the background color. For example
You may want the arrow to automatically inherit the style of the background and border (

.callout { position: relative; }.callout::before {    content: "";    position: absolute;    top: -.4em; left: 1em;    padding: .35em;    background: inherit;    border: inherit;    border-right: 0;    border-bottom: 0;    transform: rotate(45deg);}

 

2. Believe in your eyes, not numbers

Human eyes are not a perfect input device. Sometimes the precise scale does not seem refined
Accuracy, and our design needs to adapt to this deviation. A well-known example in the field of Visual Design
Son, when our eyes see a perfectly vertical center object, they will feel that it is not centered.
In fact, we should move this object a little higher from the center of the geometric point to obtain
Ideal visual effect

3. Responsive Webpage Design

The more media queries you add, the more difficult your CSS code will become.
The breakpoint of media query should not be determined by specific devices, but should be determined by the design itself.

1. Media query notes and suggestions:
1> Replace the fixed length with the percentage length. If you cannot do this, you should also
Try to use the units (vw, VL, vmin, and vmax) related to the view, and their value solution
Returns the percentage of the width or height of the view.
2> use max-width instead
Width, because it can adapt to a smaller resolution, without media queries.
3> do not forget to set
Set a max-width value to 100%.
5> If the background image needs to be completely filled with a container, no matter how the container size changes,
Background-size: cover. However, we also need time
Keep in mind-the bandwidth is not infinite, so you can use CSS
It is often unwise to zoom out a large image.
6> when an image (or other elements) is laid out with a determinant, let the width of the view be determined.
The number of columns. Elastic box layout (Flexbox) or display: inline-block
This can be achieved by adding regular text lines.
7> when using multi-column text, specify column-width (column width) instead
Column-count (number of columns) so that it can be automatically displayed as a single
Column Layout.

In general, our idea is to do our best to achieve an elastic and scalable layout and
Specify the size of each breakpoint interval in the query.

4. Use abbreviations

Reasonable Use of abbreviations
It is a good defense encoding method that can withstand future risks. Of course, if we want
To overwrite a specific expanded property and retain other relevant styles, you need to use the expanded property.
Attribute

#box {    background: url(tr.png) no-repeat top right / 2em 2em,    url(br.png) no-repeat bottom right / 2em 2em,    url(bl.png) no-repeat bottom left / 2em 2em;}

#box {    background: url(tr.png) top right,    url(br.png) bottom right,    url(bl.png) bottom left;    background-size: 2em 2em;    background-repeat: no-repeat;}

Now, we only need to modify one location to change all the background-size
And background-repeat. You will find that this technique is widely used in this book.

5. Should I use a Preprocessor?
If used properly, they can make code more flexible in large projects.
1> the volume and complexity of CSS files may be out of control.
2> More debugging difficulties

Highlights:
Weird shorthand syntax