Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I faced following question in interview: How to identify a web element that has no unique identifier and even it has no div or select or anything. I was unable to understand the question itself. Can anyone help me here?
Interview questions are always a challenge, and typically are trying to illicit a response (positive or negative) from the interviewee, that typically has little to do with the subject of the question so that they can gain a sense of your level of understanding or personality.
Depending on the interviewer, they might have been looking to see if you were well rounded in programming. I don't know what position you were applying. Assuming Selenium doesn't have any 'magic' method to find said element, perhaps the interviewer wanted to know if you could write, or understand parsing web-code programmatically.
Perhaps they were looking for you to quantify the element programmatically as to find it based on a parametric search.
Both of these concepts would show understanding of programming fundamentals to the interviewer without ever talking about specific code.
Well, there are so many different techniques to locate elements in the HTML. It's too broad to answer exactly, so, if I were you, I would just list the possible techniques with multiple examples. XPath expressions and CSS selectors are there to the rescue.
Tag names, id, name, class or any other data-related attributes are usually a good and reliable choice to locate elements. If none of these is present, it would depend on where the element is located, what parents, siblings, ancestors etc does it have and how unique the element text, corresponding label (if any), parents are - too many variables in action.
For instance, imagine you have the following HTML:
<span>
<label>Category:</label>
<b>Desired text</b>
</span>
The desired b tag here itself does not have id or name, but it's easy to see that we can probably rely on its preceding sibling and use this XPath expression:
//label[. = "Category:"]/following-sibling::*
Sometimes we know that the desired element is at a specific position in an element. For example:
<tr>
<td>text1</td>
<td>Desired text</td>
<td>text3</td>
</tr>
In this case, we can simply get the second td from the tr:
//tr/td[2]
Sometimes, there is something in the "text" of an element:
<div>The quick brown fox jumps over the lazy dog</div>
Let's say we know that "fox" is there:
//div[contains(., "fox")]
And so on.
Related
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 2 months ago.
Improve this question
Consider the following hero section:
<div>
<h1>Welcome to Our Site</h1>
<subtitle>The place of your dreams.<subtitle>
Get Started
</div>
Now obviously, <subtitle> is not a tag. Typically you'd either put a p or a div, or a block level span (modified with css of course).
However, I actually have no idea which one is the correct practice for writing a subtitle.
It's not h2 because it's not a heading, it's a subheading.
It's techincally not a paragraph, so for me the p tag doesn't fully make sense.
divs I thought were for separating content on a website, but it's really the only one that makes sense to me to use because it has so many uses.
If spans were block level tag I'd probably use it, but only because I typically associate it with text.
I typically use divs, but it still seems strange to me.
Let's say that there was a standard for this, and it could only be one tag...
Which tag should I be using for subtitles? Which one makes the most sense semantically and overall?
That basically depends on the particular context of your (sub-)titles. Since HTML provides a certain hierarchy and structure of elements, which becomes even more important when using e.g. screenreaders which depend on this structure, you might ask yourself to which parent the subtitle would belong the most or whether it should be seen as "independent".
Thus, considering it being an addition to the h1 element, I would wrap it into a small tag within h1 as follows to maintain the immediate relationship of both, while providing options to (semantically and visually) mark it as a child element. The visual appearance (font size, linebreaks) can be added with CSS. HTML itself should only be about structure.
<h1>
Main title
<small>Subtitle</small>
</h1>
Using an h2 element would also be fine, however I would consider that being read more like a "subchapter" with own content. Here, it is common to have multiple h2s as childs of h1, while the first approach using small would only make sense with a single child element.
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 6 years ago.
Improve this question
Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).
And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?
Thanks.
To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.
And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:
But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
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 7 years ago.
Improve this question
When I need very often a specific style like float: left is it better to make a own class or put this style in every class where it is needed?
Here is a example page for what I mean.
JS-Fiddle Example
Is it good how the class left is used? Or would it be better when I put every float: left style into the other classes?
The things to consider are readability and repeating yourself.
Readability:
Having a left class with the only rule as float: left will help to make your HTML more readable. Because whenever someone see that class on an element, they know it will be floated left. So in that way it improves readability.
DRY:
With CSS the old adage of "don't repeat yourself" is almost impossible to adhere to, but I think it should still be considered. In this case you should compare.
How many times will I add float: left in my CSS? versus How many times will I add class='left' in my HTML?
I would note that most CSS frameworks use utility classes like .left{float:left;}
It's simply a matter of opinion but I'd argue that no, you shouldn't.
HTML and CSS exist separately because they address separate concerns. HTML represents the information and CSS represents how that data should be displayed.
Creating classes containing only one rule starts to blur that distinction and starts to introduce style-specific information into your HTML.
Say you want to change all your stuff that was floated left to be floated right. You could either change your CSS rule to something like
.left {
float: right;
}
which is obviously horrendous or else you'd have to go into your HTML and change the class in every situation you wanted to change the value of the float - not ideal either. In a perfect world, you want to be able to make styling changes ONLY by editing the CSS. That's what it's there for. Obviously sometimes this just isn't possible but a lot of the time it is if you marked up your HTML in a semantically meaningful way.
There isn't anything wrong with doing that.
I create css helper classes for myself all the time.
When you're not using a framework like bootstrap it really helps to be able to add class="border" your html to quickly see what's going on in the box model
There are many opinions on top of this,
depends on your context...
In Sass there are placeholder selectors, you should have a look on how they work
Other way is creating helper classes, an example could be the pull-left implemented in bootstrap...
A simple class that does just one thing in order to be reusable everywhere in your code...
The first solution increases the output css file, the second, instead, increases the html file...
Maybe the secondone could be better that the first.
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 9 years ago.
Improve this question
What is better using Alt A header nav ul li a {color: red} or Alt B .nav-link {color:red}?
The pros for Alt a is that i don't need to introduce any more css id/classes, but it is more prone to specificity war than alt B.
Check out jsfiddle: http://jsfiddle.net/43znf/1/
This really is subjective. When I first learned I did everything using Alt A, but now I do a mix of A and B. Alt A will apply the style to every <header> <nav> <ul> <li> <a> nested element, meaning that if you have multiple sections that match this nest pattern they will be styled in the designated way. When you use Alt B, you have to apply the class / id to a certain element, meaning that you can pick and choose which nested <a> tag will receive the style.
Bottom line, it really is not practical to just code in Alt A or Alt B. I would recommend using a little of each.
EDIT: If you plan on getting a job where HTML / CSS editing is required, your boss may have a certain way he or she wants it done. Just some heads up.
EDIT 2: It's also a good idea to know when it's the appropriate time to use an ID and when a Class should be used. ID's should only be used once in a document, classes can be used multiple times.
It depends on how versatile you want your CSS to be. If you have a single element that you want styled or just a handful, use the id or class. However, using Alt A will allow you to add new elements without necessarily having to assign the id/class.
You could use both and both have valid use cases in real life.
When you have an element that is unique and sure that its styles need not be used anywhere else you could make use of id for simplicity.
eg: Header section of your website "template" or "layout" which remains same and probably you would not reuse the styles.
But when you have to style an element say a form button, you have to use a css class, as the form button will be used many a times as you would see.
Using classes can be elegant in that if you stick to the principles. Do not overstyle an element using a single class. Split the rules in an intelligent manner so that each class can be used somewhere else. Try to avoid writing context specific rules in a class which will block you from inheriting the class.