GithubHelp home page GithubHelp logo

Attribute order - id first about code-guide HOT 5 CLOSED

mdo avatar mdo commented on July 3, 2024
Attribute order - id first

from code-guide.

Comments (5)

mdo avatar mdo commented on July 3, 2024

More than anything else, my reasoning has been doing classes first because it's from general to specific.

from code-guide.

mahnunchik avatar mahnunchik commented on July 3, 2024

Yes, it's a good (logical) reason.

But the name and id of the element should not be long. But it not so for the classes, src, and href, and in particular for data-* attributes.

from code-guide.

robinrendle avatar robinrendle commented on July 3, 2024

I’m really surprised there wasn’t a rule in here about avoiding ids because of their specificity. They’re simply too hazardous for the long-term maintenance of a project’s codebase.

from code-guide.

mdo avatar mdo commented on July 3, 2024

ids can be helpful, but yes, they should be avoided in your CSS. I'll document that—and JS classes. Opening an new issue for that.

from code-guide.

GreenImp avatar GreenImp commented on July 3, 2024

I know this issue is closed now, and I understand why you suggest to put class before ID, but why the suggested order for other attributes?

I always use this ordering:
type, name, value, src, href, for, alt, title, data-*, id, class
(I don't tend to use aria-* or role).

I feel that the first ones are the most important/relevant for defining the element, get less specific as you go along; therefore class is at the end as the least relevant.
I'm not suggesting one is write and the other is wrong, but would really like to hear why you chose the order that you did (genuine interest), as I can't see a particular order for the most part.

from code-guide.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.