This content originally appeared on DEV Community and was authored by Damir Drempetić
Choosing between numerous options for styling your app could be a project in and of itself. ?
I've tried several styling solutions and approaches on frontend like:
- Vanilla CSS
- CSS extensions like Sass or Less
- CSS modules (and Sass)
Projects which used them were written either with Vanilla JS or with some modern JavaScript frameworks like AngularJS, Angular 4, React ⚛️ or even React Native.
After all I have a huge favourite regarding styling options world which is not mentioned above. I would vote for it on new project anytime (sorry, there are local elections ?️ soon here in Croatia).
To finally get closer to the point, I like to write my styles just as rest of the app. In JavaScript. Which means I use the same programming language and the same syntax both for logic and for styles. This is really cool, but it's not the main motive behind it. It's because I find JavaScript much more powerful ? and capable than CSS.
JavaScript brings more of the engineering flavour into the app styling process. And it's possible with CSS-in-JS solutions, or shorter JSS.
I used JSS for the first time while I was working on projects built with Material UI. In their docs, you can find out why they use such approach after abandoning Less and custom solution inline-styles. Actually they did some pretty interesting comparison ? when choosing styling solution.
I've mentioned engineering flavour so let's show some examples of what I thought.
Variables
You can simply keep any style in a variable.
const COLOR_PRIMARY = "black";
const COLOR_SECONDARY = "#f0f0f0";
Also group them into a JS object.
baseTitle: {
fontSize: 24,
fontWeight: 600,
color: COLOR_PRIMARY
}
You could think now: nothing special, I can do that with extended CSS too. Be patient... ?
Spreading, default properties and overriding
Let's say we want to extend this basic title for some other use.
sectionTitle: {
...baseTitle,
//override font weight from base title
fontWeight: 800,
//extend base title
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
fontStyle: 'italic',
}
Notice that you don't need to learn any new syntax, you actually write CSS but you just use
camelCaseinstead of thekebab-case:font-size➡️fontSize. And have JS power on top of it.
Themes
Then, you could also keep all your reusable styles in one place and build your whole theme - which is simply JS object.
const theme = {
backgroundColor: COLOR_PRIMARY,
color: COLOR_SECONDARY,
...
};
That theme could be considered a config file but for styles ?. Use Material UI theme for inspiration. From breakpoints, typography to colour palette and spacings.
Integrate JSS with React
There is a JSS Core library which can be used in any Javascript app, but React developers will be more interested in React-JSS.
Dynamic Values
Give attention to Dynamic values .
JSS uses Hooks API where you can use hooks like createUseStyles.
There is a cool example I will borrow from JSS docs about how to start with it. I will just separate a style from components, because it is always a good practice not to make a big clutter in one file. Also, it reminds of the CSS modules approach which have a separate isolated style for each component.
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
myButton: {
padding: props => props.spacing
},
myLabel: props => ({
display: 'block',
color: props.labelColor,
fontWeight: props.fontWeight,
fontStyle: props.fontStyle
})
})
Notice how elegantly you can change the style depending on props values passed from the component.
import React from 'react'
const Button = ({children, ...props}) => {
const classes = useStyles(props)
return (
<button className={classes.myButton}>
<span className={classes.myLabel}>{children}</span>
</button>
)
}
Button.defaultProps = {
spacing: 10,
fontWeight: 'bold',
labelColor: 'red'
}
const App = () => <Button fontStyle="italic">Submit</Button>
Theming
Besides hook for creating style there is the useTheme combined with a ThemeProvider wrapper. It also provides a theming solution which makes it a lot easier to start writing themed apps with reusable styles, and to quick start your new project.
Would you give it a try?
❓ What are you thoughts?
❓ Which styling solution do you prefer?
❓ How do you deal with theming and reusable styles?
This content originally appeared on DEV Community and was authored by Damir Drempetić
Damir Drempetić | Sciencx (2021-05-10T09:19:20+00:00) Style your frontend with an engineering flavour by using JSS. Retrieved from https://www.scien.cx/2021/05/10/style-your-frontend-with-an-engineering-flavour-by-using-jss/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.