Usually when i create some HTML template, i tend to prefix and class (or id) everything, This is my way of keeping the markup more readable, and also it makes styling a lot easier.
For example if create a template called MyTemplate, then i prefix all elements like this
<form id="mt-form-blue" class="mt-form">
<input class="mt-input-large" type="text" />
<input class="mt-input-small" type="text" />
</form>`
I've seen lots of HTML templates, where the creators make very little use of classes and ids.
My question is why? Does using many classes and ids, have an impact on the browser performance? Does it have any dangerous side effects?
CSS selector do impact performance, but how much it impact will depend on its complexity and what operators were used. Usually you won't notice such tnings, but there are plenty of researches for this matter on the web.
Regarding the use of selectors, listing only the basic three, the use of them depends on what is your intention, for example:
tag name selector - When you want apply style to every element of this type
class selector - when you want to reuse your style in more than one element
ID selector - when you want to apply your style to only one element per document
Of course, their use is not limited for the list above but I believe it contains the most common use cases.
Related
Looking at html, there is a bunch of built-in attributes on tags:
I am trying to work out what HTML "on spec" attributes are named.
Note: I am not looking for an opinion - I want to determine/breakdown exactly what the W3C opinion is. This is so I can recreate it this naming convention in React.
As a best-guess, I generally stick to the phrase:
The thing [is/has x]
And is/hasX becomes my prop.
However, I do not have a good grasp of the lingo of grammar, and it can be difficult for me to keep it consistent.
Lets consider two inputs, one html and one React.
This sounds right to me:
My input is hovered
<input checked selected active disabled />
<MyInput isHovered hasTooltip hasError />
But isHovering also sounds correct , but I suspect this doesn't have the correct (past) tense:
My input is hovering
<input activating checking />
<MyInput isHovering hasTooltip isErroring />
When things start to get confusing, I realise I'm in the bad habit of trying to side-step doing the grammatical-gymnastics
My input is...hover
<Myinput isHover hasError />
But the props of the component no longer seem consistent.
Plus its not what html does:
<input check />
Question What is the correct (verb?) tense of html attributes according to the spec (I've looked, and didn't find anything in the spec about tense/verbs)?
Note: is/has is added because props, unlike attributes are variables, and this prefix helps with code clarity
This question will probably get closed because it's a matter of opinion, but anyway:
I never saw the present progressive tense ('hovering', 'activating') being used anywhere.
In our project we have components with props in the past tense ('disabled', 'checked') which happens to conform with HTML. I'm in favor of this also because of brevity ('isDisabled' is lengthier, which could be ok if it adds to readability, but it doesn't).
Don't use an infinitive ('check') because it implies an action (so as a developer I might think it connects the component to some external control).
But above any other consideration - whatever you choose, be consistent.
Why would you use "div class" instead of "div id"
Usually when I name a div I use "id" to give a name to an element and with set parameters. I really only use "class" to give it special characteristics. For my example .
However, I have a professor who will "class" to identify all his divs. For example prof example .
Can someone explain the benefit of something like "div class" instead of "div id".
<div class="some_class">
<p>This can be used any number of times on one HTML page</p>
</div>
<div id="some_id">
<p>This CAN be used multiple times with the same ID,
but it is invalid code, as a specific ID should
only be used ONCE per html page</p>
</div>
Here's an older yet still good explanation.
ID are unique for the page, so it's better for identification.
Class aren't unique and are supposed to be to group similar style things together.
Said otherwise, if you need to apply something to THAT SPECIFIC div, you should call it by the id, because it will take priority over other CSS styles that may affect it.
Classes will allow you to set some common ground in your style so you can use similar fonts or sizes in different kind of elements.
If you are using Javascript there is a big advantage of using classnames to identify elements instead of id's.
Giving an id to an element also creates a global javascript variable with the same name. See Do DOM tree elements with ids become global variables? for more about that behaviour.
Having such implicitly created variables is at best confusing, and at worst leading to hard to find errors.
So, I've read recently some posts about HTML5 best practices and all of them have the following practice:
"Use id attribute instead of name attribute"
Is that right? I mean, how am I going to handle forms in PHP, for example, if not by inputs' name attribute?
Look here for reference:
Difference between id and name attributes in HTML
https://teamtreehouse.com/community/what-is-the-difference-between-id-and-name-attributes-in-form-elements
Names can be used for more elements, while ids are unique. This helps with styling multiple elements without repeating your css code.
Long story short, id is not meant for naming form elements.
You use id to make it easier for CSS or JavaScript to handle that one particular element with the unique id.
Whether you're using CSS or JavaScript/jQuery with your forms, an ID is handy for most inputs/elements because you can reference them like easily. Remember, ID's are unique:
<div id="example1"></div>
If you have an element like I mentioned above, you can always call it later by doing this:
var x = document.getElementById("example1").id;
along with many other ways.
Names can sometimes be tied to a variety of elements on the page, whereas there will always only by one item with that particular ID.
I have a form that lists the name of the input, the input, and possibly some help text. It is generally going to appear to be tabular, but I don't want to use a table or div because I imagine there is a more semantically-appropriate option by now.
Here is what it would look like without styles:
Name: <name input>
Address: <address input>
<address help info>
Phone: <phone input>
Notice how it all lines up like a table.
Any ideas for the most appropriate HTML for this?
Why is a table not semantically-appropriate if the data will appear tabular? Use a table, problem, solved.
Use dl. It got redefined in HTML5 so that it’s a "description list" instead of a definition list.
<dl>
<dt>Name:</dt>
<dd>…</dd>
<dt>Address:</dt>
<dd>…</dd>
<dt>Phone:</dt>
<dd>…</dd>
</dl>
If it’s a form with input, don’t forget to use label.
Note that it’s not "required" to use an additional structure, so a form like this is totally fine without dl/table:
<label for="form-name">Name:</label>
<input type="text" id="form-name" name="form-name">
<label for="form-address">Address:</label>
<textarea id="form-address" name="form-address"></textarea>
<label for="form-tel">Telephone:</label>
<input type="tel" id="form-tel" name="form-tel">
A real good question for which it's hard to find one correct answer. According to what I've found, either a table and div would be OK. Even though I would agree neither one of them feels like a real good solution.
Tables:
At http://www.w3.org/TR/html5/tabular-data.html#the-table-element it says:
Tables should not be used as layout aids.
...and...
[...] tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents.
But you're not really using tables for layout purposes here. You would be using it to present the form input data in a readable manner. As stated in the following sentence (also found in the table spec):
The table element represents data with more than one dimension, in the form of a table.
To me, that means it should be OK to use tables in this case.
Divs
Regarding the div the W3 spec says:
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.
But when reading the section spec it says this about the div:
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
To me, that means that you can also choose to use div for styling or layout purposes. I've tried to put togehter some thoughts about the use of div in this blog post: http://htmlusedtobeeasy.wordpress.com/2013/07/01/divisions-and-sections/
Sorry for the long answer (my first), hope it helps!
Trying to learn html/css. I've been looking at the html & css files of a couple different websites that have something along the line of:
<span class="mytest anothertest">some text goes here</span>
I understand the "mytest" part but what does "anothertest" do? There's no reference to that anywhere in their css or html files.
anothertest is just another class like mytest. You can apply more than one to an element.
There are several possible reasons for the presence of a class name in a class attribute value. Using the class in page stylesheets is probably most widely known, but not the only one:
The class name can be used in JavaScript in order to process a set of elements conveniently. (Using document.getElementsByClass is one way to achieve this; another way is to use jQuery; and you could even hand-code it rather simply.)
Designated class names are used in some metadata systems, such as microformats. Some search engines recognize such names and use them to provide semantic searching (though this approach probably loses to microdata, which uses different attributes).
A class name can be used in a user style sheet, e.g. by a developer who wishes to do some testing. This could well be the case if the class name is literally “anothertest.”
The name might be there to allow future development, e.g. so that elements of a class will be or may be styled in some future version. The designers might have ideas on styling but they haven’t decided on it—they just want it to be easy when they are ready.
It could be just a holdover. It was a class that had some use, but things changed. There was really no particular reason to remove it.
This is a very good question. It involved the difference between id and class.
ID
An ID placed on an element, is a unique identifier for that element. An element may only have one ID, and only one of the same ID may exist on a page. So for instance, the following examples are not possible.
<a id="someid anotherid">Multiple IDs - Wrong</a>
<a id="someid"><span id="someid">Same ID twice - Wrong</span></a>
Class
A class name however, is the exact opposite. An element may have several class names, and the same class name may appear multiple times on a page. Like so:
<a class="someclass anotherclass">Multiple Classes - Correct</a>
<a class="someclass"><span class="someclass">Same Class twice - correct</span></a>
In short, the syntax displayed in the question is simply having 2 class names on one element, which is perfectly acceptable.
Class name are also used to easily select elements in the page with JavaScript. You can use the getElementsByClassName method to access them or using your favorite CSS selector library (ex.: Sizzle) if you need compatibility for older browser.