CSS Advanced: 4 tips for improving your front-end level

Source: Learning notes from Qian Feng students CSS looks very simple when you start learning. After all, it's just some style, is it? But, as you keep on understanding. Soon, you'll find that CSS is not as simple as you think, it's complex and deep. Doing these four things will give you the robustness of your code when using CSS on a large scale: using the right semantics, modularity, a unified naming convention, and a single functional principle. Use the appropriate semantics There is a concept of semantic tagging in HTML and CSS programming. Semantics refers to the meaning of words and the relationship between them. In HTML programming, it means that you need to tag with a proper tag name. The following is a classic example. <!--bad--- <div class= "Footer" ></div> <!--good- <footer></footer> Semantically rich HTML is very simple and clear. On the other hand, semantic-rich CSS is more abstract and subjective. Writing a semantic CSS means that when you choose a type, the class name conveys structure and function information. The class name is easy to understand. Make sure they are not too specific and too special. This way, you can reuse it. To illustrate what a good class name is, see the CSS example of this simplified Medium website. <div class= "Stream" > <div class= "Streamitem" > <article class= "Postarticle" > <div class= "Postarticle-content" > <!--Content-- </div> </article> </div> </div> With these codes, you can immediately identify their structure, function, and meaning. The parent node's class name is stream and the content is a list of articles. Its child node's class name is Streamitem, and the content is a specific article in the article list. This makes it easy to understand the relationship between the parent and child nodes. Also, these classes can be used in every page that has an article feature. You can read HTML and CSS the same way you read a book. It will tell you a story. Through the story you can understand each character in the story and the relationship between them. Semantic-rich CSS code is easy to understand and easier to maintain. If you want to learn more about semantic-related content, see "How to make a semantic name for a class", "CSS naming is not simple" and "semantic and easy to identify (code naming)", and then look at "about HTML naming and front end architecture." Modular In an era full of component libraries (taking React as an example), modularity is the king. A component is a composable module created by an already deconstructed interface. The following is a front-end page for product Hunt, a website that launches a good startup project. As an exercise, let's break down this page into a series of components. Each color box represents a component, and the stream node is divided into a bunch of stream item child nodes. <div class= "Stream" > <div class= "Streamitem" > <!--Product Info- </div> </div> Most components can be decomposed into smaller components. Each stream item component has a thumbnail and a featured product information. <!--STREAM COMPONENT-- <div class= "Stream" > <div class= "Streamitem" > <!--POST COMPONENT--- <div class= "POST" > <div class= "Content" > <!--Product Info- </div> </div> </div> </div> Because the stream component and its child controls are completely independent, you can easily adjust or replace the post component, and this will not have any effect on the stream component. The idea of using components will decouple your code. The more code you decouple, the less dependencies you have between your classes. This makes your code easier to modify and allows your code to 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 pens, or you can use software like Illustrator or Sketch. Determine how you will name these components, and also clarify the relationships between the various components. Read more about CSS component drivers, see CSS Building: Extensible and modular processing, using Sass to write modular CSS and modular your front-end code-write highly maintainable and well-organized code. Adopt a unified naming convention There are currently dozens of different versions of the CSS naming conventions. Some people are very certain about the naming conventions they choose, and think they are better than others. In fact, different people like different naming conventions. The best advice I've heard is: choose the naming convention that you find most appropriate. Here's a simple list of common naming conventions: Object oriented CSS Oocss Block element modifier (BEM) Scalable and modular architecture for CSS (SMACSS) Atomic My favorite naming convention is BEM. BEM represents a block (block), element, and modifier (modifier). Yandex, the equivalent of Google's search engine in Russia, proposed it in order to solve the scaling problem in their CSS code base (it refers to BEM). BEM is a very simple--and extremely strict--naming convention. . Block {} . block__element {} . Block--modifier {} Block (Blocks) represents a high-level class. An element (Elements) is a sub-module of a block. The modifier (modifiers) represents a different state. <div class= "Search" > <input type= "search__btn search__btn--active"/> </div> In the example above, search is a block, and the search button is its element. If you want to change the state of the button, we can add a modifier to the button, such as active. One thing to keep in mind about naming conventions is that whatever naming conventions you prefer, you will often inherit or work on different standard code repositories. Please open your heart to learn new standards and think about CSS with different thinking. You can read more about BEM in learn BEM grammar, BEM 101, and BEM profile. To understand the different naming conventions, see OOCSS, ACSS, BEM, smacss: What are these? Follow a single function principle The single function principle stipulates that each module and class should have a single function, and that the function should be fully encapsulated by this class. In CSS, a single function principle represents only one thing per piece of code, class, and module. When we submit a CSS file, this means that each individual component (such as the Carousel Effect and navigation bar) should have its own CSS file. /components |-Carousel |-|-CAROUSEL.CSS |-|-carousel.partial.html |-|-carousel.js |-nav |-|-NAV.CSS |-|-nav.partial.html |-|-nav.js Another common way to organize files is to group files by function. Take a chestnut, as shown above, all the files related to the Carousel effect component are sorted together. This way, it makes it easier for you to find relevant files. In addition to separating the styles of the components, it is best to separate the global styles with a single functional principle. /base |-Application.css |-Typography.css |-Colors.css |-Grid.css In the example above, search is a block, and the search button is its element. If you want to change the state of the button, we can add a modifier to the button, such as active. One thing to keep in mind about naming conventions is that whatever naming conventions you prefer, you will often inherit or work on different standard code repositories. Please open your heart to learn new standards and think about CSS with different thinking. You can read more about BEM in learn BEM grammar, BEM 101, and BEM profile. To understand the different naming conventions, see OOCSS, ACSS, BEM, smacss: What are these? Follow a single function principle The single function principle stipulates that each module and class should have a single function, and that the function should be fully encapsulated by this class. In CSS, a single function principle represents only one thing per piece of code, class, and module. When we submit a CSS file, this means that each individual component (such as the Carousel Effect and navigation bar) should have its own CSS file. . Splash { Background: #f2f2f2; Color: #fffff; margin:20px; padding:30px; border-radius:4px; Position:absolute; top:0; right:0; bottom:0; left:0; } In the example above, we will focus on the point coupling. Splash This class contains not only its own style and logic, but also its child nodes. To solve this problem, we can separate this code into two new classes. . Splash { Position:absolute; top:0; right:0; bottom:0; left:0; } Now we have splash and splash content two classes. We can use splash as a generic full-screen class that can have any child nodes. All child nodes are concerned with properties that are completely decoupled from the parent node's properties in splash content. You can learn more about the application of single-function principles in style sheets and classes by reading the following articles. The application of single function principle in CSS and the principle of single function. Simpler than complex If you ask any successful front-end development engineer or CSS architect, they will tell you that they have never been completely satisfied with their code. Writing a good CSS is a continuous iterative process. From a simple start, follow the basic CSS rules and styling guidelines, and then iterate

This article is from the "Dry Goods sharing" blog, please be sure to keep this source http://angeliahtml5.blog.51cto.com/10471639/1971365

CSS Advanced: 4 tips for improving your front-end level