ITCSS: A Scalable CSS Architecture for Beginners 🎯

Welcome to the ITCSS tutorial! In this lesson, we'll dive into the Incremental CSS (ITCSS) methodology, a scalable and maintainable approach to writing clean and organized CSS. Let's get started!

What is ITCSS?

ITCSS is a methodology that separates CSS into five categories to help manage large-scale projects and improve maintainability. It promotes reusability, modularity, and scalability, making it an excellent choice for both beginners and experienced developers.

The Five Categories of ITCSS 📝

Settings and Vendors: This is where you define global variables, fonts, normalize styles, and import third-party libraries.
Object-Oriented CSS (OOCSS): This category contains reusable, modular CSS classes based on the object (HTML element) they are designed for.
Functional CSS: This category includes styles specific to a particular feature or behavior. It's typically generated based on the markup structure.
Template: This layer contains the base structure and layout of your website or application. It sets the foundation for your design.
Custom Styles: This layer includes custom CSS rules that are specific to the project or page.

Setting Up ITCSS Project 💡

To set up an ITCSS project, you can use a tool like PostCSS with plugins like Autoprefixer and PostCSS Import.

First, let's create the necessary files and folders:

- src
  - settings
    - variables.css
    - normalize.css
  - vendor
    - vendor.css
  - base
    - reset.css
    - typography.css
  - components
    - buttons
      - button.css
    - layout
      - grid.css
    - navigation
      - navigation.css
  - pages
    - home
      - home.css
  - styles.css

Code Examples ✅

Example 1 - OOCSS

Let's create a simple button with OOCSS:

css

/* components/buttons/button.css */
.btn {
  display: block;
  padding: 10px 20px;
  border-radius: 5px;
  border: 2px solid black;
}

.btn:hover {
  background-color: lightblue;
  cursor: pointer;
}

Example 2 - Functional CSS

Here's an example of functional CSS for a modal:

css

/* components/modal.css */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal.open {
  display: block;
}

ITCSS: A Scalable CSS Architecture for Beginners 🎯

ITCSS: A Scalable CSS Architecture for Beginners 🎯

What is ITCSS?

The Five Categories of ITCSS 📝

Setting Up ITCSS Project 💡

Code Examples ✅

Example 1 - OOCSS

Example 2 - Functional CSS

Quiz 💡