RestaurantCard.iss.jsx
uses a dual file extension of .iss.jsx
. The first part – iss
stands 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.jsx
currently contains boilerplate code typical of any Immutable Style Sheet:createStyle
from immutable styles – which is a function that generates immutable rulesets. On line 1 the createStyle
function is mapped to JSX – meaning any JSX tags in this file will be transpiled to createStyle
function calls. Line 4 will export our immutable rulesets.RestaurantCard.iss.jsx
with the following snippet:RestaurantCard.iss.jsx
:gold
to lightgrey
:RestaurantCard.jsx
add 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 span
that do not have a class. Elements of type span
with 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 asspan
) are not applied to the same element type with a class (such as<span className="shining">
).
Note on Sharing StylesYou may have noticed 2/3rds of the CSS declarations for<span>
and<span className="shining">
are the same (each ruleset contains bothmargin-right
andfont-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.
pseudo
JSX attribute (previously introduced in The Basics guide):maxWidth
JSX attribute:[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:padding
has been defined twice. The padding
set in the first occurance (line 7) is applied to the card on all screen-sizes. The padding
set 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 padding
property 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.
padding
declaration (line 7) should be moved out to another ruleset that specifically targets screens wider than 600px: