metamn
Posted on August 2, 2019
New techniques for old problems.
After working a while with React I had to switch back to a classic project: WordPress and plain SCSS with some BEM. The task was to bring an age old codebase to the modern component era.
I was wondering how I could keep that pleasant workflow React offers: components are responsible for their own dependencies and state. They are standalone and self-contained.
I was looking to implement something similar to:
// Component.js
// Imports all dependencies
import React from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'
...
// Manages state
class Component extends React.Component {
constructor(props) {
super(props)
this.state = {
...
}
}
changeState(i) {
...
this.setState({
...
})
}
render() {
return (
<Container handleClick={i => this.changeState(i)}>
...
</Container>
)
}
}
It turned out it is extremely easy to implement something similar with SCSS / BEM:
// button.scss
// Imports all dependencies
@import '../colors/colors.scss';
@import '../link/link.scss';
@import '../border/border.scss';
@import '--primary/button--primary.scss';
@import '--secondary/button--secondary.scss';
@mixin button($variant: primary) {
@include colors(inverted);
@include link(not-underlined);
@include border(rounded);
// Manages state / variations / deviations
@if ($variant == primary) {
@include button--primary;
}
@if ($variant == secondary) {
@include button--secondary;
}
...;
}
After hundreds of components written in this way — a peace of mind is achieved.
Every component is standalone and self-contained.
Imports all necessary stuff required for its internal workings and incorporates all deviations and variations from the default case.
Posted on August 2, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
