STYLING COMPONENTS

WHY COMPONENTS ?

Today  ➡️  Global stylesheets needed

SCOPED

Today  ➡️  Nesting selectors / BEM

REUSABLE

— "import and play" NPM modules

— no conflicts

CSS MODULES !

✨ Styles composition — clear dependencies

✨ Generated class names — true uniqueness

SCOPED

REUSABLE

// index.jsx 
import './style.less';
  
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} NotebookCellEditor-container align-items-center`}>
        <div className='main-controls flex'>
        </div>
    </div>
);

/* style.less */ 

.CellEditorContainer {
    width: 100%;
    margin-bottom: 24px;
    padding-left: 16px;
    .main-controls{
        flex-wrap: wrap;
        align-items: flex-start;
    }
}

CSS MODULES — EXAMPLE

// index.jsx 
import style from './style.less';
 
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} ${style.container} align-items-center`}>
        <div className={`${style.mainControls} flex`}>
        </div>
    </div>
); 

/* style.less */ 
.container {
    width: 100%;
    margin-bottom: 24px;
    padding-left: 16px;
}
 
.mainControls{
    flex-wrap: wrap;
    align-items: flex-start;
}

CSS MODULES — NO MORE BEM

// index.jsx 
import style from './style.less';
 
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} ${style.container}`}>
        <div className={style.mainControls}>
        </div>
    </div>
);

/* style.less */ 
.container {
    composes: alignItemsCenter from "dogweb/less/components/layout.less";
    width: 100%;
    margin-bottom: 24px;
    padding-left: 16px;
}

.mainControls{
    composes: flex from "dogweb/less/components/layout.less";
    flex-wrap: wrap;
    align-items: flex-start;
}

CSS MODULES — COMPOSITION

// index.jsx 
import style from './style.less';
 
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} ${style.container}`}>
        <div className={style.mainControls}>
        </div>
    </div>
);

/* style.less */ 
@import '../../../../../../../../less/components/constants.less';

.container {
    composes: alignItemsCenter from "dogweb/less/components/layout.less";
    color: @blue_base;
}

.mainControls{
    composes: flex from "dogweb/less/components/layout.less";
    flex-wrap: wrap;
    align-items: flex-start;
}

CSS MODULES — STYLE COMPOSITION

CSS IN JS

REMEMBER JSX ?

// index.jsx 
import { css } from 'glamor';
import { alignItemsCenter, flex } from 'dogweb/style/layout.js';
import { blue_base } from 'dogweb/style/colors.js';
 
const container = css(alignItemsCenter, {
    width: '100%',
    marginBottom: '24px',
    paddingLeft: '16px',
    color: blue_base,
});
 
const mainControls = css(flex, {
    flexWrap: 'wrap',
    alignItems: 'flex-start',
});
 
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} ${container}`}>
        <div className={mainControls} />
    </div>
);

GLAMOR

// index.jsx 
import style from './style.js';
 
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <div className={`${cn} ${style.container}`}>
        <div className={style.mainControls} />
    </div>
);

// style.js 
import { alignItemsCenter, flex } from 'dogweb/style/layout.js';
import { blue_base } from 'dogweb/style/colors.js';
import { css } from 'glamor';
 
export default {
    container: css(alignItemsCenter, {
        width: '100%',
        marginBottom: '24px',
        paddingLeft: '16px',
        color: blue_base,
    }),
    mainControls: css(flex, {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
    }),
};

GLAMOR — SEPARATE FILE

// index.jsx 
import styled from 'styled-components'; 
import { alignItemsCenter, flex } from 'dogweb/style/layout.js'; 
import { blue_base } from 'dogweb/style/colors.js';
  
const Container = styled(alignItemsCenter)`
    width: 100%;
    margin-bottom: 24px;
    padding-left: 16px;
    color: ${blue_base};
`;
  
const MainControls = styled(flex)`
    flex-wrap: wrap;
    align-items: flex-start;
`;
  
const CellEditorContainer = ({ cn = 'CellEditorContainer', ...props }) => (
    <Container>
        <MainControls />
    </Container>
);
  

STYLED-COMPONENTS