Revolutionizing CSS-in-JS: The Rise of Goober
As the complexity of websites continues to grow, managing designs has become a daunting task. Traditional CSS lacks the concept of modules, making it difficult to divide code into separate chunks. The introduction of component-based libraries like React and Vue.js has highlighted the need for a similar solution for CSS.
The Emergence of CSS-in-JS
To address this need, developers turned to CSS-in-JS solutions like emotion and styled-components. However, these libraries come with a significant drawback – they take up a substantial amount of space, ranging from 10KB to 20KB. This can significantly impact page load times and, ultimately, a website’s search engine ranking.
Goober: A Lightweight Alternative
Cristian Bote’s goober offers a lightweight alternative, taking up less than 1KB of space. This makes it an attractive choice for high-performance sites. Goober’s features include:
- Tiny footprint: Less than 1KB in size
- Compatibility: Works with vanilla JavaScript and popular frontend libraries/frameworks like React, Vue.js, Angular, Svelte, and more
- Server-side rendering support
- Growing community: Over 24 active contributors
- Customizable CSS properties: Through props or JSON/Object
- Targeted style tag appending
- Code reuse: Easily separate code for entire documents and specific sections
- Animation reuse: Keyframes enable animation reuse across components
- Babel plugin: Transforms codes like styled.tag to goober’s understandable format
- Gatsby integration: Official plugin available
- CSS parsing: Supports nested rules with pseudo selectors and media queries
- Smart client-side hydration: Lazy loading for improved performance
- Autoprefixer: Ensures CSS code works on all web browsers
Benchmarks: Goober vs. Emotion vs. Styled-Components
Goober’s performance was put to the test against its popular competitors. The results were impressive, with goober processing 39,348 ops/sec, closely trailing emotion’s 46,504 ops/sec. Considering goober’s smaller footprint and newer status, this is a remarkable achievement.
Getting Started with Goober
To integrate goober with React, follow these simple steps:
- Create a new React app using Facebook’s create-react-app project.
- Install the goober library.
- Import the required packages and call the setup() method.
- Create a simple web page with a heading and three paragraphs, utilizing goober’s styled() function.
Customizing Styles with Props
Goober allows for easy customization through props. By setting desired values using props, you can access them inside the template literals of the styled() function.
Global Styles with Glob
Goober’s glob function enables global styles that apply to the entire document. This is particularly useful for including external fonts or writing “CSS Reset” rules.
Missing styled.tag?
Goober doesn’t support styled.tag by default, but a babel plugin is available to convert styled.tag references into a format understandable by goober.
Why Choose Goober?
Goober is ideal for scenarios where:
- Fast page loads are crucial
- High traffic websites require efficient solutions
- A lightweight alternative to popular CSS-in-JS libraries is needed
With its tiny footprint and impressive feature set, goober is poised to revolutionize the world of CSS-in-JS.