CSS Styles to follow when building Scalable Projects

Let us assume we are creating a React Project. When we are in the requirement phase and are discussing the architecture, We will ensure to discuss more on CSS styles in our project. We indeed have multiple approaches to go ahead in writing styles and each style requirement would be unique based on the use cases of our project.

We could either go ahead with creating our own styles through Inline Styles, Plain CSS Styles, SASS/SCSS(Synthetically Awesome Style Sheets), CSS modules, or CSS in JS. Or We could go ahead with frameworks that comprise several CSS stylesheets ready for use by web developers and designers. The stylesheets are prepped for use for standard web design functions: setting colors, layout, fonts, navbars, etc. Few of them include BootStrap, Material UI, Ant Design Library, Tailwind CSS, Bulma, etc.,

Since I am focussing here more on building on an open source project for Real Dev Squad which definitely involve us learning details and building projects rather than using pre-built frameworks where we get built components. I would be focussing on

1. CSS
2. SASS/SCSS
3. CSS in JS

CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

We have observed in most react side projects, We create stylesheets and end up importing them to our component. It is easy and common practice for most of beginners who are learning React.

CSS example, Ref: https://github.com/Real-Dev-Squad/website-welcome/blob/develop/css/navbar.css

Pros:

• Developers get a chance to strengthen their CSS skills
• We get to utilize all the tools from modern CSS
• Developers who have started learning CSS would be able to contribute as well

Cons:

• We end up creating a lot of boilerplate code which are already available via frameworks
• We need to ensure to follow proper prefixing and variable class names generation
• High possibility of affecting other classes if and when we try to modify the tags/elements since it is not scoped.

SASS/SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS.

SASS allows us to write styles in two different kinds of stylesheets, with the extensions .scss and .sass.

SCSS styles are written in a similar syntax to normal CSS. however, SASS styles do not require us to use open and closing brackets when writing style rules. SCSS also provides us built-in variables( $base-color: #c6538c;), nesting, extends, mixins, partials, operators

Navbar built using SCSS Ref: https://github.com/Real-Dev-Squad/website-status/blob/develop/src/components/navBar/navBar.module.scss

https://status.realdevsquad.com/

As we observe above, a few key points to notice here would extensively use of variables, and mathematically calculated generated values, better nesting abilities. Most of the industry-grade projects which I have noticed have been following SASS/SCSS for the above purpose.

Pros:

• SCSS adds structure to your styles, no matter how many files are created, you can compile them into one CSS file, so you have the freedom to organize the project however you want.
• The @import keyword in SCSS allows you to import an SCSS file into another SCSS file
• Easier following for variable name convention, better nesting support

Cons:

• Need to install node-sass@4.13.1 and set up the script to compile.
• It does involve more knowledge of SCSS to contribute to the project

CSS in JS

CSS-in-JS libraries provide us with a new approach to writing CSS. They aim to tackle the limitations of CSS, such as the lack of dynamic functionality, scoping, and portability, providing better performance when it is Server Side Rendered, which we can build as an object or function. We could use Styled components, StyledJSX, and Emotions which support CSS in JS.

Example of Styled Components Ref: https://github.com/Real-Dev-Squad/website-crypto/blob/develop/components/header/index.js

Pros:

• CSS in JS provides a more atomic way to scope styles only to the components that use them
• Inlining the styles during SSR provides an increase in page loading performance metrics such as FCP (First Contentful Paint), because rendering is not blocked by fetching a separate .css file from the server
• Dynamic Styling is easier to implement as changes in styles could be controlled by props
• Presence of unused styles won’t affect performance

Cons:

• An additional runtime library is required for handling dynamic styling in the browser
• We end up writing CSS in JS, thus few specific properties which are exclusive to modern CSS would work differently.
• CSS-in-JS also often makes little sense if your page has limited JavaScript to begin with

As I believe I have mentioned before, we need to closely observe our problem statement and how useful the above-mentioned styles would help in scaling the project before proceeding with choosing one.

I believe this would help someone, open to constructive feedback. I have no copyright to any image posted here 🤷‍♂️. The Source of images is from RDS and google😅

Happy Coding :)