Css – Node + React – Hyphenated CSS Class Names

babeljscssnode.jsreactjssass

I'm currently using react-starter-kit and have a few react components each with their own styling file (scss). Basically, every component imports styling file on top like:

import s from './Header.scss';

Now, for css classes that do not have hyphens (e.g: 'notification'), I can use it without any problem, but I can't figure out how to use hyphenated css classes:

render() {
 return (
  <div className={s.header-inner}> </div>
 );
}

This obviously throws an error: 'inner is undefined'.

I changed header-inner to header_inner and the same in my component and it works fine but I can't do it as my css file is pretty huge with hundreds of classes.

Any help would be really appreciated.

Thanks

Best Answer

- isn't a valid identifier character, so your original code would be evaluated as:

s.header - inner

You haven't defined a variable called inner so you get a reference error.

However any character can be used to make up a key for an object, so you can use a string to access the property you want.

return (
  <div className={s['header-inner']}> </div>
);

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Css – Which characters are valid in CSS class names/selectors

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Css – Which characters are valid in CSS class names/selectors

Related Topic