Organizing Files and Folders for Web Development

Ensuring that your files and folders are well-organized is crucial when working on a website. An organized codebase makes development easier and helps others or yourself to navigate the project in the future.

Benefits of Organized Code

• Easier to find and manage files during development.
• Saves time when revisiting or modifying the project later.
• Makes a positive impression when applying for web developer jobs.

Setting Up SASS Styles

This guide explains how to set up and organize SASS (Syntactically Awesome Style Sheets) styles effectively.

Project Structure

• index.html: Contains all the HTML markup.
• image folder: Stores project images.
• scss folder: Contains all SASS styles.
• GitHub: The project source code is available on GitHub.

Main SASS File

• Loads global and component styles using the SASS @use at-rule.
• Includes subfolder index files for global component imports.

Naming Conventions

• SASS files have an underscore prefix to indicate they are partials and should not compile into separate CSS files.
• The main style.scss without an underscore compiles into the final style.css file.

Organizing SASS Files

• Global Folder: Contains styles used throughout the website.
• Components Folder: Includes section-specific styles such as headers, footers, etc.
• Util Folder: Contains SASS features like functions and mixins, not actual style rules.

Functions and Mixins

• Functions (e.g., rem, em): Convert pixels to REMs/EMs.
• Mixins: Help generate media queries and fluid typography.
• Apply helper classes and utilize BEM (Block Element Modifier) approach for naming.

Global Styles

• Boilerplate Styles: Include reset styles to get rid of browser defaults and set basic styles.
• Colors: Use CSS custom properties over SASS variables for better browser integration.
• Decoration Styles: Include utility classes for stylistic effects.

Components and BEM Approach

• Assign class names using BEM for unique and hierarchical styling.
• Class names follow the pattern: Block__Element--Modifier.

Conclusion

For a more comprehensive understanding of SASS and practical usage, consider experimenting with the provided boilerplate project or check out dedicated courses that show the process of building a website from a design.

Additional Resources

• SASS Intro Video
• Responsive Design for Beginners Course
• Boilerplate Project on GitHub

This guide serves as a foundation for maintaining a clean and efficient style organization in web projects.