Sanam Style Convention

Sanam, A minimal and flexible approach to developing maintainable & large scalable stylesheet.

Sanam is a Style Convection based on some of the best practices, methods, articles and existing style guides. Sanam goal is to provide a set of conventions that lets programmers achieve following goals.

1. clean well structured and transparent code
2. highly reusable code
3. maintainability in long term and large scale
4. highly readable code via simplicity and being explicit
5. flexibility in term of development and conventions itself

Sanam borrows some of it’s main Ideas and features from following resources:

• Namespaces idea from Harry Roberts Article
• BEM css nameing convention as component/module pattern convention
• Variables and scale variables idea from Fat's Article on Medium
• General idea of directory structure & the (n-1)7-1 pattern from Sass Guidelines
• Limiting preprocessors features Based on numerous articles including (1)(2)(3)
• Some other articles from This Repo that I will mention.

Sanam documentary is based on SASS-Lang, but it can be adopted to be used with conjunction of any preprocessor language or may be pure css using postprocessors or task runners. Suggesting a collection of best practices is the goal of Sanam, Sanam Style Convention does not provide any code or framework for specific language or any opinionated structure, you should get the core principles and implement them in your projects as suits your situation.

Table Of Contents

1. About Author
2. Namespaces
3. Utility Classes
4. Scoping Classes
5. Theme Classes
6. State Classes
7. Javascript Classes
8. Testing Classes
9. Hack Classes
10. Objects
11. Components/Modules
12. Layouts
13. Layout Level Objects
14. Page Level Styles
15. Modular Pattern
16. Responsive
17. Variables
18. Colors
19. Color Pallet
20. Gray Shades
21. Semantic Colors
22. Brand Colors
23. Z-index Scale
24. Typography
25. Limiting preprocessors features
26. Selector Nesting
27. Loops & Branching
28. Mixins
29. Extend
30. Vendors
31. Overriding Vendors
32. Legacy styles
33. Shame styles
34. Reset styles
35. Environment variables
36. Big Picture of Directory structure
37. Documentation
38. Common Sense

License

Creative Commons Attribution 4.0 International