with one click
css
Apply Google CSS style guide conventions to CSS code
Menu
Apply Google CSS style guide conventions to CSS code
| name | css |
| description | Apply Google CSS style guide conventions to CSS code |
This skill applies Google's CSS style guide conventions to ensure clean, maintainable, and efficient CSS code.
Use valid CSS code tested with W3C CSS Validator:
Use functional or generic class names, not presentational:
/* Not recommended: presentational */
.button-green {}
.clear {}
.yee-1901 {} /* meaningless */
/* Recommended: functional */
.gallery {}
.login {}
.video {}
.aux {} /* generic helper */
.alt {} /* generic alternative */
IDs have high specificity and reduce reusability:
/* Not recommended */
#example {}
#navigation {}
/* Recommended */
.example {}
.navigation {}
Use short but meaningful names:
/* Not recommended */
.navigation {}
.atr {}
/* Recommended */
.nav {}
.author {}
Use hyphens as delimiters:
/* Not recommended */
.demoimage {}
.error_status {}
/* Recommended */
.video-id {}
.ads-sample {}
Use prefixes for large projects (optional):
/* For namespacing in large projects */
.adw-help {} /* AdWords */
.maia-note {} /* Maia */
Don't qualify class names with type selectors:
/* Not recommended */
ul.example {}
div.error {}
/* Recommended */
.example {}
.error {}
Reason: Performance and flexibility
Use shorthand when possible:
/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
Omit units after 0 values:
/* Not recommended */
margin: 0px;
padding: 0em;
/* Recommended */
margin: 0;
padding: 0;
/* Exception: required units */
flex: 0px; /* flex-basis requires unit */
flex: 1 1 0px; /* needed in IE11 */
Include leading 0s:
/* Not recommended */
font-size: .8em;
/* Recommended */
font-size: 0.8em;
Use 3-character hex when possible:
/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;
Use lowercase:
/* Not recommended */
color: #E5E5E5;
/* Recommended */
color: #e5e5e5;
Avoid !important - use specificity instead:
/* Not recommended */
.example {
font-weight: bold !important;
}
/* Recommended */
.example {
font-weight: bold;
}
/* If override needed, increase specificity */
.container .example {
font-weight: bold;
}
Avoid CSS hacks and user agent detection - use progressive enhancement:
/* Not recommended */
.example {
width: 100px\9; /* IE hack */
}
/* Recommended: Use feature queries */
@supports (display: grid) {
.example {
display: grid;
}
}
Indent by 2 spaces (no tabs):
.example {
color: blue;
}
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
Alphabetize declarations for consistency (optional):
/* Recommended */
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
Note: Ignore vendor prefixes for sorting, but keep them grouped
Always end declarations with semicolons:
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}
Single space after colon, no space before:
/* Not recommended */
h3 {
font-weight:bold;
}
/* Recommended */
h3 {
font-weight: bold;
}
Single space before opening brace, same line:
/* Not recommended: missing space */
.video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break */
.video
{
margin-top: 1em;
}
/* Recommended */
.video {
margin-top: 1em;
}
New line for each selector and declaration:
/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
Blank line between rules:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
Use single quotes for attribute selectors and property values:
/* Not recommended */
@import url("https://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(https://www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
/* Exception: @charset requires double quotes */
@charset "utf-8";
Do not quote URLs:
/* Recommended */
background: url(images/bg.png);
Group related rules with comments (optional):
/* Header */
.adw-header {}
.adw-header-logo {}
/* Footer */
.adw-footer {}
/* Gallery */
.adw-gallery {}
.adw-gallery-item {}
Organize CSS files logically:
/* Base styles */
html,
body {
margin: 0;
padding: 0;
}
/* Typography */
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Components */
.button {
padding: 10px 20px;
}
/* Utilities */
.hidden {
display: none;
}
Keep specificity low for easier overrides:
/* Not recommended: too specific */
html body div.container ul.nav li.item a.link {}
/* Recommended */
.nav-link {}
/* Not recommended */
.header .nav .menu .item .link {
color: blue;
}
/* Recommended */
.nav-link {
color: blue;
}
/* Base styles for mobile */
.container {
width: 100%;
}
/* Progressively enhance for larger screens */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 1024px) {
.container {
width: 960px;
}
}
Create utility classes for common patterns:
/* Layout utilities */
.flex {
display: flex;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
| Rule | Convention |
|---|---|
| Indentation | 2 spaces |
| Case | Lowercase |
| Quotes | Single (') except @charset |
| Semicolons | Required after every declaration |
| Units | Omit after 0 |
| Leading zeros | Always include (0.8em) |
| Hex colors | 3-char when possible, lowercase |
| ID selectors | Avoid |
| Type selectors | Don't qualify classes |
!important | Avoid |
| Property order | Alphabetical (optional) |
| Line breaks | New line per selector/declaration |
| Rule separation | Blank line between rules |
| Comments | Section comments for organization |
.button {
background-color: #007bff;
border: 0;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
padding: 0.5rem 1rem;
text-align: center;
text-decoration: none;
}
.button:hover {
background-color: #0056b3;
}
.button-secondary {
background-color: #6c757d;
}
.button-large {
font-size: 1.25rem;
padding: 0.75rem 1.5rem;
}
.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1.5rem;
}
.card-header {
border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.card-title {
font-size: 1.5rem;
margin: 0;
}
.card-body {
line-height: 1.6;
}
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(12, 1fr);
}
.col-4 {
grid-column: span 4;
}
.col-6 {
grid-column: span 6;
}
.col-12 {
grid-column: span 12;
}
references/css-detailed.md - Advanced CSS patterns, methodologies, and best practicesWrite CSS that is:
@charset)This skill should be used when the user asks to "optimize a website for SEO", "improve search engine rankings", "apply SEO best practices", "do on-page SEO", or needs guidance on technical SEO, keyword research, content optimization, or link building strategies.
This skill should be used when the user asks to "integrate GitHub Copilot into an app", "use the Copilot SDK", "build a Copilot-powered agent", "embed Copilot in a service", or needs guidance on the GitHub Copilot SDK for Python, TypeScript, Go, or .NET.
This skill should be used when the user asks to "evaluate an implementation", "run the zen evaluation workflow", "check if the plan was properly implemented", "review implementation against a plan", or needs to assess implementation quality and surface improvement suggestions after a zen build cycle.
This skill should be used when the user asks to "ideate a feature together", "zen ideation", "let's think through this together", "help me shape this idea", "collaborative ideation session", or needs a structured framework for LLM-user co-creation where both parties actively contribute, challenge, and build toward the best possible idea.
This skill should be used when the user asks to "plan a feature", "run the zen planning workflow", "consult all senior agents on a plan", "create a structured plan with agent consultation", or needs a thorough multi-agent planning phase before building anything.
This skill should be used when the user asks to "implement a zen plan", "execute the zen workflow", "run parallel agent implementation", "build from an opencode plan", or needs to execute a written plan from .opencode/plans/ using parallel engineering agents with quality gates.