Cutting edge: When talking about CSS, what impressed me most was when I started to work in front-end development after graduation. As a cut picture boy, I used CSS extensively in page layout and restoration design to develop pages. Bootstrap (for developing a responsive layout, mobile-first WEB) was the one I remember most starting out with. However, with the rapid development of front-end programming, such as Element, Ant Design and other excellent UI libraries appear, in contrast to the aesthetic fatigue. Anyway, CSS has spawned many new solutions in recent years, such as CSS Modules, Styled – Components (CSS in JS), Functional CSS, CSS atomic classes, CSS sandboxes, and so on
1. CSS Module
As the name implies, CSS Module is CSS modularity, why modularity? As we know, with the development of SPA Web application based on VUE and React, it is essentially built by multiple components, just like building a house with building blocks. If the style and class names of the two components are repeated at this time, won’t it be a conflict? In order to solve the conflict, it is necessary to carry out modular distinction. Without naming conflicts, it is better to sandbox components. CSS Module is one of the ways to achieve CSS modularization
The CSS Module converts the class name to a new class name with a hash value when packaging according to naming rules, thus eliminating CSS class name conflicts.
👨🎓 : CSS Module is Vue: Scoped?
A: No, CSS Scope is implemented by limiting the Scope. Styles work locally, not as CSS modules
We know that when a style tag has scoped, its CSS style can only be applied to the current Vue component. This is implemented via PostCSS by adding a property to the dom and a property to the CSS selector that corresponds to the unique DOM, as shown below
How is CSS Module implemented? Take Vue as an example, how to use CSS Module
- Webpack was introduced directly
vue-loaderUse the documentation 🔗 - Vue-cli3 built-in, can be directly out of the box, just need to tag in the style tag
module, you can use CSS Modules within components. See the documentation for moreUse the documentation 🔗
Let’s look at how CSS Modules compile in a Vue project
As you can see, CSS Modules automatically rename the class when they finally build the page. This module feature instructs the Vue Loader to inject a CSS Modules local object into the component as a calculated property named $style. You can then use it in the template via a dynamic class binding
👨🎓 Ah Le: You said that CSS Module is a way of implementing CSS modularization. Are there any other ways of implementing CSS modularization?
There are, such as the BEM naming convention, and CSS in JS, which we’ll cover in the next section
Here’s a quick introduction to BEM
🌲
- CSS Modules usage tutorial
- BEM official specification
2. CSS in JS
CSS in JS, as the name implies, is to write the CSS styles applied in JavaScript files, using THE JS language to write CSS, including replacing the original suffix of.css,.less,.scSS and other files
2.1 styled – components
Styled components is a well-known CSS in JS implementation, mostly used for React. Styled components define CSS properties for Component using the tag template string syntax of ES6 syntax. We don’t need to set the className again. Let’s look at the following demo 👇
👩🎓 Ah Xue, for the styled components, will Vue be used?
A: For styled components, the React Styled Components team develops a styled components for Vue, for the style network. For styled components, the React Styled components team develops a styled components for Vue, for the style network. But I still think CSS-in-JS will become more and more popular. Documentation link 🔗
🌲 development:
Styled – components website
3. The CSS class atom
This is a very old concept and is essentially the idea of writing CSS by using atomic classes to construct selectors. For example, we define a base. CSS file that defines a common high reuse selector such as mgt20 (to represent margin-top: 20px) and so on. The benefit is that it is easy to extract and reuse the code, but excessive abstraction can also bring huge maintenance costs.
3.1 tailwind
At first glance, I have a lot of class names, but it does seem easy to build, but the granularity is too small. The problems will be exposed, difficult to remember, use it, you are like a child to pick up the dictionary to look up words, please check the link 📖
Tailwind is the current version of Twitter, which is clearly visible on the console
By the way, this lab has a lot of money, and it’s sponsoring advertising space for Vite
🌲
- How to evaluate the CSS framework TailwindCSS?
3.2 bulma
Bulma is a free, open source modern CSS framework based on Flexbox layout technology. I first encountered Buefy, a lightweight UI component based on Bulma vue.js, in the community. It is completely BASED on CSS and does not require javascript. That’s the big difference between him and Boostrap. However, it is not very mainstream now, so I will not elaborate too much here. If you are interested, you can have a thorough understanding of it. You can see the following example
Learning to use CSS frameworks is not the end in itself, it is just a productivity tool. The purpose of the tool is to improve our development efficiency, and ultimately to empower our products, so don’t worry too much about using these frameworks, after all, there are so many frameworks you can’t use them all. In other words, it is also possible to understand the principle, which can improve their cognition
🌲
- CSS framework Bulma tutorial
- buefy.org/
4.CSS Sandbox
CSS sandboxes simply play the role of style isolation, non-interference, front-end contact is more micro front-end, after all, to ensure that each integrated application style does not interfere with each other. Because applications may be developed by different team members, it is normal to have class name conflicts.
One of the earliest implementations is iframe. Iframe has its own natural isolation, but this method has many limitations, and as mentioned above, for example
- Scoped CSS: By defining the property scoped, you can limit the scope of the CSS in conjunction with the DOM tree
- CSS in JS and CSS Module are tools that compile styles into scripts
- Remove tags inside the Head: This is how the CSS sandbox in Qiankun will record new style/ Link tags added to sub-projects while they are running and remove them when they are uninstalled. Re-add the tag of the newly loaded subproject to implement
- Shadow DOM: The DOM of the DOM is an important property of Web Components, which allows you to attach hidden DOM trees to regular DOM trees. The disadvantages are poor compatibility, you can check the compatibility 🔗
🌲
- The use of shadow DOM
🌲 sauce previous articles:
- Developing visual Data Screens from 0 to 1 (PART 1)
- Construction of front-end Knowledge System of Tree Jam (PART 1)
- Construction of front-end Knowledge System of Tree Jam (Part 2)
- Talk about daily collaboration tools for front-end development
- Babel configuration is stupid
- How to better manage the Api
- The interviewer asks you about Node
- Front-end engineering stuff
- Did you learn BFF and Serverless
- Front-end operations and deployment
Please drink a cup 🍵 remember three even oh ~
1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation
2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front
3. Github frontendThings thanks to Star✨