CODEWITHSUNDEEP
css
blue-sky
blue-sky

Reputation: 53816

Bad css practice to style elements by their ID directly instead of referencing CSS class?

Is it bad practice to style an element using its id or should I be style every element referencing the appropriate css ?

<div id="test">
</div>

versus : 

<div id="test" class="testClass">
</div>

#test{
color:blue;
}

.testClass {
color:blue
}

Upvotes: 3

Views: 3778

Answers (7)

Rajiv Pingale
Rajiv Pingale

Reputation: 1015

I don't think, it will create much difference if you use ID or Class in style. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

for more ref you can see this link

http://css-tricks.com/the-difference-between-id-and-class/

In JavaScript, ID plays an Important role. If you used ID to search any DOM element, then the search will be faster as JavaScript Parser returns value of first element with that ID on the respective page. While if you used Class then JS search whole page and Collect all element with that class. Because of this search become little bit slow.

Upvotes: 0

emas
emas

Reputation: 666

It's not a bad practice, but it depends on the use you make.

If you style some rules for each element in your page, it quickly becomes impossible to understand what's going on, your css becomes a very long file.

Defining a class allows the same set of rules to be used by more than one element, so you should design your page to allow such a behaviour.

Usually, you should mix the strategies and you can, for example, style with id some "important" elements of the page, such as the header, the footer, the body, and so on, while the other pieces or components should be aligned using classes.

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

id vs class

id #

The ID must be unique in a document, and is often used to retrieve the element using document.getElementById.

In some documents (in particular, HTML, XUL, and SVG), the id of an element can be specified as an attribute on the element like so: .

However you can't use this attribute in a custom XML document without correctly specifying the type of the id attribute in the DOCTYPE.

Other common usages of id include using the element's ID as a selector when styling the document with CSS.

Note that IDs are case-sensitive, but you should not create IDs that differ only in the capitalization (see Case Sensitivity in class and id Names).

class .

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements. If you specify multiple class names, they must be separated by whitespace characters.

The class name of an element has two key roles:

As a style sheet selector, for use when an author wants to assign style information to a set of elements. For general usage by the browser. The class can be used to style SVG content using CSS.

Upvotes: 1

SpaceBeers
SpaceBeers

Reputation: 13947

ID's are unique. There should only ever be one element with that ID on your page. In terms of styling I don't think it's bad practice as such but ID's win in terms of specificity. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles, so any styles applied to an ID would override any others.

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors; 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

It's not a bad or good practice. The purpose of the id selector differs from class.

If you're planning to style this one element only and not re-use the styles anywhere else - id is you choice. If you need a lot of similar div-s to have the same style - use class

Upvotes: 6

cjm
cjm

Reputation: 844

If you want more than one element to have the colour of blue, then you need to use a class, otherwise an id is fine.

Upvotes: 0

Andy
Andy

Reputation: 14575

An ID is essentially the same thing as a class, ID is slightly faster, but should only be used on one element, whereas class can be used on many.

Upvotes: 1

Related Questions