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!
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 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 8 years ago.
Improve this question
I've got (hopefully) quite interesting questions, regarding code semantics. Should a class name be specific in it's role even in a bigger context? I'll just give an example:
I need a class for description container. But on the page, description exists in various places: .page-slider, .offers, .articles etc.
So there are 2 options: either name class .description, and style each one individually in contex of it's parent (for example .page-slider .description). Another way is to make it self-explainable, like .offer-description, .slide-description etc.
The pros of first option are short names and imposing keeping the code inherit depenend (the question is if it's stil the right way, SASS kinda encouraged me to limit the selectors inheritance)
The pros of self-explainable names could be their movability, better explained, if called directly throught jQuery, and minimizing the css nesting. The con is possibly long names in the future (bloat + additional parsing time for browser).
Thanks in advance!
The main factors to choose which method I would use would depend on answering these two questions:
Do I understand what the selector selects?
In your example ".slide-description" and ".page-slider .description" both explain what the selectors select. I personally am in favor of using ".page-slider .description" because it would say to me "I am a description of my parent item page-slider". Using ".slide-description" I would not understand that it is about a description of ".page-slider" without having to read the html (Maybe I would if you called it ".page-slider-description", but it still won't tell me it is a description of its parent-item).
Will my selector allow me to make changes easily in the future?
At some point you might decide to change some things on your website. Having to change every description will get boring fast. Instead you would be better off using ".description" to change some general styles of your ".description" divs. Since they all have the same function on the site they probably share a lot of properties. You can always override the ones you want using ".page-slider .description". Once again I seem to be in favor of the ".page-slider .description" -method.
mmmm I would consider the visual design (if you have one) to see if the description class had common styles throughout its use in .slider, .offer and .articles If it did I would use .description and apply all the common styles. Then add additional styles based on the parent.
You could literally call your description container class .description-cont or .description-container.
If I was writing it in SASS I wouldnt make it self-explainable. I would simply have:
.slider{
//styles
.description{
//styles
}
}
Thanks
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.
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
I'm working on a responsive theme that I want to sell. I really want to make it easy to understand at a glance what's going on. One of the tradeoffs of moving from foundation 3 to bootstrap 3 and Foundation 4 (in my opinion, and as noted elsewhere), is the nearer - verbose naming you have to adopt when designing for multpile screen sizes.
Thus, I've tried as much as possible to achieve something like this:
<a class="button soluks_button square_round no_bold">Button</a>
OR This
<a class="custom-button green square-round button-in-navbar text-shadow">Button</a>
Given I'm building my styles on top of bootstrap and foundation, is this too much? or is it okay as long as its readable?
You should make use of a CSS preprocess such as SASS or LESS to keep the HTML semantic and significantly easier for your end-users to work with.
Using the SASS directive #extend, you could give class names as you are currently doing, but extend them in the css rather than forcing the user to remember to include each one in the html. However, by using #extend, the classes could still be applied individually if needed/ if the user wanted to change the default. Something like this:
.button {
display: inline-block;
}
.square-round {
#extend .button;
border-radius: 5px;
}
.no-bold {
font-weight: normal;
}
.soluks_button {
#extend .square-round; // which extends .button by inheritance
background: blue;
}
Then your html could be much more semantic and just give the class of the actual element itself:
<a class="soluks_button no-bold">button</a>
And for the purpose of a versatile theme, to change the default or add an additional style a user could still do:
button