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.