I am in the process of rewriting our CSS3 style sheets using BEM protocol (the code became too difficult to manage!)
The struggle with converting is our attribute selectors and to hooks to JavaScript in our HTML5 markup.
Elise Hein's article The wasted potential of CSS attribute selectors and associated articles has been one of the solutions I found
The HTML5 and CSS3 codes below are examples how I try to implement BEM:
Both id="seedEntry" and id="group" are hooks to our JS code and are not used in our style sheets.
HTML5:
<form class=".form" id="seedEntry">
<label for="group">* Group: </label>
<input type="text" class="form__input" id="group" name="group" required="required">
</form>
CSS3
.form {}
.form__input {
font-size: 1.2rem; padding: 0.1rem;}
.form__input[type=text] {
width: 25%; }
Are I am doing it correctly according to BEM protocols with both the JS id hooks?
(All the JS hooks are in camelCase and not used in the style sheets.)
However we also have classes as hooks when document.querySelectorAll('some class') is used.
Can I use that class in my style sheet or do I have to create a separate class for the HTML. Can I use a BEM structured name as both for my class sheet and as a hook, say something like .form__input--js[type=text] ?
Related
I have some questions:
If you type something like this <label type="" id="" name="">, is there a specific order that needs to be adhered to when it comes to type, id, name, etc, or is considered best practice to just follow the examples shown on let's say W3Schools?
What's the difference between commenting using <!-- some comment --> and /* some comment */? I (think I) observed that both sometimes work in either a HTML and a CSS document
About your first question, you can use a name or id or both. you don't have to use all of them or even one of them.
About your second question, this comment - for Html, and this comment - /* some comment */ for the CSS. If you try those comments in other files, it doesn't work.
There is no specific order for the HTML tag attributes, i.e. you can add it in any order, as long as all required attributes are added.
<!-- some comment --> is HTML comment, /* some comment */ is CSS and JS comment (and some other languages as well, such as Swift and Objective-C).
There's a document in GitHub that outlines a reasonable style guide for HTML development.
I suggest you read it.
https://github.com/necolas/idiomatic-html
HTML attributes should be listed in an order that reflects the fact that class names are the primary interface through which CSS and JavaScript select elements.
class
id
data-*
Everything else
Example:
<a class="[value]" id="[value]" data-name="[value]" href="[url]">[text]</a>
About comments:
<!-- some comment --> is a HTML comment.
/* comment */
is a CSS and JavaScript comment.
In short: Have a style!
First question, The answer is No.
No you don't need a specific order to set properties of a HTML element, you can do this
<label class="someClass" id="someID"></label>
Or
<label id="someID" class="someClass"></label>
the order of attributes of a HTML element doesn't matter, but order of the HTML element itself does matter.
For Example:
This HTML Code:
<label for="firstName">First Name: </label>
<input type="text" id="firstName" name="firstName">
Shouldn't/Can't Be Written as this:
<input type="text" id="firstName" name="firstName">
<label for="firstName">First Name: </label>
Second question
this Syntax <!-- Comment --> is used in only HTML Documents
whereas this Syntax /* Comment */ is used in only CSS Documents
But this doesn't mean you can't use this syntax in HTML /* Comment */, for example inside of style tag in HTML, you can directly write CSS inside your HTML Document you can use the CSS Comment Syntax
For Example:
<style>
/* This is a CSS Comment */
h1 { background-color: #ccc; }
</style>
<h1>Hey There Brother!</h1>
Or you can use the CSS Comment Syntax in the style attribute of a HTML Element.
For Example
<h1 style="background-color: #ccc; /* This is a CSS Comment */">Hey There Brother!</h1>
But you can't use HTML Comment Syntax inside of CSS, there might be an exception which i don't know but as far as i know you can't.
I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.
So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.
Sometimes, form items have a "name" or "value" attribute:
<input type="submit" value="Go" name="goButton">
Is there a way I can apply a style based on name="goButton"? What about "value"?
It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.
I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?
Any advice would be greatly appreciated.
You can use the attribute selector,
input[name="goButton"] {
background: red;
}
<input name="goButton">
Be aware that it isn't supported in IE6.
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
http://reference.sitepoint.com/css/attributeselector
Text Input Example
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
For future googlers, FYI, the method in the answer by #meder , can be used with any element that has a name attribute, so lets say theres an <iframe> with the name xyz then you can use the rule as belows.
iframe[name=xyz] {
display: none;
}
The name attribute can be used on the following elements:
<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
Using [name=elementName]{} without tag before will work too.
It will affect all elements with this name.
For example:
[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>
If i understand your question right then,
Yes you can set style of individual element if its id or name is available,
e.g.
if id available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
input[type=text] {
width: 150px;
length: 150px;
}
input[name=myname] {
width: 100px;
length: 150px;
}
<input type="text">
<br>
<input type="text" name="myname">
This is the perfect job for the query selector...
var Set1=document.querySelectorAll('input[type=button]'); // by type
var Set2=document.querySelectorAll('input[name=goButton]'); // by name
var Set3=document.querySelectorAll('input[value=Go]'); // by value
You can then loop through these collections to operate on elements found.
if in case you are not using name in input but other element, then you can target other element with there attribute.
[title~=flower] {
border: 5px solid yellow;
}
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_flwr.gif" title="flowers" width="224" height="162">
hope its help. Thank you
have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).
It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.
The question I want to ask is, "Is it possible/good practice to refer to a child of an element that is not a direct child?"
For instance, if you have HTML like this:
<form class="formation">
<p>
<span>
<input class="phone input">
</span>
</p>
<p>
<span>
<input class="text input">
</span>
</p>
</form>
And you want to refer in CSS to the inputs only in that particular form, so you call the class of the form followed by the class of the inputs without referring to the elements in between, like this:
.formation .input {
width: 10px;
}
will this work properly?
I tend to think I've done this already on projects and it has worked properly but usually I refer to all the children in between (because I don't go that deep). But I'm currently working on a media query for a wordpress site that doesn't seem to be respecting this rule. Is this bad practice? Or is this downright incorrect? Thanks for all your help!
Yes, it is not only possible but also advisable to do so. Choose your selectors for your css rules as lean as needed to reduce dependency on your markup structure. This is not only wise for performance reasons, it also saves you quite some work in case your markup should ever change, e.g. later on you notice the span is not needed any longer and you remove it to keep your markup as clean as possible. In case you used the full DOM path to your .input you will then also have to adjust your css selectors. Same if for any reason in the future your <p> should become a <div>.
Just make sure you give the rules as much DOM context as necessary to not apply your rules to the same classed element in other contexts (if you have any at all, and if you want to apply a different set of style rules for it).
Yes, it'll work fine. What youv'e got with .form .input allows for any number of intermediate nodes between the two classes.
If you'd had .form > .input, then your CSS wouldn't match at all. > is the "immediate descendant" selector, so
.form .input { color: green }
.form > .input { color: red }
<div class="form">
<div class="input">This is red</div>
<div class="whatever">
<div class="input">This is green</div>
</div>
</div>
I'm currently working on a project where I have no control over the HTML that I am applying CSS styles to. And the HTML is not very well labelled, in the sense that there are not enough id and class declarations to differentiate between elements.
So, I'm looking for ways I can apply styles to objects that don't have an id or class attribute.
Sometimes, form items have a "name" or "value" attribute:
<input type="submit" value="Go" name="goButton">
Is there a way I can apply a style based on name="goButton"? What about "value"?
It's the kind of thing that's hard to find out because a Google search will find all sorts of instances in which broad terms like "name" and "value" will appear in web pages.
I'm kind of suspecting the answer is no... but perhaps someone has a clever hack?
Any advice would be greatly appreciated.
You can use the attribute selector,
input[name="goButton"] {
background: red;
}
<input name="goButton">
Be aware that it isn't supported in IE6.
Update: In 2016 you can pretty much use them as you want, since IE6 is dead. http://quirksmode.org/css/selectors/
http://reference.sitepoint.com/css/attributeselector
Text Input Example
input[type=text] {
width: 150px;
}
input[name=myname] {
width: 100px;
}
<input type="text">
<br>
<input type="text" name="myname">
You can use attribute selectors but they won't work in IE6 like meder said, there are javascript workarounds to that tho. Check Selectivizr
More detailed into on attribute selectors: http://www.css3.info/preview/attribute-selectors/
/* turns all input fields that have a name that starts with "go" red */
input[name^="go"] { color: red }
For future googlers, FYI, the method in the answer by #meder , can be used with any element that has a name attribute, so lets say theres an <iframe> with the name xyz then you can use the rule as belows.
iframe[name=xyz] {
display: none;
}
The name attribute can be used on the following elements:
<button>
<fieldset>
<form>
<iframe>
<input>
<keygen>
<map>
<meta>
<object>
<output>
<param>
<select>
<textarea>
Using [name=elementName]{} without tag before will work too.
It will affect all elements with this name.
For example:
[name=test] {
width: 100px;
}
<input type=text name=test>
<div name=test></div>
If i understand your question right then,
Yes you can set style of individual element if its id or name is available,
e.g.
if id available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsById('goButton');
v_obj.setAttribute('style','color:red;background:none');
else if name is available then u can get control over the element like,
<input type="submit" value="Go" name="goButton">
var v_obj = document.getElementsByName('goButton');
v_obj.setAttribute('style','color:red;background:none');
input[type=text] {
width: 150px;
length: 150px;
}
input[name=myname] {
width: 100px;
length: 150px;
}
<input type="text">
<br>
<input type="text" name="myname">
This is the perfect job for the query selector...
var Set1=document.querySelectorAll('input[type=button]'); // by type
var Set2=document.querySelectorAll('input[name=goButton]'); // by name
var Set3=document.querySelectorAll('input[value=Go]'); // by value
You can then loop through these collections to operate on elements found.
if in case you are not using name in input but other element, then you can target other element with there attribute.
[title~=flower] {
border: 5px solid yellow;
}
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_flwr.gif" title="flowers" width="224" height="162">
hope its help. Thank you
have you explored the possibility of using jQuery? It has a very reach selector model (similar in syntax to CSS) and even if your elements don't have IDs, you should be able to select them using parent --> child --> grandchild relationship. Once you have them selected, there's a very simple method call (I forget the exact name) that allows you to apply CSS style to the element(s).
It should be simple to use and as a bonus, you'll most likely be very cross-platform compatible.
I have been looking at a couple html/css form frameworks like Uni-Form and Formy. They provide easier management of html forms. I was wondering if anyone knows similar ones. I am not looking for css grid frameworks nor Yahoo's YUI.
blueprintCSS has a form plugin (I don't know if it can be used alone, I haven't tried to do that). http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/parts/forms.html
Baseline CSS also has a form system. I haven't personally used it.
just tried formy and uniform..
i want something styled a bit simpler, just to look clean so i can do the rest..
Formalize is another one, quite simple, worth a look.. looked at uniform and jformer and they're both too comprehensive, if that could be used as a reason to ignore them
Formalize
Uniform (different from Uni-Form)
There is also Tacit.
It's a "class-less" CSS framework were you only need a single <link> statement in your HTML and the web page will have a complete look. In particular, for forms, you get a more finished appearance out of the box, just by including the CSS file, and you don't need to attribute specific classes to your form elements. It also guarantees your form will work visually fine both in Desktop and in Mobile.
You can get an overall idea from the demo page.
Here are also a few examples of pages that use Tacit, and the only work put into was including the CSS file: http://filfreire.com/, http://www.jare.io/, https://socatar.com/,
I think uniform is the best solution for forms.
Html is good and understandable, it has a bunch of tricky form examples solved very nicely ad it pays attention to usability much more than other frameworks.
Other seem to insist more on a vertical typographic rythm than common sense and usability. :)
There is also: Formy http://code.google.com/p/formy-css-framework/
I have developer a single class CSS framework just for forms. The class "form" can be added to any form input to style it properly. You can see the examples on the documentation: https://form.js.org
Here an example of mailing list form:
form {
margin: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/#codolog/form#1.0.0/dist/form.min.css" rel="stylesheet"/>
<form>
<div>
<div>
<input type="email" class="form" placeholder="Enter your email">
</div>
<div>
<button type="button" class="form full">Subscribe</button>
</div>
</div>
<form>