• Geoff YuenGeoff Yuen, over 6 years ago (edited over 6 years ago )

    I think I'd rather use !important in my css rather than ids in my html. At least my crud is only in one file rather than two and I have the option of rewriting it. ...or use one of these ugly options:

    .btn[class] { rules } .btn.btn { rules }

    ...but most of the time you can get around !important by changing the order of your classes.

    3 points
  • Gareth ClubbGareth Clubb, over 6 years ago (edited over 6 years ago )

    I have worked on incredibly large code bases most of my career and I have never used an !important or IDs, seeing any of them I always took it as a lack of understanding with specificity as they can always be avoided.

    Stick to three class based selectors as a maximum and if you use a syntax similar to BEM then you will rarely run into problems.

    Saying that, I did find this in our codebase the other day which made me die a little inside:

    ID and Important

    2 points
    • Alfonse SurigaoAlfonse Surigao, over 6 years ago

      I love how it has the ID as the last selector in that long chain of class selectors, instead of just calling it by itself lol.

      0 points
  • Jodi WarrenJodi Warren, over 6 years ago (edited over 6 years ago )

    Curious why anyone would be getting in this situation in the first place.

    His initial assertion is (hopefully) way off base:

    [...] projects are often less than ideal and so it’s not uncommon to see !important used even in relatively ordered stylesheets.

    It certainly isn't where I come from. While I agree that higher specificity is always better than using an !important, if you're battling both then there are deeper problems.

    2 points
    • Fraser Deans, over 6 years ago

      If you're writing CSS which runs on other people's websites, such as a JavaScript widget or a browser extension, then this could be very useful.

      3 points
  • Scott de JongeScott de Jonge, over 6 years ago

    My 2¢

    I try to avoid the use of IDs for CSS selectors in order to clearly define their different context in the DOM. I use IDs for form inputs to assign their labels, IDs to name and use SVG , and IDs for accessibility (e.g. aria-labelby).

    Working this way mean that when you come across IDs in markup it is assumed that it describes a unique element on the DOM that is being used to link itself within its context.

    1 point
  • David DarnesDavid Darnes, over 6 years ago

    Excellent solution, seems obvious now. Best thing about this is that it's nowhere near as guilt ridden as putting !important.

    1 point
  • Martin LeBlancMartin LeBlanc, over 6 years ago (edited over 6 years ago )

    In general, IDs are not something that should be used specifically for CSS. Eg. #body makes little sense. Is it THE body object? Nope, it's a generic HTML element. IDs should be the name of a specific object like a class describe what class the object belongs to e.g. .

    !important is sometimes useful, but it's often a result of a badly structured CSS.

    0 points