Is there a maximum number of caracters for the name of a class in CSS ?
.thereisnomaximumlengthforaclassnameincss {
maxlength: no;
}
Good luck!
There is no maximum length it says.
No maxiumum.
Basically, a name may start with an underscore (_), a dash (-), or a letter(a–z), and then be immediately followed by a letter, or underscore, and THEN have any number of dashes, underscores, letters, or numbers:
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Don't forget about bandwidth. It may not seem to make a difference but one css file with 30 classes with long names can add up to a big performance issue on a large site
W3C Schema for CSS 2.1 -
http://www.w3.org/TR/CSS21/
Also, I used their CSS validator with a really long class name... it passed validation -
http://jigsaw.w3.org/css-validator/
To add to what others have written, would just like to add if - like me - you find you sometimes end up with crazy long names (because you like being descriptive) then it's worth bearing in mind selectors, which also promotes style re-use and helps keep things easy to read.
e.g.
h1 {
1.5em;
}
styledParagraph {
font-size: 1em;
}
/* Override the default font size if the styledParagraph element is inside an element with the class articlePage */
.articlePage .styledParagraph {
font-size: 1.5em;
}
/* Make all <h1> elements in .articlePage -> . styledParagraph larger than the default */
.articlePage .styledParagraph h1 {
font-size: 2em;
}
This is very widely supported (even in MSIE 6) and it's much easier to read than a class name like .articlePageStyleParagraphHeading.
Similar to this question on ID names in HTML as well. Seems like there is no "practical" limit.
I say keep them as short as possible, while still being descriptive - why even flirt with crazy-long names? :)
Related
I am studying a free css template called zerofour found at http://html5up.net/zerofour/, and running across a css coding that I have never seen before. In the HTML, some divs have class such as "4u", but when I check the css files, this is the only text section that has anything with those terms, and it looks like this:
/* Grid */
/* Cells */
.\31 2u { width: 100% }
.\31 1u { width: 91.6666666667% }
.\31 0u { width: 83.3333333333% }
.\39 u { width: 75% }
.\38 u { width: 66.6666666667% }
.\37 u { width: 58.3333333333% }
.\36 u { width: 50% }
.\35 u { width: 41.6666666667% }
.\34 u { width: 33.3333333333% }
.\33 u { width: 25% }
.\32 u { width: 16.6666666667% }
.\31 u { width: 8.3333333333% }
.\-11u { margin-left: 91.6666666667% }
.\-10u { margin-left: 83.3333333333% }
.\-9u { margin-left: 75% }
.\-8u { margin-left: 66.6666666667% }
.\-7u { margin-left: 58.3333333333% }
.\-6u { margin-left: 50% }
.\-5u { margin-left: 41.6666666667% }
.\-4u { margin-left: 33.3333333333% }
.\-3u { margin-left: 25% }
.\-2u { margin-left: 16.6666666667% }
.\-1u { margin-left: 8.3333333333% }
When I remove the 4u class using chrome developer, the page is affected. However, when I delete this section from the css file, nothing happens. I am quite stumped in this, and it is really bugging me!
Read this spec: http://www.w3.org/International/questions/qa-escapes#cssescapes. The characters following the back slash represent a unicode code point. The space is required if the next character is allowed as part of the hexadecimal values.
It looks like something similar to Foundation. I'm new to Html5up as well but that's my guess. How it normally works (in Foundation at least) you have a "row" which is the entire width of your page (normally). Within that row you have columns (or "u" here for some reason), with each column taking up the same % of width. Usually the standard for Foundation is 12 columns/row and I'm guessing its the same here. So basically if you want the first 50% of a row to be a giant div followed by two divs that split the remaining 50% it would look like:
<div class="row">
<div class="6u">
Big Div Here.
</div>
<div class="3u">
Small Div Here.
</div>
<div class="3u">
Small Div here (same size as the other small div)>
</div>
</div> (This ends the row).
The reason for all this madness being it makes it way easier to make your page responsive (which is one of the main points of Foundation and HTML5Up).
Looking into Foundation's Dev Docs for a more in-depth explanation and additional examples (despite it not necessarily being Foundation) - Here
It's the first time that I see class names like this and I wondered about the meaning. The W3C page says:
In CSS 2.1, a backslash (\) character can indicate one of three types
of character escape. Inside a CSS comment, a backslash stands for
itself, and if a backslash is immediately followed by the end of the
style sheet, it also stands for itself (i.e., a DELIM token). First,
inside a string, a backslash followed by a newline is ignored (i.e.,
the string is deemed not to contain either the backslash or the
newline). Outside a string, a backslash followed by a newline stands
for itself (i.e., a DELIM followed by a newline).
Second, it cancels the meaning of special CSS characters. Any
character (except a hexadecimal digit, linefeed, carriage return, or
form feed) can be escaped with a backslash to remove its special
meaning. For example, "\"" is a string consisting of one double quote.
Style sheet preprocessors must not remove these backslashes from a
style sheet since that would change the style sheet's meaning.
Third, backslash escapes allow authors to refer to characters they
cannot easily put in a document. In this case, the backslash is
followed by at most six hexadecimal digits (0..9A..F), which stand for
the ISO 10646 ([ISO10646]) character with that number, which must not
be zero. (It is undefined in CSS 2.1 what happens if a style sheet
does contain a character with Unicode codepoint zero.) If a character
in the range [0-9a-fA-F] follows the hexadecimal number, the end of
the number needs to be made clear. There are two ways to do that:
with a space (or other white space character): \26 B (&B) [...]
Note: Backslash escapes are always considered to be part of an
identifier or a string (i.e., \7B is not punctuation, even though
{ is, and \32 is allowed at the start of a class name, even though
2 is not). The identifier te\st is exactly the same identifier as
test.
So as far as I can understand, the \3+number+space part here is used to be able to use numbers only as class names.
html5up.net uses a framework called skel to make the layouts responsive.
If your question is "how do I make sense of these classes" rather than "how do these escape sequences work", then the reference you're looking for is at https://github.com/n33/skel/blob/master/docs/skel-layout.md#usage-1.
I think this type of css is used for mobile Compatibility.
HTML
<div data-foo> ... </div>
CSS
div[data-foo]{ ... }
Is this a good idea? Are there any drawbacks?
I think the data- approach makes sense when I have hundreds of "foo" elements, because the HTML markup size decreases (-3 characters for each element).
div[data-foo] is not supported in old IE (IE6, see here: http://www.quirksmode.org/css/selectors/)
div[data-foo] makes less semantic sense
class="foo" and data-foo will take up about the same space when DEFLATE-d. If you haven't set up your server to deflate, you should.
class=foo is only one character longer than data-foo even uncompressed, and is perfectly valid HTML.
It totally depends on you, for example elements must be having different attributes, so you need to define styles and even repeat some, instead I'll use a class which I can use for both, instead of using attribute selector which will limit my declared properties upto an element with that attribute, where you can freely use classes regardless of element attribute combination
.class { /* You can use this anywhere you need these properties */
font-family: Arial;
font-size: 13px;
}
Where as this will limit to ELEMENT-ATTRIBUTE combination
div[data-menu] { /* This will LIMIT you to a combination of div
element having an attribute called data-menu */
font-family: Arial;
font-size: 13px;
}
Important : Specificity will make you a huge mess
I know that in a stylesheet div#name and #name do the same thing. Personally I've taken to using div#name for most styling I do, with the reasoning that it's slightly faster, and means that I can identify HTML elements more easily by looking at the CSS.
However all of the big websites I seem to look at use #name over div#name (stack overflow included)
In fact I'm finding it very difficult to find many websites at all that use div#name over #name
Is there some advantage to doing #name that I'm missing? Are there any reasons to use it over div#name that I don't yet know about?
Since the div part of div#name is not required (because ID are unique per page), it makes for smaller CSS files to remove it. Smaller CSS files means faster HTTP requests and page load times.
And as NickC pointed out, lack of div allows one to change the HTML tag of the element without breaking the style rule.
Since ID's have to be unique on the page, most ID's you'd run into would only ever appear once in your style sheet, so it makes sense not to bother including what element it would appear on. Excluding it also saves a few characters in your style sheet, which for large sites which get visited millions and millions of times a day, saves quite a bit of bandwidth.
There is an advantage to including the element name in the case where a division with ID "name" might appear differently than a span with ID "name" (where it would show a division on one type of page and a span on another type of page). This is pretty rare though, and I've never personally run across a site that has done this. Usually they just use different ID's for them.
It's true that including the element name is faster, but the speed difference between including it and excluding it on an ID selector is very, very small. Much smaller than the bandwidth that the site is saving by excluding it.
a matter of code maintainability and readability.
when declaring element#foo the code-style becomes rigid - if one desires to change the document's structure, or replace element types, one would have to change the stylesheets as well.
if declaring #foo we'll better conform to the 'separation of concerns' and 'KISS' principals.
another important issue is the CSS files get minified by a couple of characters, that may build up to many of characters on large stylesheets.
Since an id like #name should be unique to the page, there is no reason per se to put the element with it. However, div#name will have a higher precedence, which may (or may not) be desired. See this fiddle where the following #name does not override the css of div#name.
I would guess that including the element name in your id selector would actually be slower – browsers typically hash elements with id attributes for quicker element look up. Adding in the element name would add an extra step that could potentially slow it down.
One reason you might want to use element name with id is if you need to create a stronger selector. For example you have a base stylesheet with:
#titlebar {
background-color: #fafafa;
}
But, on a few pages, you include another stylesheet with some styles that are unique to those pages. If you wanted to override the style in the base stylesheet, you could beef up your selector:
div#titlebar {
background-color: #ffff00;
}
This selector is more specific (has a higher specificity), so it will overwrite the base style.
Another reason you would want to use element name with id would be if different pages use a different element for the same id. Eg, using a span instead of a link when there is no appropriate link:
a#productId {
color: #0000ff;
}
span#productId {
color: #cccccc;
}
Using #name only:
Well the first obvious advantage would be that a person editing the HTML (template or whatever) wouldn't break CSS without knowing it by changing an element.
With all of the new HTML5 elements, element names have become a lot more interchangeable for the purpose of semantics alone (for example, changing a <div> to be a more semantic <header> or <section>).
Using div#name:
You said "with the reasoning that it's slightly faster". Without some hard facts from the rendering engine developers themselves, I would hesitate to even make this assumption.
First of all, the engine is likely to store a hash table of elements by ID. That would mean that creating a more specific identifier is not likely to have any speed increase.
Second, and more importantly, such implementation details are going to vary browser to browser and could change at any time, so even if you had hard data, you probably shouldn't let it factor into your development.
I use the div#name because the code is more readable in the CSS file.
I also structure my CSS like this:
ul
{
margin: 0;
padding: 0;
}
ul.Home
{
padding: 10px 0;
}
ul#Nav
{
padding: 0 10px;
}
So I'm starting generic and then becoming more specific later on.
It just makes sense to me.
Linking div name: http://jsfiddle.net/wWUU7/1/
CSS:
<style>
div[name=DIVNAME]{
color:green;
cursor:default;
font-weight:bold;
}
div[name=DIVNAME]:hover{
color:blue;
cursor:default;
font-weight:bold;
}
</style>
HTML:
<div name="DIVNAME">Hover This!</div>
List of Css selectors:
http://www.w3schools.com/cssref/css_selectors.asp
I would like to display a number of underscores to the user to let them know how many characters they need to fill in to satisfy the length requirement.
My problem is: underscores aren't separated by spaces.
Q: What font or css style should I use so that my underscores can be easily counted?
You can just use letter-spacing: 0.4em; to separate out the various characters in the element. I'm assuming you're using an input element, so:
input {
letter-spacing: 0.4em; /* or whatever measurement you prefer... */
}
JS Fiddle demo.
References:
letter-spacing at the MDC.
Use the CSS property letter-spacing.
Visual example: http://jsfiddle.net/8w9WY/
I'm trying to find out what is the best practice for naming and casing css classes and ids, especially multiple word names.
So for instance, say I have a <div> that I want to name "character skills".
It seems like there are 3 choices: "characterskills", "character_skills", or "character-skills".
Which one of these is the industry standard for naming css classes and ids?
What's the best practice for splitting multiple words in css names?
Also is it a best practice to always use all lowercase for css names, because they are case-insensitive?
I tend to use the hyphenated style as well. I mainly use that style since CSS properties follow the same casing. Similarly, JavaScript functions and variables tend to use lower camel case. For example, to change a CSS property in JavaScript, you would type object.style.textDecoration, but in CSS, that property would be changed with text-decoration.
I use lowerCamel for class names and UpperCamel for IDs. This is quite important and I'm beating this old answer because IMO the hyphenated style should be discouraged, even underscore is better than hyphenated.
Why? Because every other language can't have hyphenated variable names. For e.g., your IDE may or may not pick up auto-completion properly. (My IDE can't, it's VI :P)
CSS being closely related to JavaScript, hyphenated classname also make it difficult to interop with JavaScript. Consider the following (contrived) jQuery:
// For each of the following class, perform a function
var funcs =
{
main: function(){ /* ... */},
toolbar: function(){ /* ... */ },
// Oops, need to use a quote because there's this hyphenated name
'customer-info': function(){ /* ... */ }
};
// Woot, a O(n^2) function
for(var className in funcs)
{
var func = funcs[className];
// maybe if we named it $('#some-selector')? The hyphen suddenly feels
// like some kind of operator to me. Makes me nervous :/
$('#SomeSelector div').each(function()
{
if($(this).hasClass(className)) func();
});
}
There's no clear advantage to using the hyphenated style other than subjective aesthetics. The disadvantages are that it stands out from every other programming language (OK, CSS may not be a programming language, oh well..) and that it is technically incorrect.
The correct (huh?) way to represent a space is underscore. Consider this phrase "a self-addressed letter," how can I convert the spaces?
a_self-addressed_letter (correct, preserves the original meaning)
a-self-addressed-letter (ouch! if we convert it back we get "a self addressed letter"!)
Also is it a best practice to always use all lowercase for css names, because they are case-insensitive?
I guess in this case, it's a best practice to always use PascalCasing because it aids readability.
I personally use the hyphenated style (i.e. some-class) but you should simply choose what you feel is best and be consistent. It is purely an issue of aesthetics.
I see the following casing styles a lot:
characterSkills,
CharacterSkills
But, at the end of the day it doesn't matter which style you pick. Just be consistent within your own app.
I've seen several different answers to this question, depending on who you ask. Ranging through all of the possibilities you mentioned and probably more. The one I see referenced most often, however is to use underscores (character_skills) and all lowercase.
The one answer thats always mentioned though and arguably more important than which method you choose, is to pick one and stick to it throughout. Keeping things uniform throughout allows you to avoid confusion and other problems later.
I use lowerCamelCase for classes, and UpperCamel for IDs, like so:
#HeaderLogo { ... }
.pullQuote { ... }
But it really makes absolutely no difference so long as you're consistent :) Oh, and try to stick to one-word class names where possible - you can always combine classes, like so:
.boxout { border: 1px solid; padding: 10px; }
.emphasised { font-weight: bold; }
.subtle { font-size: small; }
.boxout.emphasised { background: yellow; }
.boxout.subtle { color: gray; }
...which I prefer, as you can have your "base" classes hold core definitions, keeping your CSS smaller, and reducing the overall number of classes you have to remember when designing pages.
After reading examples and making my own mistakes, I landed on this solution for myself:
Use hyphens to show hierarchy e.g. #products-MainContent {} or #maincontent-Summary {}. To me this means that MainContent is a child of the products div.
Capitalise each word after the first element in the heirarchy for IDs. Use all lowercase for classes e.g. #summary-Statistics (ID) or .summary-statistics (class)
This works for me for now. I don't want to use hyphens to separate words because I think hyphens should show dependency/relationships. Also I don't want to mix up IDs and Classes because they look similar so I changed the case in which they were written.
I recommend using the BEM (Block Element Modifier).
Retrieved from its website:
BEM — Block Element Modifier is a methodology that helps you to create
reusable components and code sharing in front-end development.
For more details please visit its website documentation:
http://getbem.com/naming/