├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 css-components 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Components Spec 2 | 3 | [![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | Design Requirements and Spec for a Component-oriented CSS Solution 6 | 7 | _**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)_ 8 | 9 | --- 10 | 11 | ## What is CSS Components? 12 | 13 | Components 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). 14 | 15 | Components 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. 16 | 17 | While 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. 18 | 19 | --- 20 | 21 | There are several competing solutions for how to effectively write and publish CSS with Components, including: 22 | 23 | * CSS in JS (Aphrodite, JSS, etc.) 24 | * Inline Styles (Radium, etc.) 25 | * CSS Modules (+ postCSS, etc.) 26 | * Traditional Stylesheets (+ LESS, SASS etc.) 27 | 28 | At the moment the community is fragmented, and none of these solutions consistently solve all the concerns. 29 | 30 | The 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. 31 | 32 | --- 33 | 34 | ## Requirements 35 | 36 | _**WIP** please discuss requirements in the issues!_ 37 | 38 | A complete CSS Components solution would include support for the following: 39 | 40 | * 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) 41 | * has a good solution for overriding styles on child elements (see [#5](https://github.com/css-components/spec/issues/5) 42 | * server side rendering 43 | * don’t break inline styles 44 | * fast at runtime (pre-buildable?) 45 | * styles are colocated with components 46 | * isolated as much as possible (styles == component) 47 | * overridable and preferably not opinionated about how (we’re talking about CSS after all) 48 | * supports css stuff like `:hover`, media queries (i.e. you shouldn’t be blocked from doing anything you can do with css) 49 | * doesn’t create a bunch of wrapper components 50 | * small and lightweight enough that you don't think twice about having it as a dependency 51 | 52 | --------------------------------------------------------------------------------