This is the 17th day of my participation in Gwen Challenge
What is CSS modularity
CSS modularity is the encapsulation of modules, just as we write vUE components, one module at a time.
Why CSS modularity
The creation of a thing must have its meaning. In the absence of CSS modularity, if we write components using the same selector (such as the class name), the subsequent selector overwrites the previous one, which is a style naming conflict. In addition, without CSS modularity, every class or tag that needs to be written in style is arranged in a random order within the style tag, and the hierarchy is very unclear.
In short, it is not easy to understand, not easy to reuse, not easy to maintain.
How to implement CSS modularization
1, OOCSS
OOCSS is the origin of CSS modularity. The core idea of this framework is that objects are reusable patterns whose visual appearance is not determined by context.
- Context-free
That is, elements that are not specifically dependent on a context, but are reusable as a separate whole.
- The theme
Create reusable classes for common visual patterns.
- Use the class
Use class to name objects and their child elements, which allows you to modify the HTML style without affecting the style.
- ID is not recommended
It is recommended to name objects using class, but it is not recommended to name objects using id. Because ID is unique, it’s not easy to reuse it.
2. BEM naming specification
- B: block, block
- E: element element
- M: modifier modifier
This is a naming convention, as follows:
/* Blocks are commonly referred to as components or modules in Web application development. Each block is logically and functionally independent of the other. */.block {} /* Elements are part of a block. The element cannot be used outside the block. BEM does not recommend nesting other elements within an element. The */. Block__element {} /* modifier is used to define the appearance and behavior of a block or element. The same block can look different after applying different modifiers */. Block --modifier {}Copy the code
CSS is the CSS code that import to us.
- Start by defining the CSS file
.className { color: green; } /* Write a global style */ :global(.classname) {color: red; } /* Style reuse */. OtherClassName {comPoses: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }Copy the code
- Then import the CSS file in the JS module
import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '" >';
Copy the code
- Configure CSS-Loader packaging
// webpack.config.js
module.exports = {
module: {
rules: [{test: /\.css$/,
use:{
loader: 'css-loader'.options: {
modules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]',}}}]}};Copy the code
3, there is another way is JS to write CSS, here is not detailed
CSS scoped we often see the scoped attribute in the style tag.
<style scoped>
.container{
padding:20px;
background: pink;
}
</style>
Copy the code
We can isolate styles through the scoped property.
Reference article:
CSS modular
Organizing the CSS Modularity
Nothing is too big to solve in pieces. If one doesn’t work, do two until the problem is solved. The emergence of CSS modularity is also for our better development, better development.