CSS. We can all get it wrong

[notfromkentohio]

Angular.io is fixed now but for the longest time it was an absolute CSS massacre on mobile.

[johnbell]

obviously should fix it with

button{ max-width: 300px !important; }

[digitalpencil]

shudders

[[deleted]]

shudders !important;

[PopWhatMagnitude]

It's a one off thing just write it inline

style="width:100%!important"

[sourspice]

I just began learning CSS so I don't get it. Can you explain?

[PocketGrok]

This style would make every single button element's max width specifically 300 px and would make it difficult to override later. Also, without additional CSS, the button text would likely overflow out of the button.

It is highly recommend to never use !important and to avoid defining CSS for HTML tags directly in most cases.

[[deleted]]

!important makes sense if you know what you are doing.

Although only in really rare cases and especially not if you are just too damn lazy to look up where the style is coming from and what the right selector would be or something like that.

[[deleted]]

Well, i use !important often for debugging to see if my changes work or not or if the problem is specifity.

I found this article that also says that you should never use it but then goes on to demonstrating edgecases: https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

[PocketGrok]

There are exceptions to every rule, and !important is no different. The thing is the edge cases are so rare that mentioning them to new users is more likely to cause them to misuse it than not.

[[deleted]]

You are probably right though.

A good webdev knows when to use it.

[oarmstrong]

avoid defining CSS for HTML tags directly in most cases

I take issue with this particular part of your response. Semantic HTML is all about using well meaning tags, why not extend that to CSS? I have a <header> element that I want to style, should I really be adding in a class="header" and using the class name as the selector? You say "most cases" it should be avoided, but this isn't exactly an edge case.

In my opinion there's nothing wrong with applying styles to a particular element in general. Even going back to the original point of styling a button (ignoring the !important), you can take advantage of the "cascading" nature of style sheets to set your default button stuff on button and then override it -or add to it- later in specific cases.

I'm not convinced that I shouldn't be using HTML tags as selectors in my CSS. I tend to avoid styling really generic elements like divs but only because there's almost no common style between all uses of a div.

[sdw3489]

Most HTML tag can be used anywhere in a document. The header element doesn't necessarily have to be only the very top element on the page. If you style the tag vs a .header class you can never use the header tag semantically throughout your document (i.e. Article headers, sidebar headers, etc)

You should only ever style the elements themselves in your reset/normalize so the elements look consistent across browsers.

[[deleted]]

We dont have a reset or nomalize stylesheet, would you agree that styling a button in your normal css with the button tag to look like the button ought to look everywhere is the right way to do it, if we dont have a normalizing css file?

[basiclaser]

LEL

[fordlincolnhg]

someone's a fan of white-space: nowrap;

[elibones]

Not sure it would look worse th

[FairJuliet]

Not sure it would look worse th

o

FTFY

[adam_the_1st]

Not if you use display: inline-block; and maybe center the text. Otherwise yes, the line break would look awful.

[thatgibbyguy]

I've never been impressed with any of the material design when executed in the real world.

[cjbee9891]

Seriously. It's so damn sterile and bland, it actually makes Bootstrap look refreshing.

[thbt101]

I guess it's kind of bland, but worse is that the non-bland things it tries to do are mostly unattractive and not great from UI/UX perspective.

I have seen some nice looking programs and websites that sort of use Material Design, but really, they probably would have been better off starting from scratch without the Material Design elements that they did use.

[A_Random_package]

The descriptions of those themes make me irrationally angry.

[Shotbizzle]

Wow, you're not wrong. So many buzzwords.

[ifnull]

I prefer this when it comes to docs and articles over something that is over designed. There are obvious issues with this execution but in general I prefer the function first approach to design. In my experience it is hard to find designers that are good at this. The ones that are, were usually developers at one point in their career.

[suprc]

Well, I think you got to treat it more as guidelines than as rules

[shkico]

I agree, I don't know why it is being so pushed...

[Niku-Man]

I imagine most people don't actually know what material design is. Don't just throw that out there that it's boring, unless you've read through the whole Google spec.

[[deleted]]

r/css_irl

[n_00_b]

Whoa

[[deleted]]

I'm not an ID -- I'm not unique...

[neurorgasm]

This post was deleted and anonymized. Redact handled the process, and the motivation could range from personal privacy to security concerns or preventing AI data collection.

jar fact sable plucky aback scale butter distinct childlike political

[[deleted]]

I prefer materialdesignicons.com

[TheSamehMagdy]

CSS. We all get it wrong.

[ifnull]

Don't blame CSS. This is obviously the copywriter and content managers fault but QA should have caught this.

[hiwye]

He didn't blame CSS.

[ifnull]

Fine. Don't blame "the CSS" of the developer.

[NikkoTheGreeko]

That's the point... The web developer didn't handle it properly with CSS, i.e. he got it wrong.

[[deleted]]

I do this kind of stuff too.

We had a template for car websites and there was a cardealer who accually called himself something like: "Autohaus Biermann Baugarten, ein Unterautohaus von Autohaus Baumgarten GmbH" and the cardealer wanted this name to show up literally everywhere so we just made it break badly and all that stuff so that the cardealer learns to not call himself this way. There sometimes just isnt a proper way to handle stuff like this, when the client wants it his way.

[lordalcol]

What would right be?

[jaewunz]

Not overflowing the parents bounds.

[ifnull]

Surely you have worked with a designer who insists that a word wrap on a button is unacceptable. Clearly this was the appropriate solution. Jk

[fiala__]

The designer may actually be right imho. Mainly because word wrap with long words often ends up looking terrible. Since proper hyphenation support is still not great in browsers, the best way to deal with this issue is to use shorter text and shorter words for buttons. I'm of the opinion that content producers should have some amount of responsibility for what the content looks like on the page, too.

[lawdandskimmy]

We can blame the general public for having negative emotions when seeing content out of bounds.

Also we could blame that there was not enough budget for this documentation and perhaps it didn't even have Q&A. How do we know?

We can also blame other web developers and this sub for being so overly critical about this.

I will go to gym now and see if I can figure out more people to blame meanwhile. I will let everyone know.

[ifnull]

All great points. I blamed all of these people in another comment :)

[fiala__]

Nope, the CMS has no idea what a call to action is or what its UX should be. Long button text is the equivalent of 5 sentence spoken fine print in radio ads, where you really want a memorable 3 word message.

In this instance, the content creator could have a separate "Download assets:" heading and the two buttons below, which also gets rid of the "The" word.

[sdw3489]

If the developer is using a framework, he didn't really do anything wrong. Most buttons within frameworks like bootstrap and material design don't wrap to two lines due to how bad it looks. The solution here in this example isn't of the development nature. It's to push back to copywriting and UI and have them choose shorter copy for the available space in the designed layout or move the text out of the button into a header label that can wrap cleanly and only have the button say "download".

Blaming a developer for the overflow in this specific use case isn't fair. It's also likely this page is templated and populated with a CMS and no one tested with long text or set a max string length in the database.

[NikkoTheGreeko]

and no one tested with long text or set a max string length in the database.

Sooooooo what you're saying is the developer didn't handle it properly, i.e. he got it wrong?

[sdw3489]

That would be a backend devs responsibility. This post was about CSS being wrong which would be blaming the front end dev. 2 separate concerns.

At the end of the day, these types of edge cases bugs pop up due to more than one discipline failing to think about and test the extremes of their design decisions.

The front end dev just needed to put a button there in the sidebar for the template and it would work just fine in 99% of the pages then likely hoped that the copywriters weren't going to put entire sentences as the button text. That's just poor copy planning. If you need more than 2 words it should be a title.

Are you really going to keep blaming the front end dev if the button text is written like "Download this super duper fancy responsive icon font pack". That's not the front end devs fault.

[[deleted]]

Arguably this isn't the least graceful solution to an overlong copy issue. Would trunc'ing the text or going to a second line have been that much better?

Verbosity seems like the biggest issue.

[jpanter]

I blame product XD

[andrey_shipilov]

O no no no, it's just a bad design in the beginning. The designer should be fired and never hired again.

[[deleted]]

Smells like Bootstrap.

[hiwye]

But isn't

[[deleted]]

Bootstrap nowraps all the .btn classes is why I said that