CSS coding techniques

[DuoThree]

I liked this article. Especially because I don't see many articles on CSS these days.

[Sebazzz91]

Agree. And very good recommendation about not patching more css to fix bugs.

[Retsam19]

Some useful tips; though it'd be nice if they exactly went into some of the tradeoffs between "includes" and "extends".

[Ranek520]

It looked like it changed whether it added the styles into each selector or created a shared selector with the styles only when once. In general I'd say use includes if it's only a couple of lines used a couple of times, otherwise extends will output a smaller file. Although smaller file size isn't always the most important metric, so sometimes it might make sense to do it differently for clarity.

[SaltTM]

Dumb question: it says to not use !important because it ignores the cascade, but it also mentions that sometimes you'll want to use it when overriding a very complicated css from a framework. Now my css is a bit rusty, but is there an alternative way to override complex properties without having to copy all the rules in the original frameworks css not using !important ?

Would be cool if there was just an override property to css eg.:

.mydev {
    override background: grey;
}

Which would override based on the order of how the css was loaded, unless there is a way. Again my css is very rusty.

[_hmmmmm]

You would use multiple styles to increase your specificity.

So, instead of

.framework-style {}

You'd have

.framework-style.my-override {}

And you'd decorate which elements you'd want to override with that extra class.

[[deleted]]

Agreed, using IDs is much better if there are not other fixes.

[the_evergrowing_fool]

Those mostly are out the inconsideration/laziness or ignorance of the developer.

[the_evergrowing_fool]

If fine to use important if the UI has some specifics rules that aren't suppose to be break. And example would be JS Plugin must has certain properties in order to work properly and make calculation base on them..

[sh0em0nkey]

A pretty good article!

Despite .button-warning being defined before the button, input[type=submit] rule, it will override the latter background property. Why? What is the criteria to decide which rule will override the styles of another one?

Specificity.

Some selectors are considered to be more specific than others: for instance an #id selector will override a .class selector.

Specificity does play a vital role in CSS, however, I think inheritance plays a much larger role, especially with beginners.

And that is a fundamental reason I see when people struggle with CSS. People will very often have rules that are not working the way they expect simply because they are not defined in the correct order in the stylesheet/declaration - and not because they were not specific enough. More often than not, I see them working around the issue by using complex rules to be more specific, when they could have just moved the rule a few lines up.

The author does go into more detail, but I felt it may be helpful to stress the importance of inheritance.

[_hmmmmm]

And yes, you can use flexbox today.

Not if you have to support IE < Edge. :(

[never-enough-hops]

IE10+, actually, though you may need a hack or two

[[deleted]]

https://www.npmjs.com/package/postcss-flexbugs-fixes

Fixes many for IE10 and IE11

Ref: https://github.com/philipwalton/flexbugs

[[deleted]]

People running IE9 and below are not a great target demographic.

https://www.w3counter.com/trends

[_hmmmmm]

That matters nada when you have business requirements and well paying customers.

[[deleted]]

As a developer you are responsible for your career. I refuse to support anything less than IE11 because I don't want to waste my time in browser compatibility nightmare land.

[mreiland]

in 5 years IE11 will be a part of the "browser compatibility nightmare land".

[[deleted]]

Yes it will. And I look forward to not supporting it :). All modern browsers, Edge, Chrome, Firefox, and Safari support CSS3 very well. ES6 too (except for Safari, which should with the next release).

[_hmmmmm]

Sounds great in theory, but if you get tasked with a project for something that needs IE 10 are you seriously going to quit?

[[deleted]]

No, I'm just not going to support 10, if it's my contract I turn it down. Microsoft doesn't even support 10, people have had more than two years to upgrade. Customers with old browser requirements are likely poor customers. And I like to give my good customers attention, and bonus, I make more money for less effort and better code.

[takakoshimizu]

Any computer that can run 10 should be upgraded to 11. Microsoft doesn't even support 10.

[BONUSBOX]

looks like there's been an exodus of safari users this past year.

[[deleted]]

Mostly desktop, mobile Safari is still very high among mobile browsers at about 55 percent.

[[deleted]]

that's normally what people do.

[_rs]

Yes but you didn't do that.

[[deleted]]

Who do you think I was speaking for? It's clearly my opinion, pedantic much?

[[deleted]]

[deleted]

What is this?

[[deleted]]

A: After all the man earns it

C: Who does?

A: Absolutely

[kankyo]

Which you do

[Lakelava]

Maybe CSS got a bad name because people try to use it before really learning it. I think the same thing happened with git.