Skip to content

Started modern css tools #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajay-dhangar merged 2 commits into from
Dec 7, 2025
Merged

Started modern css tools #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
627206c
Started modern css tools
ajay-dhangar Dec 6, 2025
ffb824c
done css framework docs
ajay-dhangar Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 133 additions & 1 deletion docs/css/modern-css-tools/browser-devtools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,133 @@
<ComingSoon />
---
title: "Browser Developer Tools for CSS"
description: "Master the art of debugging and styling CSS with powerful browser developer tools. Learn to inspect elements, modify styles, simulate responsive designs, and more."
tags: [CSS, Developer Tools, Browser, Debugging, Front-end]
---

Browser Developer Tools are an indispensable set of utilities built directly into web browsers. For front-end developers, especially when working with CSS, these tools are your best friend for debugging, inspecting, and live-editing styles. This tutorial will guide you through the essential features of browser DevTools, primarily focusing on their application to CSS.

<AdsComponent />
<br />

## Opening Developer Tools

Most browsers offer multiple ways to open Developer Tools:

1. **Right-click an element** on a webpage and select "Inspect" (or "Inspect Element"). This will open the DevTools and automatically select the element you clicked in the Elements panel.
2. **Keyboard Shortcut:**
* **Chrome/Edge/Brave:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS)
* **Firefox:** `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Option+I` (macOS)
* **Safari:** `Cmd+Option+C` (macOS) - Ensure "Show Develop menu in menu bar" is enabled in Safari Preferences > Advanced.
3. **Browser Menu:** Look for "More Tools" > "Developer Tools" in Chrome/Edge, or "Web Developer" > "Toggle Tools" in Firefox.

Once opened, you'll typically see a panel docked to the side or bottom of your browser window.

## The Elements Panel: Your CSS Command Center

The Elements panel is where you'll spend most of your time working with CSS. It displays the HTML structure of the page and, crucially, the computed styles for each selected element.

![Browser DevTools Elements Panel](https://developer.chrome.com/static/docs/devtools/css/reference/image/an-example-a-selected-el-73f5c083a4f5_856.png)

### 1. Inspecting Elements

When you select an element in the HTML tree of the Elements panel, the right-hand sidebar will update to show its styles.

* **Styles Tab:** This is the most frequently used tab. It lists all the CSS rules applied to the selected element, ordered by specificity and source. You can see which rules are active, which are overridden (crossed out), and where they come from (e.g., `style.css:25`).
![Styles Tab](https://developer.chrome.com/static/docs/devtools/css/reference/image/various-links-highlighted-4c3e7fc090e71_856.png)

### 2. Live Editing CSS

One of the most powerful features is the ability to live-edit styles directly in the browser.

* **Modify Existing Properties:** Click on any property value (e.g., `font-size: 16px;`) and type a new value. The changes are immediately reflected on the page.
* **Add New Properties:** Click on an empty line within a CSS rule block to add a new property-value pair.
* **Toggle Properties:** Next to each declaration, there's a checkbox. Unchecking it temporarily disables that specific CSS property, which is excellent for isolating issues.
* **Add New CSS Rules:** At the top of the Styles tab, you can often find a `+` button or an area to add a new CSS rule for the selected element. This is useful for testing entirely new styles.

<video controls className="w-full h-auto">
<source src="https://developer.chrome.com/static/docs/devtools/css/reference/video/NJdAV9UgKuN8AhoaPBquL7giZQo1/vDfXTULIyNIJXVw6lKvf.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>

### 3. Understanding the Box Model

The "Computed" tab (often next to "Styles") displays the resolved values for all CSS properties. More importantly, it features an interactive **Box Model** diagram.

![Box Model](https://developer.chrome.com/static/docs/devtools/css/reference/image/the-computed-tab-577802944e549.svg)

This diagram visually represents the margin, border, padding, and content area of the selected element. Hovering over parts of the diagram will highlight the corresponding area on the actual webpage, making it incredibly useful for debugging spacing issues.

<AdsComponent />
<br />

## Other Important Panels for CSS

### 1. Device Mode / Responsive Design Mode

![Device Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/device-mode-toggle_856.png)

This mode (usually toggled by an icon that looks like a mobile phone and tablet) allows you to simulate different screen sizes, resolutions, and even device pixel ratios. It's crucial for testing and developing responsive designs without needing multiple physical devices. You can drag the edges of the viewport or select predefined device presets.

![Responsive Design Mode](https://developer.chrome.com/static/docs/devtools/device-mode/image/the-device-toolbar-ffe4a87bfd6fc_856.png)

### 2. Sources Panel

While primarily for JavaScript debugging, the Sources panel allows you to view and modify your actual CSS files. You can set breakpoints within your CSS (e.g., on a style declaration inside a `@media` query) to see when and how styles are applied. Any changes made here are also live, but remember they are temporary until you save them to your actual project files.

### 3. Console Panel

Though mostly for JavaScript, the Console can sometimes show CSS-related errors or warnings, especially if you have issues with `@import` rules or invalid syntax that the browser can't parse.

## Advanced CSS Debugging Techniques

### Forced States (Hover, Focus, Active, Visited)

In the Styles tab, you'll often find an option (e.g., `:hov` in Chrome, or a "Toggle Element State" icon) that allows you to force an element into a `:hover`, `:focus`, `:active`, or `:visited` state. This is incredibly useful for styling and debugging interactive elements without constantly moving your mouse or tabbing.

![Forced States](https://developer.chrome.com/static/blog/new-in-devtools-123/image/focused-page_856.png)

### CSS Grid and Flexbox Inspectors

Modern browser DevTools come with excellent visual inspectors for CSS Grid and Flexbox layouts. When an element has `display: grid` or `display: flex` applied, a special icon appears next to it in the Elements panel. Clicking this icon overlays visual guides on the page, showing grid lines, track sizes, and flex item distribution.

<Tabs>
<TabItem value="Grid Inspectors" label="Grid Inspectors" default>
![Grid Inspectors](https://developer.chrome.com/static/docs/devtools/css/grid/image/discover-grid-ae97f2f0f76fa_856.png)
</TabItem>
<TabItem value="Flex Inspectors" label="Flex Inspectors">
![Flex Inspectors](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/hover-a-flexbox-element-97868d0b93e3e_856.png)
</TabItem>
</Tabs>

<AdsComponent />
<br />


## Visualizing the DevTools Workflow

Here's a Mermaid graph illustrating a common CSS debugging workflow using browser DevTools:

```mermaid
graph TD
A[Start: Encounter CSS Issue] --> B{Open DevTools};
B -- Right-Click Element --> C[Elements Panel: Inspect Element];
B -- Keyboard Shortcut --> C;
C --> D[Styles Tab: Review Applied CSS];
D -- Styles Overridden? --> E{Why? Specificity? Source Order?};
E -- Yes --> F[Adjust Specificity / Order in Editor];
E -- No --> G[Live Edit CSS in DevTools];
G -- Test Changes --> H{Looks Good?};
H -- Yes --> I[Copy Changes to Source File];
H -- No --> J[Try Different CSS Properties / Values];
J --> G;
D -- Spacing Issue? --> K[Computed Tab: Box Model];
K -- Inspect Margins/Padding/Border --> G;
D -- Responsiveness Issue? --> L[Device Mode];
L -- Simulate Devices --> G;
F --> A;
I --> M[End: Issue Resolved];
```

## Conclusion

Browser Developer Tools are an incredibly powerful and essential suite of tools for anyone working with CSS. Mastering them will significantly speed up your debugging process, help you understand how styles are applied, and empower you to build more robust and responsive web designs. Practice regularly with these tools, and they will become an invaluable part of your development workflow.
157 changes: 156 additions & 1 deletion docs/css/modern-css-tools/css-in-js.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,156 @@
<ComingSoon />
---
title: "CSS-in-JS (Component-Based Styling)"
description: "Explore CSS-in-JS, a paradigm that integrates CSS directly into JavaScript components, offering localized scoping, dynamic styling, and enhanced component portability in modern frameworks like React and Vue."
keywords: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling]
tags: [CSS-in-JS, component styling, styled-components, Emotion, JSS, component portability, scoped CSS, dynamic styling]
sidebar_label: CSS-in-JS
---

**CSS-in-JS** is a modern styling paradigm where CSS is authored and managed directly within JavaScript files, typically alongside the component logic. This approach emerged to solve challenges inherent in large, component-based applications, such as global CSS conflicts, managing dependencies, and enabling truly dynamic, state-driven styling.

The primary benefit is **local and automatic scoping**: every component gets a unique set of styles, eliminating global conflicts and making components entirely self-contained and portable.

<AdsComponent />
<br />

## 1. Why CSS-in-JS? The Problems it Solves

Traditional CSS, even with preprocessors, often relies on naming conventions (like BEM) to prevent conflicts. CSS-in-JS handles scoping automatically.

### A. Automatic Vendor Prefixing

Most CSS-in-JS libraries automatically handle vendor prefixes (like PostCSS Autoprefixer) without any separate configuration.

### B. Scoped Styling (No Conflicts)

The library generates a unique, hashed class name for every style block, applying it only to the intended component. This eliminates the risk of global styles accidentally overwriting component styles.

### C. Dynamic, State-Driven Styling

Because the styles are defined in JavaScript, they can easily access component props and state. This allows for complex, instant visual changes without needing to toggle dozens of utility classes.

### D. Component Portability

Styles are bundled directly with the component file. When you move a component to a new project or environment, its styles travel with it, making it truly modular.

## 2. Popular CSS-in-JS Libraries

Several libraries implement the CSS-in-JS philosophy, with **Styled Components** and **Emotion** being the most widely used.

### A. Styled Components

Styled Components uses **Tagged Template Literals** (the backtick syntax in JavaScript) to allow developers to write actual CSS syntax within their JavaScript files. It is known for its elegant API and focus on creating reusable React components with styles attached.

#### Example: Styled Components

```javascript title="Header.js"
import styled from 'styled-components';

// 1. Define a styled component (a button, in this case)
const PrimaryButton = styled.button`
/* Standard CSS syntax used here */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: ${props => (props.primary ? '#1e3a8a' : '#ccc')};

&:hover {
opacity: 0.9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
`;

// 2. Use it in the render method like a normal component
function Header() {
return (
<div>
<PrimaryButton primary>Submit</PrimaryButton>
<PrimaryButton>Cancel</PrimaryButton>
</div>
);
}
```

<AdsComponent />
<br />

### B. Emotion

Emotion is highly flexible and can be used with both the Tagged Template Literal approach (similar to Styled Components) and an **Object Style** approach. It is known for its high performance and smaller footprint.

#### Example: Emotion (Object Styles)

```javascript title="Header.js"
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const primaryStyle = css({
backgroundColor: '#1e3a8a',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
});

// Use the css object directly in the JSX 'css' prop
function Header() {
return (
<button css={primaryStyle}>
Emotion Button
</button>
);
}
```

## 3. How CSS-in-JS Works

When a component is rendered, CSS-in-JS libraries follow these steps:

1. **Style Extraction:** The CSS defined inside the JavaScript component is extracted.
2. **Unique Hashing:** The library hashes the CSS content to generate a unique class name (e.g., `sc-1a2b3c`).
3. **Injection:** The actual CSS rules are injected into a `<style>` tag in the document's `<head>`.
4. **Application:** The generated unique class name is automatically applied to the rendered HTML element.

<AdsComponent />
<br />

## 4. Advanced Concepts

### A. Theming

CSS-in-JS libraries offer robust solutions for global theming. A **Provider** component (e.g., `<ThemeProvider>`) wraps the application, injecting theme variables (like color palettes or spacing units) that can be accessed by any styled component. This allows for easy dark/light mode toggling or brand changes.

### B. Server-Side Rendering (SSR)

For performance, styles need to be pre-rendered on the server so that the initial page load displays styles immediately (preventing the "flash of unstyled content" or FOUC). All major CSS-in-JS libraries provide tools to efficiently extract and inject critical CSS during the SSR process.

### C. Performance and Headaches

While popular, CSS-in-JS is not without drawbacks:

* **Runtime Overhead:** Styles are computed at runtime, which can slightly impact performance, especially on first load.
* **DevTools Clutter:** The generated unique class names can make inspecting elements in browser developer tools more challenging than using readable BEM class names.
* **Learning Curve:** It requires developers to be comfortable with both JavaScript and CSS syntax to manage styles effectively.

## Try it Yourself!

Now that you understand the basics of CSS-in-JS, why not try it out yourself? You can use online editors like CodePen to experiment with CSS-in-JS libraries directly in the browser.

<CodePenEmbed
title="CodeHarborHub CSS in Js Demo"
penId="wBGQVmd"
/>

## 5. Resources for Further Learning

To implement CSS-in-JS in a real-world application, start with the official guides of the two leading libraries.

### A. Styled Components

* **Official Documentation:** [https://styled-components.com/](https://styled-components.com/docs)
* **Theming Guide:** Essential for large applications. [https://styled-components.com/docs/advanced\#theming](https://www.google.com/search?q=https://styled-components.com/docs/advanced%23theming)

### B. Emotion

* **Official Documentation:** [https://emotion.sh/docs/introduction](https://emotion.sh/docs/introduction)
* **CSS Prop:** The powerful feature for injecting dynamic styles directly into JSX elements. [https://emotion.sh/docs/css-prop](https://emotion.sh/docs/css-prop)
Loading