Thread by @MrunayU

🔷 CSS Methodologies You Must Know - 1

A Thread🧵 👇

📌 In large, complicated, rapidly-iterated systems, CSS is notoriously difficult to maintain.

📌 The lack of a built-in scoping mechanism in CSS is one of the reasons.

📌 In CSS, everything is global.

📌 Until CSS gets its native scoping mechanism, we need to devise our own system for locking down styles to specific sections of an HTML document.

📌 CSS methodologies are the solution.

📌 Object-oriented CSS

→ OOCSS concepts help us write components that are flexible, modular and interchangeable.

→ For example, the style of your button elements might be set via two classes that you have given the class of:

✅ .button: Provides the button's basic structure.

✅ .grey-btn: Applies colors and other visual properties.

📌 Atomic CSS

→ Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

✅ Example:

→ Colors are set using hexadecimal values.

→Alpha transparency is created by appending the opacity value to the hex color.

📌 BEM

→ Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

✅ The .loginform class is a block composed of three elements:

Thanks for reading this thread ❤️

If you like it , make sure you:

🔷 Like the tweet
🔷 Retweet the first tweet ⚡

For more content , follow:

@MrunayU

You can read the unrolled version of this thread here: typefully.com/MrunayU/ayDC4tU