Why do some people have images in their website linked to from their CSS, rather than just referencing the image once in their HTML?

This is a cool trick that uses text-shadow to make text glow like a light:

color: #00ffc0;

text-shadow: 0 0 1px #00ffc0,0 0 11px #00ffc0;

the trick is to give several text-shadow being more and more blurred and with a more and more transparent color.

Hope it can help some ! :)

The question is in the title.

I've been using devtool in my own personal way for debugging and working with CSS for almost a decade now. But I never really took the time to see how other devs are using it. I'm sure I'm missing on a lot of cool features or ways of doing.

(I saw that Ahmad Shadeed wrote a book about it, but I don't know what to expect from it)

Hi Reddit,

I'm a 15 year old going into the 11th grade and I want to make Web Design (or something of that nature) my career. I've been learning it off and on since I was 14. I'd describe myself as a beginner. I can make simple static websites. I don't know grid or flexbox yet (I know, that's kind of bad).

Because I want a job that would require me to use HTML, CSS, and Javascript, I know I will need skill. I want to progress into a beginner into a pro. I'm also going to take a computer class that will go over HTML, CSS, and Javascript, but I don't know if it will go in depth.

I'm going to study lots over the summer in hopes of becoming an intermediate. I'm wondering what I need to learn to be employable, but also what the fundamentals are, so I can master them.

Thanks so much

Like ai is too good at it and I’m wondering if it’s worth it to learn everything from scratch. Isn’t it even more powerful if I instead learn some basics and how to build with ai? I feel like I’m cheating, I make beautiful websites that would take weeks of coding in just a few minutes.. Is there any advantage in actually learning how to do it without ai?

As it says. I am working on a Wordpress site built using the Bridge theme incorporating the WPBakery builder. I have a section in the middle that has a row (defined by the background photo of the park) and two columns - image attached. One column has a picture of a light that has to be flush with the bottom of the section and the other column has a green box with text I am trying to center vertically.

This is the problem I am having. I am trying to use Flexbox to center the green box but in order for it to work the parent element has to have a defined height. However, if I define a height, the image to the left no longer sits flush with the bottom of the parent section, and currently the only way I've figured out how to do this is set the parent height at 100%. Basically if I fix one side I break the other. Any suggestions on how to fix, or is there another non-flexbox method that I am not seeing that would accomplish what I am trying to do?

Any help would be appreciated.

Hey everyone,

While working on one of my projects, I kept running into the same issue again and again: checking responsiveness across multiple devices was taking way too much time.

I would make a small UI change, it would look fine on desktop, but then something would break on mobile. Then I’d fix mobile, and tablet would look off. It became a loop of resizing the browser, switching device modes, and testing one screen size at a time.

I tried looking for tools that could make this easier, but most of them either showed only one device at a time or didn’t really fit how I wanted to review the UI.

So I built Multi Device Viewer, a Chrome extension that lets you preview multiple devices side by side in one view.

It helps with:

• Viewing multiple devices at once
• Testing mobile, tablet, desktop, and custom screen sizes
• Catching responsive layout issues faster
• Reviewing UI changes without constantly resizing or switching tabs

Would love to hear your feedback if you try it.https://chromewebstore.google.com/detail/multi-device-viewer/jfcnekmenjickfihkniaoaklehjmdhdb?authuser=0&hl=en-GB

https://preview.redd.it/wr2nofgtjw1h1.png?width=2048&format=png&auto=webp&s=135ccfc9bd207e34ae53a338180499b6c402c79f

If you're centering content inside a container, Flexbox is usually the simplest solution.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Why it works -

• align-items: center → vertical alignment
• justify-content: center → horizontal alignment
• height: 100vh → full viewport height

After being out of the CSS game for a while, I recently started working on a smol personal website and am playing around with some fancy newish css features.

I'm looking to make coloring my website more clean and scalable by heavily utilizing light-dark() and color-mix().

My idea was to only define a few base colors and then automatically generate derivatives, e.g.:

:root {
  --color-accent: light-dark(#3dccb1, #39CFB3);
  --color-bg: light-dark(#e5efec, #121212);
  
  --color-accent-muted: color-mix(in srgb, var(--color-accent) 50%, var(--color-bg) 50%);
  --color-bg-elevated: color-mix(in srgb, var(--color-bg) 90%, light-dark(#000, #fff) 10%);
}

Is this a decent practice at all or just a stupid idea?

Are there any websites/frameworks/concepts out there that do this, that I can have a look at?

How many and what kind of base colors do you think are needed to be able to generate derivates for any given purpose from them?

I just downloaded the Orbitron font from Google Fonts to use in my website. The way I would like to incorporate it in my CSS is as follows:

@font-face {
    font-family: orbitron;
    src: url("orbitron/Orbitron-VariableFont_wght.ttf")
}

.orbitron {
    font-family: orbitron;
}

But since the OFL states that

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

this feels like it would not be allowed. Am I correct in that assumption?

I’ve been seeing people argue XPath vs CSS selectors like it’s some huge loyalty thing, so I’m curious how people here actually use them once a scraper gets past the quick test stage.

I used to default to CSS selectors because they felt easier to read while I was building. They still feel cleaner to me when the page has decent class names or a simple structure. The problem is that a lot of sites do not make it that easy. Sometimes the useful data is sitting near a label, inside a weird table, or buried in markup that clearly wasn’t written with scraping in mind.

That’s where XPath started making more sense to me. Not as my default for everything, but as the thing I reach for when CSS starts feeling like I’m forcing it. At this point I don’t really care which one is supposed to be better. I care about what I can come back to later without hating myself when the site changes.

Hi everyone,

I'm currently refactoring a navigation component and I'm torn between two different BEM (Block-Element-Modifier) approaches regarding code architecture and complexity.

The component is a navigation list (nav), but the individual items are becoming quite complex, containing icons, titles, and potentially more elements later on.

I see two ways to structure this in BEM, and I would love to get your input on best practices.

Approach A: Flat BEM (Everything belongs to the main block)

In this approach, I keep everything attached to the main .nav block. The HTML looks clean and flat, but I worry that as the item grows (and needs specific styling for active/hover states), the CSS selectors might become too deeply nested (e.g., .nav__item--active .nav__icon).

HTML

<nav class="nav">
    <div class="nav__item">
        <span class="nav__icon">🏠</span>
        <span class="nav__title">Home</span>
    </div>
</nav>

Approach B: Item as a New Independent Block

In this approach, I break the chain from the main .nav block and elevate the item into its own independent block (.nav-item). This keeps the CSS for the item completely encapsulated and independent.

HTML

<nav class="nav">
    <!-- The item becomes its own block -->
    <div class="nav-item nav-item--active"> 
        <span class="nav-item__icon">🏠</span>
        <span class="nav-item__title">Home</span>
    </div>
</nav>

(Note: I could also mix them like <div class="nav__item nav-item"> to separate layout positioning from component styling).

My Question:

Which approach is considered best practice when items start to become complex?

• Does Approach A break scalability when items "explode" with more sub-elements?
• Is Approach B preferred for modularity, or does it unnecessarily fragment the component?

How do you usually handle complex list items or navigation items in your BEM projects?