The Think – Build – Architect Mindset
Think
Think about the layout of your webpage or web app before writing code.
- Modular building blocks that make up interfaces.
- Held together by the layout of the page.
- Re-usable across a project and between different projects.
- Independent, allowing us to use them anywhere on the page.
Build
Build your layout HTML and CSS with a consistent structure for naming classes.
- Block Element Modifier
- Block: Standalone component that is meaningful on its own.
- Element: part of a block that has no standalone meaning.
- Modifier: a different version of a block or an element.
Architect
Create a logical architecture for your CSS with files and folders.
The 7 – 1 Pattern
- 7 different folders for partial sass files
- 1 main sass file to import all other files into a complied CSS stylesheet.
Tracydev 