Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Just had a discussion on some html concepts and the question arises should we give id's to hr and br tags. Both do not contain/handle the content in any way and both have fixed functionality. So invoking the DOM on basis of id's is a good coding practice or not?
Take scenario suppose I want to apply css to a hr tag. One option is giving hr an id/class like
<hr id="hrIdName"></hr>
and use css like
#hrIdName
{
}
Other is enclose hr in div and then use selector to implement the css
<div id="hrIdName">
<hr>
</div>
and use CSS like
#hrIdName hr
{
}
Out of two which is a better approach and meets good coding practice?
I wouldn't do either. I have been working a lot recently with jQuery Mobile and the interesting thing about that is they assign classes based on the CSS function you want.
So for example, if you wanted a HR to have margin and padding, you could use:
<hr class="margin-padding">
It would be better this way because you could re-use your classes on the same page (as you would likely want to with a hr). Also you cant repeat id's.
EDIT
Or as peopel have aid on your comments, dont use them at all because div and span elements should be used.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
HTML
<a class="link cta"> link </a>
CSS
.link, .cta, .blueText, .title{
color: cyan;
}
The browser see the class names (link, cta) in html first then find the style in css and then apply the style.
Or
It see the class names (.link, .cta, .blueText, .title) in css first then find those class name in html and then apply the style.
I believe it's more like the second. Basically:
Not necessarily in this order:
The browser parses the HTML and creates a bunch of objects called The Document Object Model, or DOM.
The browser parses the CSS. Each CSS block is made up of a selector and then a bunch of properties.
For each CSS block, the browser looks through the DOM for all the elements that match the selector and then applies the properties.
In your above example, the selector is a list of classes but there are other kinds of selectors.
Note that in real life things don't always work out in that simple order as things can be loaded late, etc.
Hopefully that is of some help...
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm learning HTML/CSS, and I've seen some examples like using .text-center for text-align: center; (in Bootstrap3).
That is a little bit strange for me, because these classes' css style will never change, so I have to change their class when I need to change their style. For example, if I have to change an element with class="text-center" to text-align: right;, I'll change the class it uses to class="text-right" instead of changing class text-center's style.
Is there a detailed reason to use these fixed classes?
If so what is the general rule for using/not using fixed classes?
It depends how you manage your css.
Many avoid inserting style tags or css classes in their html tags, to avoid spending too long modifiying it afterwards.
However, sometimes, you can't make your css specific enough to apply a "text-center" to a tag without changing it somewhere else. So adding it directly to your html tag will allow specific modification.
Using classes instead of style tags makes your code look cleaner and you have one less parameter to check when going through it.
I hope I answered your question!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I was been told by a colleague of mine that instead of using the br tag we could we could use a span tag and give it a display:block and for the hr tag we could do it with the after pseudo element using css. I have been told that this was a good practice to follow than using these html tags. Is it true for these two cases that this way is preferred over the others or could we use it these two tags itself ?
native html elements are ALWAYS better to use than other weird way to do the same things. The most often, if people don't use <br> and <hr> tags, it's because it doesn't fit the graphic needs.
By the way, creating an <span> tag, just to make a space between two blocks is a horrible way to do it. Use css, even with style !
I would not use <br> for layouting, but only for breaking text mid-paragraph. Still would prefer multiple paragraphs if possible. Instead I would use margins to separate blocks.
On top of #kevinniel's answer, seems like a bad idea to use a <span> (natural inline element) just to change it to a block element (which is the default for <div>'s).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Is it a good practice to use many classes on one single HTML element? For example:
<div class="nav nav-centered nav-reversed navbar navigation-block"></div>
I don't mean that two or three classes on one element is bad, but how about four, five or even six?
Short Answer
Yes.
Explanation
It is a good practice since an element can be a part of different groups, and you may want specific elements to be a part of more than one group. The element can hold an infinite number of classes in HTML5, while in HTML4 you are limited by a specific length.
The following example will show you the use of multiple classes.
The first class makes the text color red.
The second class makes the background-color blue.
See how the DOM Element with multiple classes will behave, it will wear both CSS statements at the same time.
Result: multiple CSS statements in different classes will stack up.
You can read more about CSS Specificity.
CSS
.class1 {
color:red;
}
.class2 {
background-color:blue;
}
HTML
<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>
Live demo
It's a good practice if you need them. It's also a good practice is they make sense, so future coders can understand what you're doing.
But generally, no it's not a good practice to attach 10 class names to an object because most likely whatever you're using them for, you could accomplish the same thing with far fewer classes. Probably just 1 or 2.
To qualify that statement, javascript plugins and scripts may append far more classnames to do whatever it is they're going to do. Modernizr for example appends anywhere from 5 - 25 classes to your body tag, and there's a very good reason for it. jQuery UI appends lots of classnames when you use one of the widgets in that library.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm currently building a signup form and I find myself resorting to tables in order to align things properly e.g. the MySpace equivalent where I would use a colspan to achieve the even spacing between the three birthday text areas and the other text inputs. Is this going against conventions and should I be looking into more advanced CSS?
I think you should drop the table all together and use more CSS.
You could look into this: http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
I prefer using Divs, floats and margins and not tables
It is generally against conventions. You should be using CSS to position your elements here. The CSS needn't be advanced though. E.g.
<div class="field-name"><label for="birthday">Birthday</label></div>
<div class="field"><input class="text-field" name="birthday" type="text" /></div>
CSS can be added to these elements.
.field-name{ float:left; width:100px; }
.field{float:left; width:150px;}
This should then position your fields next to each other. I'm not sure of your layout, but this is a simple example really. You can remove the divs as well if needed and change the CSS accordingly. I hope this helps.