Styling (CSS)
Next Generation CSS
This boilerplate uses styled-components
💅
for styling react components. styled-components
allows you to write actual CSS inside your JavaScript,
enabling you to use the full power of CSS 💪
without mapping between styles and components.
There are many ways to style react applications, but many find styled-components
to be a more natural approach to styling components.
Watch this video for a comparison and to see how it enforces best practices!
Linting
To complement styled-components
, this boilerplate also has a CSS linting setup. It uses stylelint
which will help you stay consistent with modern CSS standards. Read about it here.
sanitize.css
In addition, this boilerplate also uses
sanitize.css
to make browsers render all elements more consistently and in line with modern standards,
it's a modern alternative to CSS resets. More info available on the sanitize.css
page.
CSS Support
We support and recommend the use of styled-components
.
We also support the use of CSS stylesheets.
There are many ways to style web applications, unfortunately, we cannot support them all. However, you can integrate the following by using the guides below:
styled-components
Below creates two styled react components (<Title>
, <Wrapper>
) and renders them
as children of the <Header>
component:
(The CSS rules are automatically vendor prefixed, so you don't have to think about it!)
For more information about
styled-components
see https://github.com/styled-components/styled-components
Stylesheet
Webpack allows you to import more than JavaScript.
Using the css-loader
you can import CSS
into a JavaScript:
Button.css
Button.js
For more information about Stylesheets and the
css-loader
see https://github.com/webpack-contrib/css-loader
CSS Modules
Setup
Modify webpack.base.babel.js
to look like:
Usage
The syntax is very similar to using a Stylesheet and this often catches people out. The key difference in CSS Modules is that you import styles to a variable.
Button.css
Button.js
IMPORTANT: if you enable this rule, stylesheets will no longer work, it's one or the other unless you include or exclude specific directories.
For more information about CSS Modules see https://github.com/css-modules/css-modules
Sass
Setup
Install sass-loader
and the node-sass
dependancy.
Modify webpack.base.babel.js
to look like:
Usage
Button.scss
Button.js
For more information about Sass and the
sass-loader
see https://github.com/webpack-contrib/sass-loader
LESS
Setup
Install less-loader
and the less
dependancy.
Modify webpack.base.babel.js
to look like:
Usage
Button.less
Button.js
For more information about LESS and the
less-loader
see https://github.com/webpack-contrib/less-loader.