{"id":19832340,"url":"https://github.com/xyzhanjiang/stylesheet","last_synced_at":"2025-10-25T21:14:15.704Z","repository":{"id":35171634,"uuid":"39428730","full_name":"xyzhanjiang/stylesheet","owner":"xyzhanjiang","description":"CSS style guide","archived":false,"fork":false,"pushed_at":"2020-07-15T03:55:32.000Z","size":18,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T15:27:28.587Z","etag":null,"topics":["css","styleguide","stylesheet"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xyzhanjiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-21T06:40:47.000Z","updated_at":"2023-06-19T00:38:15.000Z","dependencies_parsed_at":"2022-08-04T00:15:15.579Z","dependency_job_id":null,"html_url":"https://github.com/xyzhanjiang/stylesheet","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/xyzhanjiang%2Fstylesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyzhanjiang%2Fstylesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyzhanjiang%2Fstylesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xyzhanjiang%2Fstylesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xyzhanjiang","download_url":"https://codeload.github.com/xyzhanjiang/stylesheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251907099,"owners_count":21663216,"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":["css","styleguide","stylesheet"],"created_at":"2024-11-12T11:37:28.730Z","updated_at":"2025-10-25T21:14:10.671Z","avatar_url":"https://github.com/xyzhanjiang.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# My CSS Style Guide {\n\nFor my work\n\n## Table of contents\n\n* [Comments](#comments)\n* [Formatting](#formatting)\n* [Selectors](#selectors)\n* [Declarations](#declarations)\n* [Values](#values)\n* [Vendor Prefixes](#vendor-prefixes)\n* [ClassName](#classname)\n* [Split](#split)\n* [Hacks](#hacks)\n* [Vertical Centering](#vertical-centering)\n\n## Comments\n\n``` css\n/* ======================================================================\n   Block comment\n   Block comment\n   ====================================================================== */\n\n/* Block comment\n   ====================================================================== */\n\n/* Inline comment */\n\n.selector {\n  margin: .5em; /* Inline comment */\n}\n```\n\n## Formatting\n\n1. 2 spaces.\n\n``` css\n@charset \"utf-8\";\n\n@media (min-width: 992px) {\n  .selector-1,\n  .selector-2 {\n    color: rgba(0, 0, 0, .5);\n  }\n\n  .selector-3 {\n    padding: 10px;\n  }\n}\n```\n\n## Selectors\n\n1. No `div` or `span`.\n2. No ID selectors.\n\n``` css\n/* bad */\ndiv,\na span {\n  display: none;\n}\n\n#id {\n  font-size: 14px;\n}\n\n.selector-a .selector-b .selector-c .selector-d {\n  margin: 0;\n}\n\n/* good */\na:hover,\na:focus {\n  color: red;\n}\n\nlabel + input[type=\"radio\"] {\n  /* ^_^ */\n}\n\n.list \u003e li {\n  margin-bottom: 2px;\n}\n```\n\n## Declarations\n\n1. Give each declaration its own line.\n1. Put a space after the : character.\n1. Make sure the declarations are in alphabetical order by the property.\n1. Don't omit the semi-colon at the end of the last declaration in a declaration block.\n\n``` css\n.selector {\n  box-sizing: border-box;\n  color: #666;\n  display: inline-block;\n  padding: 10px;\n}\n```\n\n## Values\n\n1. Double quotes.\n1. Lowercase.\n\n``` css\n.selector {\n  background-image: url(i/bg.gif);\n  color: #f00;\n  font-family: \"Microsoft Yahei\", sans-serif;\n  margin: -.25em;\n  transition: all 0s;\n}\n\n.selector: before {\n  content: \"\\00a0\";\n}\n```\n\n## Vendor prefixes\n\nUse [Autoprefixer](https://twitter.com/autoprefixer) to add vendor prefixes to rules.\n\n``` css\n.selector {\n  display: flex;\n}\n```\n\nwill compile to\n\n``` css\n.selector {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex\n}\n```\n\n## ClassName\n\n1. Lowercase and dashes.\n1. Meaningful names.\n\n``` css\n.btn-primary {\n  margin: 0;\n}\n```\n\n### JavaScript hooks\n\nUse js-* classes to denote behavior (as opposed to style), but keep these classes out of your CSS.\n\n``` html\n\u003cdiv class=\"js-box\"\u003e\u003c/div\u003e\n```\n\n## Split\n\n``` css\n/* bad */\n.btn {\n  background-color: #efefef;\n  border: 1px solid #ccc;\n  color: #36f;\n  display: block;\n  height: 24px;\n  line-height: 24px;\n  margin-left: 8px;\n  padding: 0 12px;\n}\n\n/* good */\n.btn {\n  background-color: #efefef;\n  border: 1px solid #ccc;\n  color: #36f;\n  display: block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 12px;\n}\n\n.margin-left-8 {\n  margin-left: 8px;\n}\n```\n\n## Hacks\n\nNo IE 10-\n\n## Vertical Centering\n\n``` css\n.selector {\n  position: fixed;\n  top: 50%;\n  transform: translateY(-50%);\n}\n```\n\n# }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyzhanjiang%2Fstylesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxyzhanjiang%2Fstylesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxyzhanjiang%2Fstylesheet/lists"}