Patterns and anti-patterns in layout

Michael Meleshkin, Frontend developer at Default Value

Transcript

1. Patterns and anti-patterns in layout
2. About me › Name: Michael Meleshkin › Company: Default Value › Position: Frontend developer › Age: 29 › E-mail: michaelm@default-value.com
3. Content 1. Architecture for your layouts, BEM 2. Recommendations. CSS 3. Something you should know. HTML 4. Other techniques
4. 1. ARCHITECTURE FOR YOUR LAYOUTS
5. Methodologies › OOCSS › Atomic CSS › SMACSS › MCSS › AMCSS › FUN › BEM
6. BEM (Block, Element, Modifier) is a component-based approach to web development. Divide the user interface into independent blocks.
7. Block
8. Block
9. Block
10. Element
11. Modificator
12. Mix › Combine the behavior and styles of multiple entities without duplicating code. › Apply the same formatting to different HTML elements.
13. Naming block-name__element-name_modificator › menu (block) › menu__item (element) › menu__item_active (modificator boolean) › menu_theme_dark (modificator key value)
14. Dividing the code into parts › Single responsibility principle › Open/closed principle › DRY principle › Composition instead of inheritance
15. Redefinition level
16. 2. RECOMMENDATIONS CSS
17. Advices › Don’t use hacks if it’s possible › Make your layout intuitive › Try to experiment with techniques
18. Don’t use hacks if it’s possible Aenean rutrum sollicitudin erat non viverra. Vestibulum eleifend consectetur sapien, a feugiat orci molestie at. Sed sodales sodales nulla, quis condimentum lectus tempus a. Morbi cursus elit eget purus consectetur, eu volutpat purus facilisis. Curabitur pretium pretium diam non imperdiet. Cras efficitur eros sed nisl pulvinar ornare. Nullam sagittis ante et mollis convallis. Etiam tempus felis Aenean rutrum sollicitudin erat non viverra. Vestibulum eleifend consectetur sapien, a feugiat orci molestie at. Sed sodales sodales nulla, quis condimentum lectus tempus a. Morbi cursus elit eget purus consectetur, eu volutpat purus facilisis. Curabitur pretium pretium diam In ut fermentum orci, nec placerat orci. Nulla non hendrerit risus. Cras feugiat lorem id massa efficitur hendrerit. Vestibulum dictum leo tortor, non tempor nibh dapibus et. Phasellus non nibh congue, tincidunt lectus in, auctor velit. Etiam sollicitudin nisi metus, quis tincidunt orci sollicitudin nec. Duis enim ipsum, cursus sed diam id, imperdiet aliquet ante. Quisque at ante enim. Nunc semp Rutrum sollicitudin erat non viverra. Vestibulum eleifend consectetur sapien, a feugiat orci molestie at. Sed sodales sodales nulla, quis condimentum lectus tempus a. Morbi cursus elit eget purus consectetur, eu volutpat purus
19. Don’t use hacks if it’s possible image
20. Make your layout intuitive display: inline inline-block || float
21. Try to experiment with techniques inline-block inline-block inline-block inline-block float & width: 100%
22. 3. SOMETHING YOU SHOULD KNOW HTML
23. WAI-ARIA Web Accessibility Initiative — Accessible Rich Internet Applications It is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies
24. Example 1: Introduction button div role=”button” tabindex=”0”
25. Example 2: Introduction Enter your name: input label Enter your name: area-label=”Enter your name” span
26. Abstract Roles › command › composite › input › landmark › range › roletype › section › sectionhead › select › structure › widget › window
27. Roles › Widget Roles › Document Structure › Landmark Roles › Live Region Roles › ...
28. Attributes › aria-activedescendant › aria-colcount › aria-colindex › aria-colspan › aria-describedby › aria-labelledby › ...
29. 4. OTHER TECHNIQUES
30. CSS: › Flex › Grid › @supports › Variables Web components: › Templates › Shadow DOM › Custom Elements › Imports What are we waiting for?
31. Thanks
33. Additional materials
34. › BEM - https://en.bem.info/ › WAI - https://www.w3.org/WAI/ › WAI-ARIA 1.1 - https://www.w3.org/TR/wai-aria-1.1/ › OOCSS - https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/ › Atomic CSS - https://acss.io/ › SMACSS - https://smacss.com/ › MCSS - https://operatino.github.io/MCSS/en/ › AMCSS - https://amcss.github.io/ Links
35. OOCSS Object-Oriented CSS › Single responsibility principle › Separation of concerns
36. Atomic CSS
37. SMACSS Scalable and Modular Architecture for CSS
38. MCSS Multilayer CSS
39. AMCSS Attribute Modules for CSS
40. FUN › Flat hierarchy of selectors (.selectors) › Utility styles (.b-white) › Name-spaced name-components