{"id":14977445,"url":"https://github.com/styled-components/spec","last_synced_at":"2026-02-27T18:03:39.446Z","repository":{"id":65985115,"uuid":"64204622","full_name":"styled-components/spec","owner":"styled-components","description":"Design Requirements and Spec for a Component-oriented CSS Solution","archived":false,"fork":false,"pushed_at":"2016-07-31T07:10:46.000Z","size":4,"stargazers_count":61,"open_issues_count":4,"forks_count":3,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-29T13:11:25.915Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/styled-components.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}},"created_at":"2016-07-26T08:37:04.000Z","updated_at":"2024-05-18T16:57:05.000Z","dependencies_parsed_at":"2023-02-19T18:15:25.645Z","dependency_job_id":null,"html_url":"https://github.com/styled-components/spec","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fspec","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fspec/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fspec/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fspec/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/spec/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237116509,"owners_count":19258265,"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-09-24T13:55:40.973Z","updated_at":"2025-10-19T11:30:33.213Z","avatar_url":"https://github.com/styled-components.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Components Spec\n\n[![Join the chat at https://gitter.im/css-components/spec](https://badges.gitter.im/css-components/spec.svg)](https://gitter.im/css-components/spec?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nDesign Requirements and Spec for a Component-oriented CSS Solution\n\n_**Note** the goal of this project at the moment is not to invent yet another CSS framework or library, but to discuss broader requirements and the state of the ecosystem as a whole - see [#6](https://github.com/css-components/spec/issues/6)_\n\n---\n\n## What is CSS Components?\n\nComponents are the new way of composing user interfaces for the web, whether they're implemented as template strings in [choo](https://github.com/yoshuawuyts/choo), Components in [Angular](https://angular.io) or Classes in [React](http://reactjs.com).\n\nComponents isolate the concerns of UI functionality and styling, so you can create small blocks of functionality that are easily designed, implemented and tested then compose a more complicated website or application from them without losing the simplicity.\n\nWhile this challenges traditionally held beliefs about the separation of structure and style, and the technical separation of CSS and JavaScript, we believe it's the future. Read @chantastic's [blog post](https://medium.com/learnreact/scale-fud-and-style-components-c0ce87ec9772) for more background.\n\n---\n\nThere are several competing solutions for how to effectively write and publish CSS with Components, including:\n\n* CSS in JS (Aphrodite, JSS, etc.)\n* Inline Styles (Radium, etc.)\n* CSS Modules (+ postCSS, etc.)\n* Traditional Stylesheets (+ LESS, SASS etc.)\n\nAt the moment the community is fragmented, and none of these solutions consistently solve all the concerns. \n\nThe ideal solution would likely take inspiration from all of the above. See our [comparison](https://github.com/css-components/comparison) repo for a more comprehensive overview of the state of current solutions.\n\n---\n\n## Requirements\n\n_**WIP** please discuss requirements in the issues!_\n\nA complete CSS Components solution would include support for the following:\n\n* work well for open source components that are themeable and not opinionated about build requirements (see [#3](https://github.com/css-components/spec/issues/3)\n* has a good solution for overriding styles on child elements (see [#5](https://github.com/css-components/spec/issues/5)\n* server side rendering\n* don’t break inline styles\n* fast at runtime (pre-buildable?)\n* styles are colocated with components\n* isolated as much as possible (styles == component)\n* overridable and preferably not opinionated about how (we’re talking about CSS after all)\n* supports css stuff like `:hover`, media queries (i.e. you shouldn’t be blocked from doing anything you can do with css)\n* doesn’t create a bunch of wrapper components\n* small and lightweight enough that you don't think twice about having it as a dependency\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fspec","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Fspec","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fspec/lists"}