CSS Methodologies You Must Know - 1

•

🔷 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