DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > CSS Classes Don’t Work the Way You Think They Work

CSS Classes Don’t Work the Way You Think They Work

Ever taken the idea that CSS is easy for granted, only to turn around and have it stump you? One dev shares such an experience, and how he worked around it.

Swizec Teller user avatar by
Swizec Teller
·
May. 13, 17 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
7.11K Views

Join the DZone community and get the full member experience.

Join For Free
<p class="blue green red">This is some text</p>

Which color is this text going to be?

No cheating, give it a think...

Blue. The answer is blue?

I’m not lying. It’s really blue.

You can use any permutation of blue green red – the text is still blue. Try it! Play around.

Did you find the pattern?

CSS classes apply in the order in which they are defined, not the order in which they are invoked. This is not intuitive.

Look: if you switch around the CSS rules, the text becomes red.

Same HTML, same CSS classes, different order of definitions. Try it; change the code.

Maybe this is obvious to everyone but me, but I spent an embarrassing amount of time yesterday and today debugging some React components. It hits you when common components have default styling, and you want to override it in a specific instance.

const P = ({ className, children }) => (
    <p className={`italic blue ${className}`}>{children}</p>
); // default P

// ...

const Error = ({ errorText }) => (
    <p className="red">Red error!</p>
); // doesn't become red

The generic P component returns a <p> element with an italicand a blue class. You can expect text to be italic and blue by default.

Please don’t do that in real life. This is just an example.

It takes a className prop so you can extend classes used.

But when you use the Error component, which produces <p class="italic blue red">Red error!</p>, it’s not red. It’s blue because your CSS defines .red first and .blue second.

What?!

There is no workaround. This is expected behavior. The relevant part of W3C spec makes no mention of HTML attribute ordering.

How did I go 15 years without ever noticing?


Editorial Note: If you'd like to play around with this in Codepen, here's a link to the original article.

CSS

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Build a Data Pipeline on AWS With Kafka, Kafka Connect, and DynamoDB
  • How to Modify Java Command-Line Arguments
  • 4 Careers for People with Coding Backgrounds
  • Revoking Access to JWTs With a Blacklist/Deny List

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo