{"id":13850006,"url":"https://github.com/pagarme/react-style-guide","last_synced_at":"2025-04-05T21:11:26.374Z","repository":{"id":48020503,"uuid":"95675341","full_name":"pagarme/react-style-guide","owner":"pagarme","description":"Our React Style Guide","archived":false,"fork":false,"pushed_at":"2023-07-12T02:39:03.000Z","size":124,"stargazers_count":156,"open_issues_count":5,"forks_count":47,"subscribers_count":144,"default_branch":"master","last_synced_at":"2024-05-07T06:45:14.175Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pagarme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-28T14:04:35.000Z","updated_at":"2024-06-18T18:41:17.105Z","dependencies_parsed_at":"2024-06-18T18:41:13.726Z","dependency_job_id":"4188d2a5-97f4-41e1-baeb-6ee7b46b0f23","html_url":"https://github.com/pagarme/react-style-guide","commit_stats":{"total_commits":48,"total_committers":13,"mean_commits":"3.6923076923076925","dds":0.4375,"last_synced_commit":"76524378996feb12a11cf8465b184e58ac66861d"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagarme%2Freact-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagarme%2Freact-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagarme%2Freact-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pagarme%2Freact-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pagarme","download_url":"https://codeload.github.com/pagarme/react-style-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399887,"owners_count":20932880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T20:00:55.577Z","updated_at":"2025-04-05T21:11:26.188Z","avatar_url":"https://github.com/pagarme.png","language":"JavaScript","funding_links":[],"categories":["Styleguides"],"sub_categories":["JavaScript"],"readme":"\u003cimg src=\"https://avatars1.githubusercontent.com/u/3846050?v=4\" width=\"127px\" height=\"127px\" align=\"left\"/\u003e\n\n# React Code Style Guide\n\nOur React projects' best practices\n\n\u003cbr\u003e\n\n# Introduction\n\nThis is meant to be a guide to help new developers understand\nthe React code style and best practices we adopt here at Pagar.me.\n\nAs this guide is an extension of our [JavaScript style guide][js-style-guide],\nwe **highly recommend** reading it before you continue.\n\n# Installing\n\nThe rules described in this repository are also available as a NPM package.\nTo install the package and its dependencies:\n\n```shell\n$ npm install --save-dev eslint@4.19.1 \\\n                         eslint-config-pagarme-react \\\n                         stylelint@8.0.0 \\\n                         stylelint-config-pagarme-react \\\n```\n\n\u003e The peer dependencies specified above have hardcoded versions.\n\u003e If you prefer, you can use the command\n\u003e `npm info eslint-config-pagarme-react@latest peerDependencies`\n\u003e to find the exact peer dependencies to install.\n\nTo include these rules into your project, create the following config files in your root folder:\n\n\u003e `.eslintrc`\n\n```json\n{\n  \"extends\": [\"pagarme-react\"],\n  \"env\": {\n    \"browser\": true\n  }\n}\n```\n\n\u003e `.stylelintrc`\n```\n{\n  \"extends\": [\"stylelint-config-pagarme-react\"]\n}\n```\n\n\n# Table of contents\n\n- [Component definition](#component-definition)\n- [Project organization](#project-organization)\n  - [Presentational Components](#components)\n  - [Container Components](#containers)\n  - [Page Containers](#pages)\n- [Formatting CSS](#formatting-css)\n  - [80 columns, soft tabs of 2 spaces](#80-columns-soft-tabs-of-2-spaces)\n  - [Camel case instead of dash-case for class names](#camel-case-instead-of-dash-case-for-class-names)\n  - [Never use ID and tag name as root selectors!](#never-use-id-and-tag-name-as-root-selectors)\n  - [When using multiple selectors, give each selector its own line](#when-using-multiple-selectors-give-each-selector-its-own-line)\n  - [Break lines in CSS function arguments](#break-lines-in-css-function-arguments)\n  - [When writing rules, be sure to](#when-writing-rules-be-sure-to)\n- [Design Patterns](#css-design-patterns)\n  - [The parent constrains the child](#the-parent-constrains-the-child)\n  - [The parent doesn't assume child structure](#the-parent-doesnt-assume-child-structure)\n  - [Components never leak margin](#components-never-leak-margin)\n  - [The parent spaces the children](#the-parent-spaces-the-children)\n  - [Nested classes aren't for providing scope](#nested-classes-arent-for-providing-scope)\n  - [Variables, lots of variables!](#variables-lots-of-variables)\n\n# Component definition\n\nAll components (presentation, containers or pages) should **always** be\ndefined as a directory, named with pascal casing. The main component file\nshould be `index.js`, main stylesheet `style.css`. CSS custom properties\ncan be kept in `properties.css`:\n\n```\nAwesomeCard/\n├── index.js\n├── properties.css\n└── style.css\n```\n\n* Styles should always be defined in a separate CSS file\n* Avoid prefixing or suffixing component names\n  - E.g.: `lib/pages/UserPage` or `lib/container/UserContainer`\n* On conflict rename on import time\n  - `import UserContainer from '...'`\n  - `import { User as UserContainer } from '...'`\n\n[:arrow_up: Back to top][table-of-contents]\n\n# Project organization\n\nYour project components should be separated in at least three directories:\n\n```\nawesome-react-project/\n└── src/\n   ├── components/\n   ├── containers/\n   └── pages/\n```\n\nEach of these directories have special types of components:\n\n### `components/`\n\nStateless components. Shouldn't store state. Most components in this\ndirectory will be function-based components. Stuff like buttons, inputs,\nlabels and all presentational components goes here. This components can\nalso accept functions as props and dispatch events, but no state should\nbe held inside.\n\n### `containers/`\n\nContainer components can store state. Containers are built mostly from\nthe composition of presentational components with some styles to layout\nthem together. Containers can also store internal state and access refs\nto provide additional logic, but all actions should be accepted as\ncomponent callbacks.\n\n### `pages/`\n\nPage components can store state, receive route parameters and dispatch\nRedux actions when applicable. Pages are the highest level of application's\ncomponents. They represent the application routes and most times are\ndisplayed by a router. Pages are also responsible for handling container\ncomponents callbacks and flowing data into children containers.\n\n[:arrow_up: Back to top][table-of-contents]\n\n# Code standards\n\n## Destruct your `props`\n\n### More than 2 props from an object been used in the same place should be destructed\n\n\n## Code style\n### Line length should not exceed 80 characters.\n\n### Use explanatory variables\nBad\n```js\nconst onlyNumbersRegex = /^\\d+$/\nconst validateNumber = message =\u003e value =\u003e !onlyNumbersRegex.test(value) \u0026\u0026 message\n\nvalidateNumber('error message')(1)\n```\n\nGood\n```js\nconst onlyNumbersRegex = /^\\d+$/\nconst getNumberValidation = message =\u003e value =\u003e !onlyNumbersRegex.test(value) \u0026\u0026 message\n\nconst isNumber = getNumberValidation('error message')\n\nisNumber(1)\n```\n\n### Use searchable names\nBad\n```js\nsetTimeout(doSomething, 86400000)\n```\n\nGood\n```js\nconst DAY_IN_MILLISECONDS = 86400000\n\nsetTimeout(doSomething, DAY_IN_MILLISECONDS)\n```\n\n\n## Naming\n\n### Test files must start with the class which will be tested followed by `.test`.\n\n### Class and components folders names must start with capital letter.\n\n\n## React peculiarities\n\n### Never \"promisify\" the `setState`\nIt's a small anti-pattern which can cause some problems in the component lifecicle. You can found more arguments about this in [this issue](https://github.com/facebook/react/issues/2642#issuecomment-352135607)\n\n## Mixins\n - [Do not use mixins](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)\n\n Why? Mixins introduce implicit dependencies, cause name clashes, and cause snowballing complexity. Most use cases for mixins can be accomplished in better ways via components, higher-order components, or utility modules.\n\n## Components \n\n### One line props when are more than 2 or big props\n\nBad\n```jsx\n\u003cbutton type=\"submit\" disabled onClick={() =\u003e null} className=\"aLongSpecificClassName\"\u003e\n  Click here\n\u003c/button\u003e\n\n\u003cbutton type=\"submit\" className=\"aLongSpecificClassName\"\u003e\n  Click here\n\u003c/button\u003e\n\n\u003cbutton className=\"aLongSpecificClassName\"\u003eClick here\u003c/button\u003e\n```\n\nGood\n```jsx\n\u003cbutton\n  className=\"aLongSpecificClassNameWithLasers\"\n  disabled={loading}\n  onClick={() =\u003e null}\n  type=\"submit\"\n\u003e\n  Click here\n\u003c/button\u003e\n```\n\n### One line component\nBad\n``` js\n\u003cdiv className=\"example\"\u003e\u003cspan class=\"highlight\"\u003eBad\u003c/span\u003e example\u003c/div\u003e\n```\n\nGood\n``` js\n\u003cdiv className=\"example\"\u003e\n  \u003cspan className=\"highlight\"\u003eBad\u003c/span\u003e\n  example\n\u003c/div\u003e\n```\n\n\n\n\n\n\n# CSS are modules!\n\nWe use CSS modules everywhere. CSS modules are great because they provide\nscope to CSS and allow us to create compartmentalized styles that don't\nleak to global scope. Here are our good practices of doing CSS modules:\n\n## Formatting CSS\n\n### 80 columns, soft tabs of 2 spaces\n\nKeep your code lines under 80 columns wide. This helps when opening multiple splits.\nUse soft tabs of 2 spaces to save some space! :stuck_out_tongue:\n\n### Camel case instead of dash-case for class names\n\nWith CSS modules, camel case makes much more sense:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Item = ({ children }) =\u003e\n  \u003cli className={style.circleBullet}\u003e\n    {children}\n  \u003c/li\u003e\n\nexport default Item\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.circleBullet {\n  list-style-type: disc;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### Never use ID and tag name as root selectors!\n\nUsing ID and tag name at the selector's root makes the rule to be applied\nglobally.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Item/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Item/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Item = ({ title, thumbnail }) =\u003e\n  \u003cdiv className={style.container}\u003e\n    \u003cimg src={thumbnail} alt={title} /\u003e\n  \u003c/div\u003e\n\nexport default Item\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.container \u003e img {\n  background-color: #CCCCCC;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Item/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Item/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Item = ({ title, thumbnail }) =\u003e\n  \u003cdiv className={style.container}\u003e\n    \u003cimg src={thumbnail} alt={title} /\u003e\n  \u003c/div\u003e\n\nexport default Item\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\nimg {\n  background-color: #CCCCCC;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### When using multiple selectors, give each selector its own line\n\nOrganize one selector per line, even when placing all of them at the same line doesn't\nexceed 80 columns.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003cth\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```css\n.container \u003e img,\n.container \u003e div,\n.container \u003e section {\n  background-color: #CCCCCC;\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.container \u003e img, .container \u003e div, .container \u003e section {\n  background-color: #CCCCCC;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### Break lines in CSS function arguments\n\nSometimes, not to exceed the 80 columns limit, you need to break lines. While at it, be sure to do it right after the colon, and keep at one argument per line.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003cth\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```css\n.container {\n  background-color:\n    linear-gradient(\n      0deg,\n      var(--color-light-yellow-12),\n      var(--color-light-yellow-10),\n    );\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.container {\n  background-color: linear-gradient(0deg, --color-light...\n}\n\n.container {\n  background-color: linear-gradient(\n    0deg, var(--color-light-yellow-12), var(--color-lig...\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### When writing rules, be sure to\n\n* Put a space before the opening brace `{`\n* In properties put a space after (but not before) the `:` character\n* Put closing braces `}` of rule declarations on a new line\n* Leave **ONE** blank line in between rule declarations\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003cth\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```css\n.container {\n  font-size: 12pt;\n}\n\n.thumbnail {\n  width: 160px;\n  height: 90px;\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n\n.container{\n  font-size:12pt;}\n.thumbnail{\n  width:160px;\n  height:90px;}\n\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n## CSS Design Patterns\n\n### The parent constrains the child\n\nLeaf components shouldn't constrain width or height (unless it makes\nsense). That said, most components should default to fill the parent:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Input = ({ children }) =\u003e\n  \u003cinput className={style.input}\u003e\n    {children}\n  \u003c/input\u003e\n\nexport default Input\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.input {\n  box-sizing: border-box;\n  padding: 10px;\n  width: 100%;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### The parent doesn't assume the child's structure\n\nSometimes we don't want to fill the whole width by default. An example is\nthe button component, which we want to resize itself based on title width.\n\nIn this cases, we should allow the parent component to inject styles into\nthe child component's container. The child is responsible for choosing where\nparent styles are injected.\n\nFor merging styles, always use [`classnames`][classnames] package. The\nrightmost arguments overrides the leftmost ones.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Button/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Button/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport classNames from 'classnames'\nimport style from './style.css'\n\nconst Button = ({ children, className }) =\u003e\n  \u003cbutton className={classNames(style.button, className)}\u003e\n    {children}\n  \u003c/button\u003e\n\nexport default Button\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.button {\n  box-sizing: border-box;\n  padding: 10px;\n  width: 100%;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### Components never leak margin\n\nAll components are self-contained and their final size should never suffer\nmargin leakage! This allows the components to be much more reusable!\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003cth\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n  \u003cth\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```\n|--|-content size-|--| margin\n ____________________\n|   ______________   | | margin\n|  |              |  |\n|  |              |  |\n|  |              |  |\n|  |______________|  |\n|____________________| | margin\n\n|---container size---|\n```\n\n\u003c/td\u003e\n\n\u003ctd\u003e\n\n```\n\n   |-content size-|\n    ______________\n   |              |\n   |              |\n   |              |\n   |______________|\n\n\n\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### The parent spaces the children\n\nWhen building lists or grids:\n\n* Build list/grid items as separate components\n* Use the the list/grid container to space children\n* To space them horizontally, use `margin-left`\n* To space them vertically, use `margin-top`\n* Select the `first-child` to reset margins\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/containers/Reviews/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/containers/Reviews/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Reviews = ({ items }) =\u003e\n  \u003cdiv className={style.container}\u003e\n    {items.map(item =\u003e\n      \u003cimg src={item.image} alt={item.title} /\u003e\n    )}\n  \u003c/div\u003e\n\nexport default Reviews\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.container \u003e img {\n  margin-left: 10px;\n}\n\n.container \u003e img:first-child {\n  margin-left: unset;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### Nested classes aren't for providing scope\n\nCSS modules already provides us scope. We don't need to use nested classes\nfor providing scope isolation. Use nested class selectors for modifying\nchildren based on parent class. A use case is when a component is in\nerror or success state:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eBAD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Button/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Button/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Button = ({ children }) =\u003e\n  \u003cbutton className={style.button}\u003e\n    \u003cimg className={style.icon} /\u003e\n    {children}\n  \u003c/button\u003e\n\nexport default Button\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.button {\n  box-sizing: border-box;\n  padding: 10px;\n  width: 100%;\n}\n\n.button .icon {\n  width: 22px;\n  height: 22px;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/index.js\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003elib/components/Input/style.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```js\nimport style from './style.css'\n\nconst Input = ({ value, onChange, error }) =\u003e\n  \u003cdiv className={classNames({ [style.error]: error })}\u003e\n    \u003cinput onChange={onChange} /\u003e\n    \u003cp\u003e{error}\u003c/p\u003e\n  \u003c/div\u003e\n\nexport default Input\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.error p {\n  color: red;\n  display: unset;\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n### Variables, lots of variables!\n\nWe encourage the \"variabilification\". Always define variables to increase\nreuse and make styles more consistent. The CSS4 specification defines a way\nto declare native variables. We adopted them as the standard.\n\nTo define a variable accessible globally:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003cth colspan=\"2\"\u003e\u003cstrong\u003eGOOD\u003c/strong\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003cthead\u003e\n\u003cth\u003e\u003ccode\u003eapp/App/variables.css\u003c/code\u003e\u003c/th\u003e\n\u003cth\u003e\u003ccode\u003eapp/components/Button/styles.css\u003c/code\u003e\u003c/th\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```css\n:root {\n  --color-green-1: #6CCFAE;\n  --color-green-2: #6B66B5;\n  --color-green-3: #AAC257;\n  --color-green-4: #68B5C1;\n}\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\n```css\n.container {\n  background-color:\n    linear-gradient(\n      0deg,\n      var(--color-green-1),\n      var(--color-green-2)\n    );\n}\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[:arrow_up: Back to top][table-of-contents]\n\n---\n\n[table-of-contents]: #table-of-contents\n[classnames]: https://www.npmjs.com/package/classnames\n[js-style-guide]: https://github.com/pagarme/javascript-style-guide\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagarme%2Freact-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpagarme%2Freact-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagarme%2Freact-style-guide/lists"}