RestaurantCard.iss.jsxuses a dual file extension of
.iss.jsx. The first part –
issstands for Immutable Style Sheets (or ISS for short). This naming convension allows the compiler to efficiently identify Immutable Style Sheets – whilst preserving JSX syntax highlighting.
Note on MarkupAlthough this tutorial uses React, it should be noted that immutable styles is markup agnostic – meaning it isn’t coupled or biased to a specific way of generating HTML. Just like a CSS pre-processor – immutable styles generates CSS which can be used on any website – rendered server or client-side.
RestaurantCard.iss.jsxcurrently contains boilerplate code typical of any Immutable Style Sheet:
createStylefrom immutable styles – which is a function that generates immutable rulesets. On line 1 the
createStylefunction is mapped to JSX – meaning any JSX tags in this file will be transpiled to
createStylefunction calls. Line 4 will export our immutable rulesets.
RestaurantCard.iss.jsxwith the following snippet:
RestaurantCard.jsxadd the classname "shining" to the top three stars:
<span>– and selectors with a class – in this case
<span className="shining">as different selectors – even though they target the same element type. The type selector
<span>only targets elements of type
spanthat do not have a class. Elements of type
spanwith a class – such as "shining" need to be styled individually. This is a key difference between immutable styles and CSS – and is one of the traits that make immutable styles highly deterministic.
Key PointStyles for an element without a class (such as
span) are not applied to the same element type with a class (such as
Note on Sharing StylesYou may have noticed 2/3rds of the CSS declarations for
<span className="shining">are the same (each ruleset contains both
font-size). Immutable styles provides ways to remove duplicate styles, aiding reuse among similar rulesets – however in the interests of not overcomplicating this tutorial won't be introduced yet.
[Override Found] The property `padding` has already been defined– and the newly added styles have not been applied. Navigate to your terminal window and you will see the following compile time error:
paddinghas been defined twice. The
paddingset in the first occurance (line 7) is applied to the card on all screen-sizes. The
paddingset in the second occurance (line 22) is applied to the card on screens up to 600px wide. This means on screen widths between 0px and 600px the
paddingproperty is applied twice – which would result in an override, if it weren't for the compiler catching it.
Key PointThe immutable styles compiler can detect and prevent overrides that only occur on specific screen-sizes.
paddingdeclaration (line 7) should be moved out to another ruleset that specifically targets screens wider than 600px: