self-documenting code
TRANSCRIPT
![Page 1: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/1.jpg)
I. Self-documenting code
![Page 2: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/2.jpg)
Code review
![Page 3: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/3.jpg)
![Page 4: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/4.jpg)
Zásady tvorby samodokumentujúceho kódu• malé logické bloky kódu
• dekomponovanie SASS do súborov/priečinkov
• rozbitie veľkých metód do menších
• minimálny nutný HTML markup
• vhodné názvy premenných (the longer the better)
• common sense
![Page 5: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/5.jpg)
Komentáre
![Page 6: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/6.jpg)
II. Ako pracujem na frontende
![Page 7: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/7.jpg)
CSS• - využívanie kaskády
• - vhodná práca so špecifitou
• - logické celky v SASS
• nevýhoda zbytočná scoped špecifita
• scoping v SASS/HTML (ala WP)
![Page 8: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/8.jpg)
Utility classes• Používam:
• container
• hidden
• clearfix
• hidden-{phone, tablet, desktop}
• pull-left, pull-right
• col-(#) - začínam sa vyhýbať
![Page 9: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/9.jpg)
Konkrétny príklad• .about
• .container
• h2
• ul
• li
• h3
• li
• img
• p + strong
![Page 10: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/10.jpg)
Užitočné čítanie• http://snook.ca/archives/html_and_css/understanding_c
• http://csswizardry.com/2012/11/code-smells-in-css/
• http://tzi.fr/css/selector/meaningful-selector-specificity-measure
• http://www.vanseodesign.com/css/scalable-maintainable/
• http://cwebbdesign.tumblr.com/post/23666803241/scalable-and-maintainable-css-approaches
• http://cssguidelin.es/
• http://sass-guidelin.es/
• https://medium.com/@drublic/css-naming-conventions-less-rules-more-fun-12af220e949b
• http://thesassway.com/advanced/modular-css-naming-conventions
![Page 11: Self-documenting code](https://reader031.vdocuments.net/reader031/viewer/2022020208/55aefa861a28ab105a8b458b/html5/thumbnails/11.jpg)
Ďakujem za pozornosť.