新宿(近々代々木に移転)で働く18歳エンジニアのブログ

思ったこととか、技術的なこと書きます。

Google HTML/CSS Style Guide を読んで意外だと思った点まとめ

HTML

-<!-- Not recommended -->
-<a class='maia-button maia-button-secondary'>Sign in</a>
+<!-- Recommended -->
+<a class="maia-button maia-button-secondary">Sign in</a>

CSS

-/* 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;
Do not use units after 0 values unless they are required.

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;
Do not use put 0s in front of values or lengths between -1 and 1.
font-size: .8em;
-/* Not recommended */
-color: #eebbcc;
+/* Recommended */
+color: #ebc;

Alphabetize declarations.

-/* Not recommended */
-a:focus, a:active {
-  position: relative; top: 1px;
-}

+/* Recommended */
+h1,
+h2,
+h3 {
+  font-weight: normal;
+  line-height: 1.2;
+}
-/* 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;
+}