Today, I gained a deeper understanding of how CSS Modules work in React—not just the syntax, but the underlying mechanism. Many people believe that: “CSS Modules are just CSS files imported into components.” However, that's not the full picture. When you write: import styles from "./Button.module.css"; Your bundler (like Vite or Webpack) transforms this into something like: { primary: "Button_primary__3kH7a_1", danger: "Button_danger__9sK2Q_2" } So, when you use: <button className={styles.primary} /> You’re not applying a real CSS class name. Instead, you’re utilizing a hashed, locally-scoped identifier. This results in: ✅ Styles scoped to the component ✅ No global namespace pollution ✅ No class name collisions ✅ No accidental overrides ✅ Safe refactoring Under the hood: - The CSS file is compiled - Class names are hashed - A JS object mapping is generated The final CSS still exists, but with unique class names. The outcome is: “CSS with the safety model of JavaScript modules.” Why is this significant in real applications? - You can delete components without concern - You can rename classes safely - You can reuse class names like container, title, button everywhere - Large applications remain maintainable This represents a mental model upgrade: “CSS Modules are not ‘better CSS’. They are compiled, namespaced style dependencies.” For the first time, my React styles feel architected rather than merely “managed.” Small tool. Big architectural shift. #React #CSSModules #FrontendArchitecture #WebDevelopment #LearningInPublic #JavaScript #BuildInPublic
Unlocking CSS Modules in React: Scoped Styles & Safe Refactoring
More Relevant Posts
-
Lyra Rebane (known for building an x86 emulator in pure CSS), has a new write-up on why our reliance on JS frameworks for basic UI might be outdated. Her post covers how to use recent web standards for features we used to script by default: - Native CSS nesting (no pre-processor required) - Tabs and accordions - Modern, easy-to-ready syntax for theming and transitions If you're looking to trim your bundle size, or just want to learn some cool new CSS tricks, this is a solid resource. Read more: https://lnkd.in/de7cEfsA
-
JSX is NOT HTML. It’s JavaScript in Disguise. 🎭⚛️ When you start learning React, JSX feels like magic. You are writing HTML... inside a JavaScript function? But under the hood, it’s not HTML at all. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐡𝐚𝐩𝐩𝐞𝐧𝐢𝐧𝐠? Browsers don't understand JSX. Before your code hits the browser, tools like 𝐁𝐚𝐛𝐞𝐥 transform that "HTML" into standard JavaScript objects. 𝐓𝐡𝐞 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧 𝐅𝐥𝐨𝐰: 1️⃣ You write: `<div className="box">Hello</div>` 2️⃣ Babel compiles it to: `React.createElement('div', { className: 'box' }, 'Hello')` 3️⃣ React turns that into a lightweight JS object (Virtual DOM). 4️⃣ Finally, React updates the real DOM. 𝐖𝐡𝐲 𝐢𝐬 𝐉𝐒𝐗 𝐬𝐭𝐫𝐢𝐜𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐇𝐓𝐌𝐋? Ever got an error for leaving a tag unclosed or using `class` instead of `className`? Since JSX becomes JavaScript function calls: • `class` is a reserved word in JS ➔ so we use `className`. • Function arguments must be well-defined ➔ so every tag must close. 𝐓𝐡𝐞 𝐏𝐨𝐰𝐞𝐫 𝐌𝐨𝐯𝐞: Because it is JavaScript, you can embed logic directly: `{ isLoggedIn ? <Dashboard /> : <Login /> }` Check out the visual breakdown below to see the full journey from JSX to DOM! 👇 Do you prefer writing JSX, or have you ever tried writing raw `React.createElement` code (just for fun)? 😅 #ReactJS #WebDevelopment #Frontend #JavaScript #JSX #CodingBasics #Babel
-
-
🧠 99% of JavaScript devs get this event loop question wrong 👀 (Even seniors pause before answering) No frameworks. No libraries. Just how JavaScript actually schedules work. 🧩 Output-Based Question (Event Loop: sync vs microtasks vs macrotasks) console.log("start"); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => { console.log("promise"); }); (async function () { console.log("async"); })(); console.log("end"); ❓ What will be printed — in the correct order? ❌ Don’t run the code 🧠 Think like the JavaScript engine A. start → async → end → promise → timeout B. start → end → async → promise → timeout C. start → async → promise → end → timeout D. start → promise → async → end → timeout 👇 Drop your answer in the comments (no cheating 😄) Why this question matters This tests whether you truly understand: • synchronous execution • the event loop • microtasks vs macrotasks • why Promise.then beats setTimeout(0) • async IIFEs vs promises Many developers “use” async code every day — but few understand when it actually runs. Good JavaScript developers don’t memorize outputs. They understand how the engine thinks. 💡 I’ll pin the full explanation after a few answers. #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #ProgrammingFundamentals #InterviewPrep #MCQ #DeveloperTips #CodeQuality
-
-
Built a dynamic Light/Dark theme toggle using JavaScript, CSS, and DOM manipulation with full support for system preference detection and persistent user settings. The implementation checks the user’s OS theme using window.matchMedia('(prefers-color-scheme: dark)') and applies the appropriate class to the <body> element. If a user manually toggles the theme, their preference is stored in localStorage, ensuring it persists across page reloads. The system also listens for real-time OS theme changes and updates the UI accordingly—without overriding a manually selected theme. The project demonstrates practical use of event listeners, class manipulation via classList, browser storage APIs, media query detection, and clean separation of concerns between styling (CSS) and behavior (JavaScript).
-
Day 60 of me reading random and basic but important dev topicsss...... Today I read about the Problem with <script> and the Power of defer. If you are building modern web applications especially heavy client-side apps with frameworks like React.......how you load your JavaScript is make-or-break for your initial page load performance. When the browser parses HTML and encounters a standard <script src="..."> tag, it hits a wall. It cannot continue building the DOM. It must pause, download the script, and execute it before moving on. On a slow network, this leaves users staring at a blank screen. Historically, the fix was putting scripts at the absolute bottom of the <body>. But this is a band-aid. It delays the download phase entirely until the HTML is fully parsed, wasting valuable network time. Enter the defer attribute. Adding defer (<script defer src="...">) is a game-changer for rendering logic. Here is exactly what happens under the hood: 1. Background Downloading: The browser downloads the script asynchronously while continuing to parse the HTML. The DOM is never blocked. 2. Execution Timing: The script waits to execute until the HTML parsing is completely finished, but it executes before the DOMContentLoaded event fires. 3. Guaranteed Order: This is the killer feature. If you have multiple defer scripts (e.g., a massive vendor bundle and your main application code), they will execute in the exact order they appear in the document, regardless of which one finishes downloading first. When to use defer? Use it for the core application logic, DOM-manipulating scripts, and framework bundles. If script relies on the fully parsed DOM or needs to execute in a strict dependency order, defer is your best friend. The defer attribute is ignored on scripts without a src (inline scripts). Keep Learning!!!!! #JavaScript #WebPerformance #FrontendDev #SoftwareEngineering #WebDev
-
-
𝗛𝗼𝘄 𝗝𝗮 v𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗪𝗼𝗿𝗸𝘀 𝗢𝗻 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 You want to know how JavaScript works on a browser. Let's break it down. JavaScript is a programming language that makes web pages interactive. It was created to run inside browsers, but now it also runs on servers using environments like Node.js. A web page is made of: - HTML: structure - CSS: styling - JavaScript: behavior When you visit a web page, your browser loads HTML, creates a DOM tree, and downloads CSS to create a CSSOM. These combine to form a Render Tree, which is displayed on the screen. The browser has a rendering engine and a JavaScript engine, like Google's V8. The V8 engine executes JavaScript code, but it does not change the DOM or UI. Instead, it uses browser APIs to do that. Browser APIs include: - document - getElementById - querySelector - createElement - setTimeout - fetch - WebSocket - localStorage - sessionStorage - geolocation - history - navigator The V8 engine's code is written in C++. To understand the event loop, you need to know how JavaScript code executes. JavaScript is a single-threaded language, so every instruction is executed line by line. The JavaScript engine creates a global execution context, which is divided into two sections: - variable environment - execution context When a promise comes, it goes into the microtask queue, and when a timeout is called, it goes into the callback queue. The event loop resolves the microtask queue first, then the callback queue. When you open a website, your browser downloads HTML, creates a DOM tree, and downloads CSS to create a CSSOM. If JavaScript exists, it is sent to the V8 engine, which executes it. If JavaScript modifies the DOM, the browser updates the DOM, and the screen updates. Source: https://lnkd.in/gJirTwcw
-
What Actually Is JavaScript? And How Does It Run in the Browser? JavaScript is a high-level, interpreted programming language used to make web pages interactive. HTML → Structure CSS → Styling JavaScript → Behavior Without JavaScript, websites would be static. What JavaScript Really Is JavaScript is: • Single-threaded • Event-driven • Dynamically typed • Prototype-based It allows you to: - Handle user clicks - Update the DOM - Fetch data from APIs - Build full web applications How JavaScript Runs in the Browser JavaScript runs inside a JavaScript Engine built into the browser. Examples: Chrome → V8 Engine Firefox → SpiderMonkey Here’s what happens when a browser loads a website: 1. Browser loads HTML 2. It builds the DOM (Document Object Model) 3. When it finds <script> 4. The JavaScript engine parses and executes the code Behind the Scenes Inside the browser: • Call Stack → Executes functions • Web APIs → Handle async tasks (setTimeout, fetch, DOM events) • Callback Queue → Stores completed async tasks • Event Loop → Moves tasks to call stack when ready That’s how JavaScript handles asynchronous behavior even though it’s single-threaded. In Simple Terms JavaScript runs in the browser using: JavaScript Engine + Call Stack + Web APIs + Event Loop And that’s what makes websites interactive. #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering
-
-
Senior Frontend Developer • Freelancer • Contractor | React • Next.js • Javascript | UI/UX Designer
𝐇𝐨𝐰 𝐑𝐞𝐚𝐜𝐭 𝐰𝐨𝐫𝐤𝐬 𝐮𝐧𝐝𝐞𝐫 𝐭𝐡𝐞 𝐡𝐨𝐨𝐝. You write JSX. The browser has no idea what JSX is. So how does your React code run? 🔵 𝐒𝐭𝐞𝐩 𝟏: 𝐂𝐨𝐦𝐩𝐢𝐥𝐚𝐭𝐢𝐨𝐧 JSX is not JavaScript. Before your code ever reaches the browser, a tool like Babel transforms it. This: <𝘉𝘶𝘵𝘵𝘰𝘯 𝘰𝘯𝘊𝘭𝘪𝘤𝘬={𝘩𝘢𝘯𝘥𝘭𝘦𝘊𝘭𝘪𝘤𝘬}>𝘚𝘶𝘣𝘮𝘪𝘵</𝘉𝘶𝘵𝘵𝘰𝘯> Becomes this: 𝘙𝘦𝘢𝘤𝘵.𝘤𝘳𝘦𝘢𝘵𝘦𝘌𝘭𝘦𝘮𝘦𝘯𝘵(𝘉𝘶𝘵𝘵𝘰𝘯, { 𝘰𝘯𝘊𝘭𝘪𝘤𝘬: 𝘩𝘢𝘯𝘥𝘭𝘦𝘊𝘭𝘪𝘤𝘬 }, "𝘚𝘶𝘣𝘮𝘪𝘵") We can say JSX is just a cleaner way to write createElement calls. 🟣 𝐒𝐭𝐞𝐩 𝟐: 𝐓𝐡𝐞 𝐕𝐢𝐫𝐭𝐮𝐚𝐥 𝐃𝐎𝐌 When your component renders, React doesn't touch the real DOM immediately. Instead, it builds a lightweight JavaScript object, a tree that describes what the UI should look like. This tree is the Virtual DOM. 🟢 𝐒𝐭𝐞𝐩 𝟑: 𝐑𝐞𝐜𝐨𝐧𝐜𝐢𝐥𝐢𝐚𝐭𝐢𝐨𝐧 When state changes: ➡️ React builds a new Virtual DOM tree ➡️ Compares it to the previous one (diffing) ➡️ Calculates the minimum set of changes needed ➡️ Applies only those changes to the real DOM (commit phase) This is why you can call setState multiple times and React doesn't update the DOM after each one, but it batches the changes and commits once. 🔑 The real DOM is expensive to update. Not because it's slow, but because every change can trigger style recalculations, layout, and repaint. React's job is to minimize how often that happens. Good code habits are built on top of strong fundamentals. A lot of developers get really good at the "what" without understanding the "why." Knowing how the tools you use every day work can really help making good decisions.
-
𝐘𝐨𝐮𝐫 `𝐮𝐬𝐞𝐌𝐞𝐦𝐨` 𝐢𝐬𝐧'𝐭 𝐚𝐥𝐰𝐚𝐲𝐬 𝐝𝐨𝐢𝐧𝐠 𝐰𝐡𝐚𝐭 𝐲𝐨𝐮 𝐭𝐡𝐢𝐧𝐤 𝐢𝐭 𝐢𝐬, 𝐞𝐬𝐩𝐞𝐜𝐢𝐚𝐥𝐥𝐲 𝐰𝐢𝐭𝐡 𝐨𝐛𝐣𝐞𝐜𝐭𝐬. I've seen so many teams struggle with React performance, reaching for `useMemo` like it's a silver bullet. But if you're memoizing a component, and its props include an object or array created inline, you might still be triggering unnecessary re-renders. Why? JavaScript's reference equality. ```javascript // The common pitfall: const MyComponent = React.memo(({ config }) => { /* ... */ }); function Parent() { // `configObject` is a new object on every render const configObject = { theme: 'dark', size: 'medium' }; return <MyComponent config={configObject} />; } ``` Even if `theme` and `size` values are the same, `configObject` is a new reference each time `Parent` renders. `React.memo` sees a new prop and re-renders `MyComponent`. The fix? Memoize the object itself: ```javascript const MyComponent = React.memo(({ config }) => { /* ... */ }); function Parent() { const configObject = useMemo(() => ({ theme: 'dark', size: 'medium' }), []); // Empty dependency array means it's created once return <MyComponent config={configObject} />; } ``` Now, `configObject` maintains its reference across `Parent` renders, letting `React.memo` on `MyComponent` actually do its job. This small detail can make a massive difference in complex applications with deeply nested or frequently updating components. It's not about premature optimization, it's about understanding how React and JavaScript work together. What's a subtle React performance trap you've encountered and fixed? #React #Frontend #JavaScript #WebDevelopment #Performance
More from this author
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
I think 💬 this modules concept also work from me in mobile development—anyone know mobile development tell me I am right.