ff-stream-web

commit 1f1512f1da97aefc76df3ec187981d8d4f8fb989
parent c159e8b9aec683db7092bea99ea9ddf6ea86d609
Author: Konstantin Tarkus <hello@tarkus.me>
Date:   Sun,  5 Apr 2015 11:39:49 +0300

Update react-style-guide.md

Diffstat:
M
docs/react-style-guide.md
 | 
57
+++++++++++++++++++++++++++++++++++++++++++++++++++++++--

1 file changed, 55 insertions(+), 2 deletions(-)
diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md
@@ -21,16 +21,69 @@ For more information google for [component-based UI development](https://google.
 
 ### CSS Class Names
 
-Use [BEM](https://bem.info/) approach for naming CSS classes.
+Use [BEM](https://bem.info/) approach for naming CSS classes. See also [SUIT CSS](https://suitcss.github.io/) for inspiration.
 
 ```css
+// CSS
 .ComponentName { }
 .ComponentName--modifier { }
 .ComponentName-elementName { }
 .ComponentName-elementName--modifier { }
 ```
 
-See [SUIT CSS](https://suitcss.github.io/) for inspiration.
+For example:
+
+```jsx
+// JSX
+<div className="Navigation">
+  <ul className="Navigation-items">
+    <li className="Navigation-item Navigation-item--selected">
+      <a className="Navigation-link" href="/products">Products</a>
+    </li>
+    <li className="Navigation-item">
+      <a className="Navigation-link" href="/services">Services</a>
+    </li>
+  </ul>
+</div>
+```
+
+```less
+// LESS
+.Navigation {
+  &-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+  }
+
+  &-item {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-link {
+    display: block;
+    padding: 0 25px;
+    outline: 0;
+    border: 0;
+    color: @default-color;
+    text-decoration: none;
+    line-height: @line-height;
+    transition: background-color .3s ease;
+
+    &,
+    .Navigation-items:hover & {
+      background: @default-bg-color;
+    }
+
+    &--selected,
+    .Navigation-items:hover &:hover {
+      background: @active-bg-color;
+    }
+  }
+}
+```
 
 ### React Components