README.md

CSS

Frameworks

Pre-processing

• SASS/SCSS / LESS
• Styled components
• CSS modules

graph TD;
    App-->Mobile;
    App-->Hybrid;
    App-->Web;
    Mobile-->Styled;
    Hybrid-->Complex;
    Complex-->Styled;
    Web-->Complex;
    Web-->Simple;
    Simple-->CSSmodules;
    Complex-->CSSmodules;

Loading

Post processing

• stylelint
• postcss

CSS plugins

• prefixfree

Postcss plugins

• Flex bugs
• Autoprefixer
• PostCSS calc
• PostCSS not

See also:

• CSS modules with PostCSS
• Styled with PostCSS

Design patterns

• BEM
• reset.css
• 12 / 16 grid system
• float & clearfix / flexbox / grid

Accessability

• eslint:jsx a11y
• stylelint a11y

CSS.module.css

:root {
    --var1: 0;
}
.root {
    /* .root-ZxY */ 
}
.module .btn {
    /* .module-xYz .btn-Yzx */
}
.module :global .btn {
    /* .module-xYz .btn */
}

/**
// in module.js
import styles from 'CSS.module.css'

const foo = () => `
    <div class="${styles.root}">
        <button class="${styles.btn} btn">Button</button>
    </div>
`
*/

LESS.less

/* Variables */
@sizes: xs,s,m,l,xl;
@font-sizes: 10px, 12px, 14px, 22px, 32px;
@grid-columns: 1,2,3,4,5,6,7;
@grid-module-width: 30px;
@grid-module-gap: .5em;

/* Mixins */
.no-wrap() {
    white-space: nowrap;
}
.ellipsis() {
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
 * Grid system with CSS3 grids
 * https://codepen.io/iegik/pen/LexNNQ?editors=1100
 */
@import 'utils';
@import 'variables';
.grid(@min: @grid-module-width; @max: 1fr; @gap: @grid-module-gap){
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(@min, @max));
    grid-gap: @gap;
}
.col(@cols) {
    grid-column: span @cols;
}
.row(@rows) {
    grid-row: span @rows;
}
.each(@grid-columns, {
  .col-@{value} {
    .col(@index);
  }
});

/* Functions (utils) */
.each(@list, @fn, @index: 1) when (@index =< length(@list)) {
  @key: @index + 1;
  @value: extract(@list, @index);
  @fn();
  .each(@list, @fn, @key);
}

/* Exampe */
@import 'utils';
@import 'variables';

.each(@sizes, {
  .ft-@{value} {
    font-size: extract(@font-sizes, @index);
  }
});

SCSS.module.scss

/* variables */
/* functions */
/* exampe */