jeromebloging

Activity 22: Research SMACSS - Scalable and Modular Architecture for CSS

Jerome Beriso's photo
Jerome Beriso
·

3 min read

HTML Structure

The code defines a basic web page with the following elements:

  • <nav>: A navigation element that contains an unordered list (<ul>) of links to different pages (Home, About, Contact)

  • <section>: A section element that contains a heading (<h1>) with the welcome message

  • <footer>: A footer element that contains a paragraph with copyright information

Class Names

The code uses class names to define the styles and behavior of each element. Specifically:

  • .nav: The navigation element

  • .hero: The section element with the welcome message

  • .footer: The footer element

SMACSS Principles

This code snippet demonstrates several principles of SMACSS (Scalable and Modular Architecture for CSS):

  • Modularity: The code defines reusable components (e.g., navigation, hero, footer) that can be easily reused throughout the site

  • Separation of Concerns: The code separates the presentation (HTML structure) from the styling (CSS) and behavior (JavaScript)

  • Scalability: The class names and organization allow for easy expansion and modification of the site's design and layout

Base Styles

The code defines base styles for the <body> element:

  • Sets font family to Arial, sans-serif

  • Sets margin and padding to 0

Layout Styles

The code defines styles for layout components:

  • .nav: Styles for the navigation bar

    • Sets background color to #333

    • Sets text color to #fff

    • Sets padding to 20px

    • Sets text alignment to center

  • .hero: Styles for the hero section

    • Sets background image to a linear gradient from #f0f0f0 to #fff

    • Sets background size to 100% 200px

    • Sets height to 200px

  • .footer: Styles for the footer section

    • Sets background color to #333

    • Sets text color to #fff

    • Sets padding to 20px

    • Sets text alignment to center

Module Styles

The code defines styles for a reusable component:

  • .button: Styles for a button

    • Sets background color to #337ab7

    • Sets text color to #fff

    • Sets border to none

    • Sets padding to 10px 20px

    • Sets font size to 18px

State Styles

The code defines styles for a stateful component:

  • .is-active .button: Styles for a button that is active (e.g., clicked)

    • Sets background color to #337ab7 (overrides the default style)

Theme Styles

The code defines styles for different themes:

  • .dark-theme .nav: Styles for the navigation bar when the dark theme is active

    • Sets background color to #333 (overrides the default style)

  • .dark-theme .footer: Styles for the footer section when the dark theme is active

    • Sets background color to #444 (overrides the default style)

SMACSS Principles

This code demonstrates several principles of SMACSS:

  • Modularity: The code defines reusable components (e.g., navigation, hero, footer, button) that can be easily reused throughout the site.

  • Separation of Concerns: The code separates the presentation (HTML structure) from the styling (CSS) and behavior (JavaScript).

  • Scalability: The class names and organization allow for easy expansion and modification of the site's design and layout.

OUTPUT: