CSS

Chain of css syntax

// single class with multiple conditions
div.test {
    background-color: yellow;
}
.flex-container >div.red1{
    background-color: red;
}
.red1.red2{
    background-color: red;
}

// multiple class share same css
.red1,.red2 {
     background-color: red;
}

CSS Specificity

• The final css result is due to total mark of css, style with higher marks win

• CSS mark counting can be separated into different slot

Element Selector (Slot 1)

Class Selector (Slot 2)

ID Selector (Slot 3)

Inline Style (Slot 4)

BEM Naming

{block}_{element}--{modifer}

https://getbem.com/naming/

CSS Module

• CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions

Pre-processor

• It is a tool or programming language that extends the capabilities of CSS (Cascading Style Sheets) by introducing additional features, e.g: sass

• the code is compiled into regular CSS that can be used by web browsers. This compilation process typically involves running a preprocessor-specific command or using a build tool like webpack or gulp.

Post CSS

• PostCSS is not a preprocessor, but a post-processor. That means it does not have its own syntax, but instead uses standard CSS and modifies it with javascript plugin

• Then it compile to pure css which is same as pre-processor

• The processor will compile through the plugin that defined in the file

npm install autoprefixer postcss postcss-cli

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
  }
}

• Compile

npx postcss styles.css -o dist/styles.css