These are the CSS-specific coding styles. Anything mentions here overrides/adds to the "In General" guides. The only 1 principle when coding CSS is that:
https
)./* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';
/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';
Recommended:
.example {
color: blue;
}
<!-- Recommended -->
color: #e5e5e5;
<!-- Not recommended -->
color: #E5E5E5;
Recommended:
<!DOCTYPE html>
<meta charset="utf-8">
Not recommended:
<html>
<meta charset="utf-8">
Recommended:
<!-- Recommended -->
#gallery {}
#login {}
.video {}
.aux {}
.alt {}
Not recommended:
<!-- Not recommended -->
#yee-1901 {}
.button-green {}
.clear {}
Recommended:
#nav {}
.author {}
Not Recommended:
#navigation {}
.atr {}
Recommended:
#example {}
.error {}
Not recommended:
ul#example {}
div.error {}
Recommended:
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
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;
Example:
flex: 0px; /* This flex-basis component requires a unit. */
flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
margin: 0;
padding: 0;
Recommended:
font-size: .8em;
Not recommended:
font-size: 0.8em;
Recommended:
color: #ebc;
Not recommended:
color: #eebbcc;
Recommended:
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
#video-id {}
.ads-sample {}
Not recommended:
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
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;
Recommended:
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
Recommended:
.test {
display: block;
height: 100px;
}
Not Recommended:
.test {
display: block;
height: 100px
}
Recommended:
.test {
display: block;
height: 100px;
}
Not Recommended:
/* Not recommended: key-value are joined */
.test {
display:block;
height:100px
}
/* Not recommended: missing space before curly braces */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break for curly braces */
#video
{
margin-top: 1em;
}
Recommended:
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
Not Recommended:
h1, h2, h3 {
font-weight: normal;
line-height: 1.2;
}
Recommended:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
Not Recommended:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
'
)."
) when there is a strict requirement. Recommended:
/* Recommended */
@import url(https://www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
Not Recommended:
/* Not recommended */
@import url("https://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
That's all for CSS coding style.