11 tips for improving your CSS skills, you know?

Front-end development is increasingly focused on efficiency and performance, and using a preprocessor with less and SCSS resources provides a great convenience for our front-end CSS authoring work. But there are many simple ways to write small, fast CSS code, improve development efficiency and solve many common problems.

1. Use CSS Reset

CSS reset libraries like normalize.css are very popular, providing a refreshing choice for your site style to ensure better consistency between browsers. In fact, not every project requires all the rules contained in these libraries, and we can circumvent the differences between browsers with some simple CSS rules. Take a look at the box model code below:

1{     2  box-sizing: border-box;    3   margin: 0;     4   padding: 0;   5

2. Inheriting box-sizing

Let box-sizing inherit HTML:

1{     2    box-sizing: border-box;   3 }     4{     5    box-sizing: inherit;   6

This makes it easier to change the box-sizing in other components of the plug-in or leverage other behaviors.

3. Use Flexbox to get rid of the various hack of the margin

When you need to use the column delimiter, by Flexbox the Space-between property, you can get rid of nth-,first-, and Last-child hack:

12  display: Flex3  justify-content:  Space-between45  67  flex-basis : 23%8

4. Use: Not () to define the menu border

We want to define the border of the menu list and then remove the border from the last menu, usually by:

1{     2    border-right: 1px solid #666;   3 4  {     5    border-right: none;   6

And we can now use the: not () pseudo-class to apply the elements, so that the code is clean, easy to read, easy to understand.

1{     2    border-right: 1px solid #666;   3

5. Add row height to body

You do not need to add line-height to each p,h tag separately. As long as you add to body:

12  line-height: 1.53

6. Center vertically

To center all elements vertically, use the following code:

1 html, Body{2 Height:100%;3 margin:0;4}5 Body{6 -webkit-align-items:Center;7 -ms-flex-align:Center;8 Align-items:Center;9 Display:-webkit-flex;Ten Display:Flex; One}

7. Using SVG as an icon

SVG can adapt to different resolutions, and is supported in all browsers, why not?

1{     2    background: url ("Logo.svg");   3

8. Equal-width table cells

Tables are cumbersome to work with, so be sure to use table-layout:fixed as much as possible to maintain the width of the cell:

12  table-layout: fixed3

9. Using the property selector for empty links

When a element does not have a text value, but the href attribute has a link, the link is displayed:

12  content: attr (HREF)3

10. Alternative styles for images that do not exist

For some reason the picture loading failed, we use CSS to tell the user the picture is friendly.

1 img{2 Display:Block;3 font-family:Helvetica, Arial, Sans-serif;4 Font-weight: -;5 Height:Auto;6 Line-height:2;7 position:relative;8 text-align:Center;9 width:100%;Ten} One Img:before{ A content:"We ' re sorry, the image below is missing:("; - Display:Block; - Margin-bottom:10px; the} - Img:after{ - content:"(url:" attr (SRC) ")"; - Display:Block; + font-size:12px; -}

11. Set the font-size on the form element

To prevent mobile browsers (IOS Safari, etc.) from zooming in on the HTML form elements while tapping <select> drop-down menus, add font-size to the input style:

1 input[type= "text"],    2 input[type= "number"],    3 Select,    4  {     5    font-size: 16px;   6

Source: 11 Tips for improving your CSS skills, you know?

11 tips for improving your CSS skills, you know?