{"id":21890807,"url":"https://github.com/chantastic/rocss","last_synced_at":"2025-09-13T12:36:06.026Z","repository":{"id":21299411,"uuid":"24615688","full_name":"chantastic/rocss","owner":"chantastic","description":"Resource Oriented CSS","archived":false,"fork":false,"pushed_at":"2014-10-13T18:40:39.000Z","size":212,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T22:28:28.201Z","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/chantastic.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":"2014-09-29T22:38:15.000Z","updated_at":"2017-09-17T18:28:13.000Z","dependencies_parsed_at":"2022-08-20T15:20:47.361Z","dependency_job_id":null,"html_url":"https://github.com/chantastic/rocss","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/chantastic%2Frocss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Frocss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Frocss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Frocss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/rocss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"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-11-28T12:16:52.003Z","updated_at":"2025-03-22T03:11:42.573Z","avatar_url":"https://github.com/chantastic.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"ROCSS\n=====\n\nA sensible approach to resource heavy stylesheets.\n\n## TL;DR\n\nContemporary applications represent resource data in two ways:\n\n1. As a detailed description\n1. As an item in a list\n\nMost applications don't have a pattern for writing CSS classes in a way that\nreflects this UI pattern. I recommend this:\n\n```css\n.resource {}\n.resource-item {}\n```\n\nIn Rails, that might look like so:\n\n```css\n.resource {}\n._resource {}\n```\n\n## The Basic Idea\n\nThere are two ways that we see a resource represented in RESTful systems.\n\n* Single Resource          — `\"resource\":   { \"id\": 1 }`\n* Resource Collection Item — `\"resources\": [{ \"id\": 1 }]`\n\nWhen put in a UI, these rarely look similar. The first is used to _show_ the\nfull detail of a resource, while the second represents an actionable subset of\nthat resources data.\n\nThe canonical example of this is an email client:\n\n```\n+----------------------------------------------------------------------------------+\n|                                   * Email *                                      |\n+----------------------------------------------------------------------------------+\n|                              |                                                   |\n|  Someone:  Totally Impo...  \u003c   From: Someone                                    |\n|                              |  To:   Me                                         |\n|------------------------------|                                                   |\n|                              |  Subject: Totally important                       |\n|  Mistress: We really ne...   |                                                   |\n|                              |                                                   |\n|------------------------------|  Hello Me,                                        |\n|                              |                                                   |\n|  Buddy: Bro! check it out!   |  This is totally an important message. Take ...   |\n|                              |                                                   |\n+----------------------------------------------------------------------------------+\n```\n\nOn the left there you have _item_ representations of resources with a _full_\nresource on the right.\n\nThe class names for each presentation should be consistent from resource to\nresource. I use this:\n\n```css\n.resource {}       /* .email {}      */\n.resource-item {}  /* .email-item {} */\n```\n\n### Don't like -item?\n\nSome people don't the `-item` suffix. Fortunately, that part\nreally isn't important. Name it however you like.\n\nA pattern that I like in Rails is to use an `_` prefixed. It's less\ncommunicative but maps well with Rails conventions.\n\n```css\n.person  {}\n._person {}\n```\n\n_Hat-tip to @danott_\n\n## A Single Resource (show)\n\nName a single resource after its resource name.\n\nJSON\n```json\n{\n  \"person\": {}\n}\n```\n\nHTML\n```html\n\u003cdiv class=\"person\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Naming A Resource Collection Item (list)\n\nName a collection item after its singularized resource name with a `-item` suffix.\n\nJSON\n```json\n{\n  \"people\": [\n    { \"id\": 1 },\n    { \"id\": 2 }\n  ]\n}\n```\n\nHTML\n```html\n\u003cul\u003e\n  \u003cli class=\"person-item\"\u003e...\u003c/li\u003e\n  \u003cli class=\"person-item\"\u003e...\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Example: Email Client (Single and Collection)\n\n\nJSON\n```json\n{\n  \"email\": [\n    { \"id\": 1, \"from\": \"Someone\", ... },\n    { \"id\": 2, \"from\": \"Mistress\", ... },\n    { \"id\": 3, \"from\": \"Buddy\", ... }\n  ]\n}\n```\n\nHTML\n```html\n\u003cdiv class=\"email\" id=\"1\"\u003e\n  \u003ch4\u003eFrom: {email.from}\u003c/h4\u003e\n  \u003ch4\u003eSubject: {email.subject}\u003c/h4\u003e\n\n  \u003cp\u003eFrom: {email.body}\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cul\u003e\n  \u003cli class=\"email-item\" id=\"2\"\u003e\n    {email.from}\n  \u003c/li\u003e\n  \u003cli class=\"email-item\" id=\"3\"\u003e\n    {email.from}\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Nested Resources\n\nNested resources become very natural to handle with this pattern.\n\nJSON\n```json\n{\n  \"person\": {\n    \"favorite_things\": [\n      { \"name\": \"raindrops on roses\" },\n      { \"name\": \"whiskers on kittens\" }\n    ]\n  }\n}\n```\n\nHTML\n```html\n\u003cdiv class=\"person\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"favorite-thing\"\u003e...\u003c/li\u003e\n    \u003cli class=\"favorite-thing\"\u003e...\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Nested Resources with Relationship-Specific Style\n\nCreate overrides for specific relationships using OOCSS-style sub-classing..\n\nJSON\n```json\n{\n  \"person\": {\n    \"favorite_things\": [\n      { \"name\": \"raindrops on roses\" },\n      { \"name\": \"whiskers on kittens\" }\n    ]\n  }\n}\n```\n\nHTML\n```html\n\u003cdiv class=\"person\"\u003e\n  \u003cul\u003e\n    \u003cli class=\"favorite-thing person-favorite-thing\"\u003e...\u003c/li\u003e\n    \u003cli class=\"favorite-thing person-favorite-thing\"\u003e...\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nCSS\n```css\n.favorite-thing {\n  // default styles\n}\n\n.person-favorite-thing {\n  // .person specific .favorite-thing extensions\n}\n```\n\n*DO NOT cascade from a parent*\n\n```css\n/* BAD */\n\n.favorite-thing {}\n\n.person .favorite-thing {}\n```\n\n#### Why No Cascade?\n\nThe only thing that `person` and `favorite-thing` share is layout proximity. Change\nthe layout, break the stylesheet. Don't be confused; proximity is coincidental.\n\nIf `favorite-thing` needs different rules, subclass it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Frocss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Frocss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Frocss/lists"}