Workshop of CSS architecture for Web Developer

Transcript

1. Workshop of CSS Architecture for Web Developer (SASS, SMACSS and BEM)
2. Hello ! I am Nikesh Suwal Sr. Front End Engineer Jyaasa Technologies
3. CSS is simple... It's simple to understand. But CSS is not simple to use or maintain “
4. • CSS weaknesses • Preprocessor feature (SASS) • Preprocessor Misconception • Workflow and technique • SASS + SMACSS + BEM I will talk about
5. Client:“Can we try changing our theme quickly? I think blue button would be more engaging!” You: “Hm...” It’s not that quick. Come back in 1 hours ? Client: After 1 hours and deployed to production server “ Ah it’s ugly! Can we try a lighter blue and compare it to this orange and green too?” At the office dealing with client
7. • Lack of essential basic feature • Hard to maintain (huge messy CSS files) • Not DRY enough - leads to mistake CSS Weaknesses
9. Sass Basics Feature • Variable • Nesting • Mixin • Extend/Inheritance • Operation and colour function • etc...
10. Variable $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
11. Nesting nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
12. Mixin =border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius .box +border-radius(10px) .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
13. Extend / Inheritance .message border: 1px solid #ccc padding: 10px color: #333 .success @extend .message border-color: green .error @extend .message border-color: red .warning @extend .message border-color: yellow .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333;} .success { border-color: green;} .error { border-color: red;} .warning { border-color: yellow;}
14. Extend / Inheritance .container width: 100% article[role="main"] float: left width: 600px / 960px * 100% aside[role="complementary "] float: right width: 300px / 960px * 100% .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
16. Misconception
17. I need a Ruby This is NOT mean you need Ruby or Node on your production server to use them. SASS is written in Ruby You need them on your development machine.
18. Both Ruby and Node are easy to install on any platform: Ruby is pre-installed, Node.pkg RubyInstaller.exe, Node.exe apt get install ruby / nodejs
19. Using SASS without Rails gem install sass sass --watch app/sass:public/stylesheets/style.css Sass will auto-compile to stylesheets/style.css each time sass is modified
20. Using SASS without Rails gem install sass sass --watch app/sass:public/stylesheets/style.css Sass will auto-compile to stylesheets/style.css each time sass is modified
21. S A S S
23. Framework
24. SMACSS is categorization • Base • Layout • Module • State • Theme
25. Base • Default styling with no classes applied • No Classes • No ID’s • No important • Reset/Normalize • Variables
26. Layout • Prefix with an l-header, l-footer, l-aside • Major component (Header, Footer, Grids, sidebar) • Reuseable page layouts
27. Module • Reusable modular part of our design • Navigation bar, carousels, media block, etc • Uses BEM naming convention to break apart pieces of a component and keep the specificity low
28. State • Way to describe how our module or layout will look when in a particular state. • Is it hidden or Expanded?
29. Theme • Similar to state rules in that they describe how modules or layouts might look.
30. S M A C S S
31. BEM CSS Naming Convention
32. BEM Block: Standalone entity that is meaningful on its own. Example: header, container, menu, checkbox, input
33. BEM Element: A part of a block that has no standalone meaning and is semantically tied to its block. Example: menu item, list item, checkbox caption, header title
34. BEM Modifier: A flag on a block or element. Use them to change appearance or behavior. Example: disabled, highlighted, checked, fixed, size big, color yellow
35. Benefit • Never dependent on other elements on page • Never experience problem from cascading • Get the ability to transfer blocks from your finished projects to new ones. • gives your CSS code a solid structure that remains simple and easy to understand.
36. Syntax: block__element--modifier
37. Example:
38. B E M
39. http://sass-lang.com/ http://getbem.com/ https://smacss.com/ References
40. Thank you! Any Queries? facebook.com/nikesh.suwal github.com/nikeshsuwal