This content originally appeared on JavaScript January and was authored by Emily Freeman
I am incredibly grateful to Becca Lee for this amazing article.
So, you've got an app to build. How are you going to style it? With the ever-growing number of styling solutions in the React ecosystem, it can be overwhelming to choose a strategy. If you're a React veteran, you may be looking to see if the next big style library is a fit for your project, or if you're new to React, you may be trying to figure out where to even begin.
How do you navigate all the possibilities and find the library, language, or framework that will work best for your team and your project? Here, we'll talk about some of the general options for styling a React project and set you up with strategies to help you find the best fit for your project and your team.
CSS and Sass
I love CSS (and I really love Sass), but when I was getting started with React I quickly realized that working with CSS in React is a different beast than working with it in an app that uses separate JS files, HTML files, and style sheets.
When you build an app in React, you're essentially creating a single-page app. Because of this, your stylesheets may end up more... global than you might expect. Even if you're creating separate style sheets for each component and importing them only into that component, because of the nature of the single-page app and the cascading style sheet, your CSS attributes for one component may be overridden by CSS attributes meant for another.
For example, let's say you're building a homepage with a hero image and you've written your stylesheets to reference the <p> tag itself, rather than a class name or id. Once you import your hero component into your homepage component, your homepage <p> tag styling may take on the styling attributes of your hero <p> tag styling. Not ideal!
So yes, you absolutely can use CSS and Sass, but you'll need to be careful. Here are a few things to consider when you're using CSS or Sass with React (Many of these aren't React-specific, but are definitely compounded by React):
- How will you set up practices that ensure the team isn't inadvertently overriding styling code?
- What file structure will you use to keep the styles easy to find and work with?
- Will you utilize CSS modules to scope your style sheets to each component?
- Will you use a BEM (block element modifier) or similar naming convention and limit style sheets to use only class names?
- What is your team's styling skill level? Are they CSS masters? Are they beginners? Could a styling library make things easier, or would it disrupt the flow of your CSS-savvy developers?
Inline Styling
React gives you the ability to style your components in-line with JSX. While this helps avoid many of the pitfalls developers may face using style sheets with React, many find it to be... a little clunky. For me, there's something about the camel casing and the object format that has never felt comfortable. But this is about you, so if you dig it, go forth and style!
Style Libraries & Frameworks
If you can absolutely get the job done with CSS/Sass or inline styling, why bring in a style library or framework? Well, there are a lot of reasons.
- They can provide pre-built components that let you build faster.
- They can provide more consistency in design
- They can provide more consistency in your code
- They can provide a shorthand (like utility classes) to help devs style faster
- They can help you keep your styles scoped to your component
Researching Style Libraries and Frameworks
There are a lot of style libraries and frameworks out there, and a lot of things to consider when making your choice. As you research, keep the following in mind:
React vs Vanilla JavaScript
Will your app be built completely in React? If so, a React-based style library can be a great choice as it will be designed to work with the quirks of the framework. Don't want your styling to be tied to React? You could consider a vanilla-JS-based library or go with the CSS/Sass options outlined above.
Components
Do you want lots of pre-built components you can use to plug and play? Or do you want something more bare-bones? Does your dev team like building components from scratch or would they rather pop in a pre-built component and move on? Does the library have the types of components you'll need for your project? Are there any important ones missing?
Design
Will your design team want to customize every detail or will they be happy to work within the constraints of a style or component library? Will you be able to customize the provided components as-needed to match your design specs? How much time will component customization add to your process vs building from scratch? Do you like the design of the components provided? Do you want design provided by the library/framework?
Syntax
Are your devs eager for a less-verbose way to style their app? Is shorthand appealing or do you have a team of devs who know most CSS attributes by heart and are going to be pretty irked having to look up new syntax constantly? Do you want a class-based library or a component-based one?
Other Libraries
Will it play nicely with the other libraries you're using in the project? If you're using something like Formik to handle forms, do you need the form elements to be mega customizable? Or will you be customizing Formik-provided components? If you're going to be customizing library-provided components, will you use a library like emotion) to help you, or will you use traditional CSS style sheets and class names? Will your other libraries bring in another style library as a dependency? What will fit best into your project?
Test Driving A Library or Framework
Reading documentation is a great first step, but it's hard to get a feel for a library without actually building something with it. I've had plenty of occasions where I've loved a library on paper, but found it really difficult to work with when I actually started coding with it.
Start by picking a component (or page) to style. Ideally, use designer-provided redlines so you can see if you're able to match the design spec easily with the library at hand. I personally love working with a login page since they typically include a lot of different elements (forms, buttons, links, divs, flexbox-y layouts, etc).
While you code, pay attention to the pain points and the highlights and make notes. This will give you some great comparison points as you test libraries. Your lists of pros and cons can help take your choice from a gut feeling to a clear winner.
As you're taking the library or framework out for a test drive consider the following:
- Was set up easy or difficult?
- How was the documentation? Was the information thorough or sparse? Would it be easy for folks of all skill levels to jump into or does it make a lot of assumptions about someone's knowledge base?
- Does the library have all the features you need? Are there things missing and that will require major workarounds? Are there any dealbreakers?
- Did you hate it? Do you love it? Was it intuitive for you? Did it start out great and then get gnarly? Or did it get off to a rough start but then feel great?
- How easy was it to match design spec while using the library?
- How frequently do you have to jump out of the core patterns of the library to achieve your design and code goals?
- Will it play nicely with the other libraries you'll be using on the project? Is it built off of another library like Emotion that will help you hook into the provided components?
Making the Final Choice
After researching, test driving, and gathering up your findings, check in with the other folks who are working on the project and share your experiences and notes. Make a recommendation for what you think is best, and suggest a test drive to anyone who may want to know more. Share your learning with the team and provide documentation on any pain points or gotchas to help them assess.
After you've come together and made a decision, you can feel confident that you've made a great decision for your project and your team. Happy styling!
This content originally appeared on JavaScript January and was authored by Emily Freeman
Emily Freeman | Sciencx (2020-01-10T13:14:00+00:00) Choosing a Style Library for Your React Project. Retrieved from https://www.scien.cx/2020/01/10/choosing-a-style-library-for-your-react-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.