Gave Structure To Readme.md

CSS/Animations.md

@@ -0,0 +1,22 @@
+### Animations
+
+Favor transitions over animations. Avoid animating other properties than
+`opacity` and `transform`.
+
+```css
+/* bad */
+div:hover {
+  animation: move 1s forwards;
+}
+@keyframes move {
+  100% {
+    margin-left: 100px;
+  }
+}
+
+/* good */
+div:hover {
+  transition: 1s;
+  transform: translateX(100px);
+}
+```

CSS/Box_Model.md

@@ -0,0 +1,19 @@
+### Box model
+
+The box model should ideally be the same for the entire document. A global
+`* { box-sizing: border-box; }` is fine, but don't change the default box model
+on specific elements if you can avoid it.
+
+```css
+/* bad */
+div {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+/* good */
+div {
+  padding: 10px;
+}
+```

CSS/Brevity.md

@@ -0,0 +1,24 @@
+### Brevity
+
+Keep your code terse. Use shorthand properties and avoid using multiple properties when
+it's not needed.
+
+```css
+/* bad */
+div {
+  transition: all 1s;
+  top: 50%;
+  margin-top: -10px;
+  padding-top: 5px;
+  padding-right: 10px;
+  padding-bottom: 20px;
+  padding-left: 10px;
+}
+
+/* good */
+div {
+  transition: 1s;
+  top: calc(50% - 10px);
+  padding: 5px 10px 20px;
+}
+```

CSS/Colors.md

@@ -0,0 +1,15 @@
+### Colors
+
+If you need transparency, use `rgba`. Otherwise, always use the hexadecimal format.
+
+```css
+/* bad */
+div {
+  color: hsl(103, 54%, 43%);
+}
+
+/* good */
+div {
+  color: #5a3;
+}
+```

CSS/Drawing.md

@@ -0,0 +1,20 @@
+### Drawing
+
+Avoid HTTP requests when the resources are easily replicable with CSS.
+
+```css
+/* bad */
+div::before {
+  content: url(white-circle.svg);
+}
+
+/* good */
+div::before {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+}
+```

CSS/Flow.md

@@ -0,0 +1,34 @@
+### Flow
+
+Don't change the default behavior of an element if you can avoid it. Keep elements in the
+natural document flow as much as you can. For example, removing the white-space below an
+image shouldn't make you change its default display:
+
+```css
+/* bad */
+img {
+  display: block;
+}
+
+/* good */
+img {
+  vertical-align: middle;
+}
+```
+
+Similarly, don't take an element off the flow if you can avoid it.
+
+```css
+/* bad */
+div {
+  width: 100px;
+  position: absolute;
+  right: 0;
+}
+
+/* good */
+div {
+  width: 100px;
+  margin-left: auto;
+}
+```

CSS/Hacks.md

@@ -0,0 +1,17 @@
+### Hacks
+
+Don't use them.
+
+```css
+/* bad */
+div {
+  // position: relative;
+  transform: translateZ(0);
+}
+
+/* good */
+div {
+  /* position: relative; */
+  will-change: transform;
+}
+```

CSS/Inheritance.md

@@ -0,0 +1,15 @@
+### Inheritance
+
+Don't duplicate style declarations that can be inherited.
+
+```css
+/* bad */
+div h1, div p {
+  text-shadow: 0 1px 0 #fff;
+}
+
+/* good */
+div {
+  text-shadow: 0 1px 0 #fff;
+}
+```

CSS/Language.md

@@ -0,0 +1,15 @@
+### Language
+
+Prefer English over math.
+
+```css
+/* bad */
+:nth-child(2n + 1) {
+  transform: rotate(360deg);
+}
+
+/* good */
+:nth-child(odd) {
+  transform: rotate(1turn);
+}
+```

CSS/Overriding.md

@@ -0,0 +1,18 @@
+### Overriding
+
+Overriding styles makes selectors and debugging harder. Avoid it when possible.
+
+```css
+/* bad */
+li {
+  visibility: hidden;
+}
+li:first-child {
+  visibility: visible;
+}
+
+/* good */
+li + li {
+  visibility: hidden;
+}
+```

CSS/Positioning.md

@@ -0,0 +1,5 @@
+### Positioning
+
+There are many ways to position elements in CSS. Favor modern layout specifications
+such as Flexbox and Grid, and avoid removing elements from the normal document flow, for example
+with `position: absolute`.

CSS/Selectors.md

@@ -0,0 +1,27 @@
+### Selectors
+
+Minimize selectors tightly coupled to the DOM. Consider adding a class to the elements
+you want to match when your selector exceeds 3 structural pseudo-classes, descendant or
+sibling combinators.
+
+```css
+/* bad */
+div:first-of-type :last-child > p ~ *
+
+/* good */
+div:first-of-type .info
+```
+
+Avoid overloading your selectors when you don't need to.
+
+```css
+/* bad */
+img[src$=svg], ul > li:first-child {
+  opacity: 0;
+}
+
+/* good */
+[src$=svg], ul > :first-child {
+  opacity: 0;
+}
+```

CSS/Semicolons.md

@@ -0,0 +1,15 @@
+### Semicolons
+
+While the semicolon is technically a separator in CSS, always treat it as a terminator.
+
+```css
+/* bad */
+div {
+  color: red
+}
+
+/* good */
+div {
+  color: red;
+}
+```

CSS/Specificity.md

@@ -0,0 +1,22 @@
+### Specificity
+
+Don't make values and selectors hard to override. Minimize the use of `id`'s
+and avoid `!important`.
+
+```css
+/* bad */
+.bar {
+  color: green !important;
+}
+.foo {
+  color: red;
+}
+
+/* good */
+.foo.bar {
+  color: green;
+}
+.foo {
+  color: red;
+}
+```

CSS/Units.md

@@ -0,0 +1,22 @@
+### Units
+
+Use unitless values when you can. Favor `rem` if you use relative units. Prefer seconds over
+milliseconds.
+
+```css
+/* bad */
+div {
+  margin: 0px;
+  font-size: .9em;
+  line-height: 22px;
+  transition: 500ms;
+}
+
+/* good */
+div {
+  margin: 0;
+  font-size: .9rem;
+  line-height: 1.5;
+  transition: .5s;
+}
+```

CSS/Vendor_prefix.md

@@ -0,0 +1,25 @@
+### Vendor prefixes
+
+Kill obsolete vendor prefixes aggressively. If you need to use them, insert them before the
+standard property.
+
+```css
+/* bad */
+div {
+  transform: scale(2);
+  -webkit-transform: scale(2);
+  -moz-transform: scale(2);
+  -ms-transform: scale(2);
+  transition: 1s;
+  -webkit-transition: 1s;
+  -moz-transition: 1s;
+  -ms-transition: 1s;
+}
+
+/* good */
+div {
+  -webkit-transform: scale(2);
+  transform: scale(2);
+  transition: 1s;
+}
+```

HTML/Accessibility.md

@@ -0,0 +1,17 @@
+### Accessibility
+
+Accessibility shouldn't be an afterthought. You don't have to be a WCAG expert to improve your
+website, you can start immediately by fixing the little things that make a huge difference, such as:
+
+* learning to use the `alt` attribute properly
+* making sure your links and buttons are marked as such (no `<div class=button>` atrocities)
+* not relying exclusively on colors to communicate information
+* explicitly labelling form controls
+
+```html
+<!-- bad -->
+<h1><img alt=Logo src=logo.png></h1>
+
+<!-- good -->
+<h1><img alt=Company src=logo.png></h1>
+```