Naming and calling elements in CSS/HTML

Question

I'm new on this site, and I don't even know if I'm posting on the right section but here we go.

I'm writing a simple HTML file with a CSS attached, in the HTML, I have a piece of code that is like this:

<ul id="thing_list">

    <li>
        <div>
            <header>
                <h2>Name of the thing</h2>
                <p>Some thing here</p>
            </header>
            <nav>
                <ul id="actions">
                    <li>Edit</li>
                    <li>Move</li>
                    <li>Delete</li>
                </ul>
            <nav>
        </div>
    </li>

And the CSS for this is like:

#thing_list li > div > nav li {
    list-style-type: none;
    display: inline;
    vertical-align: bottom;
}

#actions li {
    position: absolute;
    bottom: 0;
}

So, the question is, which way is better for me to name things? Is is better to define an ID/Class for everything or to define a few and use #thing_list li > div > nav li?

I'm not so sure if you guys can understand, english is not my main language, so please bear with me on that.

There are lot of resources online to help you with this, for example css-tricks.com/the-difference-between-id-and-class One key thing to remember is that ID must be unique — Huangism
– Huangism, Commented Aug 11, 2014 at 16:21
it depends what you are planning to do with your site. Otherwise whatever is more comfortable for you. — Grasper
– Grasper, Commented Aug 11, 2014 at 16:22
id 's must be unique, hence the name id. A class attribute can be attached to multiple elements. Classes are a way of grouping similar elements, e.g a <li class='nav-list' id='home'>Home</li> <li class='nav-list' id='about'>About Me</li> — PalinDrome555
– PalinDrome555, Commented Aug 11, 2014 at 16:24
First you really need to understand how selector works. what if you use > in your CSS. do you understand it. — Kheema Pandey
– Kheema Pandey, Commented Aug 11, 2014 at 16:24
My second suggestion is don't use so long group #thing_list li > div > nav li because it will take more time to Browser read this full syntax. — Kheema Pandey
– Kheema Pandey, Commented Aug 11, 2014 at 16:26

Academia · Accepted Answer · 2014-08-11 16:31:03Z

2

The big difference between CSS classes and CSS IDs is that a CSS class name can be used several times, while the CSS IDs are only used once. CSS IDs are used to apply CSS styles to the element and only element identified by the CSS ID. CSS classes should be used for items that you know you are going to use a lot. For example, using a common CSS class name, you can give the same styling to all tables on your webpage. The use of #thing_list li > div > nav li is not recommended as it takes extra time to process. Hope it useful!

answered Aug 11, 2014 at 16:31

Academia

4,1447 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

albert Over a year ago

theres no such thing as css classes or ids. they are html classes and ids

Academia Over a year ago

I know. But it's more easy to explain it this way. I've should used terms like CSS selectors instead!

Grim · Accepted Answer · 2014-08-11 16:40:58Z

0

First, use correct HTML (you better us dl/dt/dd for your example).

See css is "Cascading", so need to override styles in growing specificy. Depending of your choice of specificy.

Note: ID's shall be unique in a document because of the url-anchor.

If you say: Every input field must be blue but saluation must be red, you write this:

 <label>Name: <input></label>
 <label>Saluation: <input class="sal" ></label>

 <style>
 input{
     background-color:blue;
 }
 input.sal{ 
     background-color:red;
 }
 </style>

In this example you have the freedom to be more specific to the second input. Maybe you need the freedom in the future.

So exceptions shall always be more specific than generals.

edited Aug 11, 2014 at 16:40

answered Aug 11, 2014 at 16:35

Grim

2,16312 gold badges63 silver badges139 bronze badges

1 Comment

Grim Over a year ago

You will see, techniques like a normalizer.css or a reset.css are of very general specifity.

Collectives™ on Stack Overflow

Naming and calling elements in CSS/HTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related