Introduction to the

As a front-end engineer, it’s not until after YOU’ve written the HTML that the real nightmare starts to happen. When you’re writing CSS, you’re faced with a screen full of components flying around and you want to manually move them into place.

All say CSS is difficult to master, the most worry about writing style to the page, in fact, is because there is no formation of a macro understanding of CSS, as long as there is the right learning method, design thinking, and then through continuous accumulation, you can easily master it. I’m going to put together 5 tips for mastering CSS so you don’t have to worry about writing CSS in the future.

Station B video – Click transmit

Style adjustment

The most basic function of CSS is to adjust the STYLE of HTML. You can set the width and height of elements, font color, size and spacing, background color, and image. These have the same effect as a traditional rich text editor such as Word. Some properties can be set to multiple items at once, such as background:

  • background-color
  • background-image
  • background-origin
  • background-position
  • . , etc.

action

In your spare time, you can check the usage of documents like MDN.

Layout adjustment

CSS is a big problem lies in the overall layout of the page, this time you need to put your thinking into a whole, planning the layout, and then make reasonable use of CSS Flex and grid to achieve.

In most cases, pages are not properly laid out, and there are often strange layouts such as cascading, overlays, and offsets. CSS has the concept of leaving the document flow. Using absolute, fixed, or float attributes can cause elements to leave the document flow. A normal document flow is one in which elements are ordered from top to bottom and left to right (block-level elements are ordered from top to bottom because they occupy an entire row). When an element is removed from the document flow, it is taken away, followed by another element, and so on. The element that is removed alone can be moved by attributes like left and top according to certain rules, and if there is overlap, the z-index controls who is up and who is down. Note that using the TansForm attribute to position elements does not cause them to move out of the document flow; the space they take up stays in place.

Responsive layout

Responsive layout is relatively easy to implement with CSS. You can query the screen width by @media and overlay the corresponding styles according to the display effect of the page to make the page display properly.

action

To train yourself to layout planning, can have a look at other sites, from the beginning of the simple and neat, analysis their layout step by step, such as navigation, header, content at the bottom of the partition and information, oneself use simple HTML element square planning it, ignore the component details, slowly to see some of the irregular layout of the site, Then use their own methods to achieve it, slowly will form a way of thinking, see the design draft can know how to plan the layout of the site.

Disassembly and combination of shapes and special effects

Why should front-end engineers learn a little bit about design? Because the front-end page implementation will have irregular graphics, animation effects and so on, and in the eyes of designers, complex graphics are composed of the most basic graphics, the so-called point, line, surface. For example, draw a triangle with CSS, you can use border, border.

We know that a normal DIV element has four sides, but each edge meets a corner that has been cut off. We can create a triangle by removing the width and height of the div and adjusting the width of the border.

For example, if you take a wave animation, you can take it apart, and you have two identical elements stacked on top of each other, and then the bottom element is magnified, and then the opacity goes to zero, and you get something like this

action

If you want to understand the effects of front-end pages and components, study the basic principles and theories of design first. It will not only speed up your development efficiency, but also reduce the cost and time of communicating with designers

Page component design principles

Before writing the code, you need to study the design carefully and analyze which components on the page are exactly or substantially the same, so that the styles of these components can be made into a separate whole by class or other means, and then extended by combining multiple classes. For example, if a button may have different colors and sizes, but the shape and spacing of the text are the same, a button class can define the general style of the button, and then use the Color class to control its color.

On the other hand, if you find that most of the time you are writing repetitive CSS code, it is likely that the code can be used with multiple components. In this case, in the spirit of not writing repetitive code, isolate it and use it as a class utility. This allows other elements that use the same CSS property to use it directly. For example, when using Flex layout, you can define a. Flex class to turn flex on, then a column class to arrange by column, and classes like. Center,.left to control the alignment of Flex child elements.

<div class="flex column">
  <div>flex1</div>
  <div>flex2</div>
  <div>flex3</div>
</div>
Copy the code

action

In the design of components, the first analysis which is approximately the same component in the design draft, and then abstract the common style of them, have a special situation by combining the class to override the existing style, in the design of other components, components are only concerned with the inside of the box area, not to set properties such as from the outside, they should be set by containing the component container. Because the same component may be positioned and spaced differently in different containers.

CSS Modular Learning

To learn CSS well, you can break it up into separate modules. As a whole, CSS can do things like:

  • Apply the style by selecting the corresponding HTML element through the selector
  • Set the appearance of elements, such as colors, backgrounds, fonts, and so on
  • Adjust the position and spacing of elements with other elements
  • Lay out a set of elements or an entire page
  • Overrides or inherits existing styles

actions

Break them down so that CSS doesn’t feel like a hodgepodge.

Some learning resources

MDN and W3Schools are recommended for CSS learning. Look up the meanings of attributes at any time. If you want to see how specific effects or graphics are implemented, you can Google it or browse Codepen every day for inspiration. The most important thing is to start to write, and so much accumulation, will form a routine.