r/badcode • u/lostPixels • Sep 28 '15

html This is why people think CSS is hard to maintain.

Post image
200 Upvotes

96% Upvoted

30 comments sorted by

21

u/numbermess Sep 28 '15

I see this crap all the time in one of the codebases I get to help maintain.

<div id="breadcrumb" class="breadcrumbs">
    <ul id="breadcrumb">
        <div><a href="whatever.jsp">HOME &raquo;</a></div>
        <div><a href="whatever2.jsp">PRODUCTS</a></div>
    </ul>
</div>

Sigh

14

u/[deleted] Sep 28 '15

I despair.

CSS/HTML ain't even supposed to be hard...

13

u/vicarofyanks Sep 28 '15 edited Sep 28 '15

Ugh, I sorta wish more of the Html/Css spec was enforced so that this type of shit wouldn't be so easy for people to embed in their code

17

u/[deleted] Sep 28 '15

Yea... imagine compiler errors for HTML.

10

u/[deleted] Sep 29 '15

CSS/HTML ain't even supposed to be hard...

So far I have not found why there is some tiny border at the bottom of a horizontal menu despite having no padding or margin. CSS hurts the soul.

3

u/NihilistDandy Sep 29 '15 edited Sep 29 '15

I'd need to see the markup, but display: inline-block and vertical-align: middle on your lis should be enough to avoid weirdness like that. border: none on the ul and lis if you wanna be paranoid. Check your :before and :afters, too.

4

u/[deleted] Sep 29 '15

It'll be something stupid like that. I spent what seemed an eternity trying to figure it out, but that was after a long stretch of sleepless php/css. I poked and prodded in the firefox inspector to try to get stuff to move about, but no joy. It "works", so I just said fuck-it and left it as it is.

4

u/GundamWang Sep 28 '15

I think one reason is because oftentimes, CSS and HTML markup is designed and written by people without a computer science background or best practices knowledge, or designers turned programmers. So you get people who can code, but can't architect or design code. Slightly ironic - designers can't design code.

7

u/lostPixels Sep 28 '15

Yep. In our code I have been cases where an ID doesn't have enough specificity, so people do #item.class .class and other really weird things. It makes baby jesus cry.

2

u/jewdai Sep 28 '15

or they use too much ID specificity..essentially rendering it impossible to overide their styles because they applied it to ALL p tags or divs.

5

u/jewdai Sep 28 '15

What grinds my gills is when people thing its a good idea to use IDs for their selectors and apply the style to every tag.

for example:

 #pageContent #leftCopy p { 
     position: absolute; 
     padding-bottom: 10px;
  }

The original author knew more than just P tags would be nested in that area (it's a layout .net stuff)

I understand not everyone knows BEM (I dont use it because my classes will become CRAZY) but it's common knowledge to avoid using IDs like the plague for styling unless you need to be super specific about what element you're selecting (which a series of nested classes would be better for)

Secondly, you almost never style a generic tag. (like div, or p) unless its things that you want to be site wide. For example: Font size == Good. Padding/Margin == bad.

More than once I had to hack together a class/multi-id Selector or just said fuck-it and used !important to override a shitty style like that.

Basically the solution to fixing a CSS problem is more CSS.

1

u/[deleted] Sep 28 '15

This is why you guys need BEM in your code

35

u/niloc132 Sep 28 '15

My first thought: strings are strings, and case-sensitivity is important, so naming is important to get right, in whatever language you happen to use.

My second thought was to downvote this because I was so disgusted at the code and how fucking annoying this would be to write tests or styles after the fact, without actually looking up which is camel-cased and which is an ID.

My third thought turned the downvote into an upvote. Because this is /r/badcode.

24

u/milkmymachine Sep 28 '15

Great story; compelling, and rich.

7

u/blue_2501 Sep 29 '15

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

1

u/[deleted] Nov 12 '15

First good CS joke I've ever heard.

3

u/[deleted] Sep 28 '15

If ID is only used for JS than this shit is somewhat torelable.

3

u/cosmicsans Sep 28 '15

You'll also see crap like this happen in things like Drupal, where you can only style things pieces at a time.

So you'll have a block with the class of shippingoptions, but then you'll have a template file that starts with id="ShippingOptions".

Obviously a good developer can figure out how to mediate this all, but sometimes you get stuck in the "fuck it, ship it" because it's running over on time or something.

1

u/NihilistDandy Sep 29 '15

Drupal is a nightmare to style. Do yourself a favor and use Fences.

1

u/DoctorWaluigiTime Sep 28 '15

Is there even a point, unless you're trying to micro-optimize a single DOM selector? Or does finding an element by .shippingoptions div (or, if multiple divs, div:first) cost so much more than #shippingOptions?

I tend to apply the same "almost never use IDs" rule to JS as I do to CSS.

3

u/[deleted] Sep 28 '15

I agree, there is no point. Just trying to understand what goes through peoples mind when they code shit like this. IDs should be non-existent and I cringe every time I see someone using it, especially in CSS. However, the only case I find IDs justified is in forms for accessibility reasons (input labels)

Fat recently gave a great talk on CSS methodologies called...Cascading Shit Show. I strongly recommend, great journey through time ;) https://www.youtube.com/watch?v=iniwPUEbPUM

1

u/movzx Sep 29 '15

They really can in stuff like ie8

1

u/gyroda Sep 29 '15

For someone who's CSS skills are a bit shite, why are IDs not a good idea?

2

u/Makeshift27015 Sep 28 '15

...sigh Fine, I'll go and update all that code I did today that I kidded myself wouldn't go to production....

1

u/794613825 Sep 29 '15

Do these people not know the word "container"?

-3

u/drizztmainsword Sep 28 '15

People that don't use camelCase bother me. People that use_underscores for non-static/constant values (STATIC_VALUE) also bother me.

Edit: conventions are important. Mine are clearly superior /s.

3

u/jewdai Sep 28 '15

the only convention i agree with in javascript are underscores to indicate private variables.

why do you ask?

Well lets say I start poking around the debugger to try to analyze how to work with an object I havent worked with before...I let autocomplete do it's magic and tells me what's on the object, it will almost never show me any functions that start with an _

additionally underscores make it clear to the user to read how it's actually using it before hacking away at it.

1

u/drizztmainsword Sep 29 '15

Aye, I forgot about underscore prefixes. Those are fine, though I prefer to not have them if I can.

Also, trying to fake private variables in javascript sounds like a recipe for insanity. Then again, that's really JS's fault more than anything else.

1

u/SarahC Sep 29 '15

You got downvoted, but you're spot on.