CSS advanced: four tips to improve your front-end level, css advanced

CSS advanced: four tips to improve your front-end level, css advanced

NOTE: With Node. the emergence of js, react-native and other technologies, and the emergence of entrepreneurship in the Internet industry, learn some front-end knowledge, become a full-stack attacker, quickly produce prototypes, and demonstrate your creativity, it is becoming more and more important for programmers, especially start-ups. Next we will follow the popular article Leveling up in CSS on the famous foreign developer website. start with improving your CSS skills.

 

CSS looks very simple at the beginning. After all, it is just a few styles. In fact, is that true?

However, as you keep learning about it. Soon, you will find that CSS is not as simple as you think, it is complex and has a depth.

By doing these four things well, you can ensure code robustness when using CSS on a large scale: using appropriate semantics, modularity, unified naming rules, and a single functional principle.

Use appropriate Semantics

There is a semantic annotation concept in HTML and CSS programming. Semantics refers to the relationship between the meaning of words and them. In HTML programming, it means you need to use a proper tag name to mark. The following is a classic example.

 <!-- bad -->  <div class = ”footer” </div> <!-- good --> <footer></footer>

The Semantic HTML is very simple and clear. On the other hand, semantic CSS is more abstract and subjective. Writing semantic CSS means that when selecting a type, the class name should convey the structure and function information. Class names are easy to understand. Make sure they are not too specific or special. In this way, you can reuse it.

 

To illustrate what a good class name is, please refer to the simplified CSS example of the Medium website.

<div  class ="stream"> <div  class="streamItem"> <article  class="postArticle">  <div  class = "postArticle-content"><!-- content --> </div> </article> </div></div>

With this code, you can immediately identify their structures, functions, and meanings. The class name of the parent node is stream, and the content is a list of articles. Its subnode class name is streamItem, And the content is a specific article in the article list. This makes it easy for us to understand the relationship between the parent node and the child node. In addition, these classes can be used on every page with the article function.

You can read HTML and CSS just like reading a book. It tells you a story. Through the story, you can understand the relationship between each role in the story and them. CSS code with rich semantics is easy to understand and easy to maintain.

If you want to learn more about semantic-related content, see how to perform semantic class naming, CSS naming is not simple, and rich semantics and easy identification (code naming). let's look at "HTML naming and front-end architecture".

Modular

In this era full of Component Libraries (taking React as an example), modularization is the king. A component is a component that can be combined by a deconstruct interface. The following is a front-end page of Product Hunt (a website for a launched startup project. As an exercise, let's break down this page into a series of components.

 

Each color box represents a component. The stream node is divided into multiple stream item subnodes.

 <div class = "stream" > <div class = "streamItem" > <!-- product info --> </div> </div>

Most components can be broken down into smaller components.

 

Each stream item component has a thumbnail and a special product information.

 <!-- STREAM COMPONENT --> <div class = "stream" > <div  class = "streamItem" > <!-- POST COMPONENT --> <div  class = "post" >  <div  class = "content" > <!-- product info --> </div> </div> </div> </div>

Since the stream component and its sub-control are completely independent, you can easily adjust or change the post component without any impact on the stream component.

The idea of using components will decouple your code. The more code you decouple, the lower the dependency between your classes. This will make your code easier to modify, and make your code work longer without modifying it.

 

Component-driven design

When you modularize your CSS, you first break down your design into multiple components. You can use paper and pen, or software similar to Illustrator or Sketch. Determine how you will name these components and clarify the relationship between them.

Read