CSS Guidelines

Last Updated on December 25, 2019 by Neil Murray

CSS styling is contained in individual React component files and added to CF7 Skins Visual via the webpack build process.

CSS Class Naming #

Based on folders. Focus on React component file names:

e.g. form-items (class=”cf7s-form-form-items”)

Example:
Select Area – use form-select (class=”cf7s-form-form-select” or .cf7s-form-form-select )

Add extra classes where necessary #

When styling React components we often need to first consider what classes we need.

If you don’t have a suitable class available to do what you want, look at what changes need to be made to the relevant JSX to allow you to implement this via CSS in accordance with these guidelines.

With JSX it’s relatively easy to add extra necessary classes on each React component.

Example:
The following more specific classes will allow suitable targeting of the relevant individual React components:

Instructions Area
<div class="cf7s-instruct cf7s-collapse">
Select Area
<div class="cf7s-select cf7s-collapse">

This is a common approach we follow when styling new React components – we often need to first consider what classes we need to add.

Importantly:
Style classes that we add & control in each React component
Avoid descendant selectors and child selectors

CSS Do’s & Don’ts #

Use minimum CSS Specificity possible #

Always use the minimum CSS Specificity required to do what you want.

Importantly:
We don’t use #ids for style purposes

Example:
[ADD Example]

Instances of excessive CSS Specificity should be removed by testing of your added CSS code prior to submitting your code for review.

Avoid CSS that controls other items #

Avoid CSS that can inadvertently control other items outside of an individual React component.

Importantly:
Avoid classes added by jQuery e.g. .sortable .droppable
Avoid classes that change based on user interaction e.g. .ui-sortable-handle

Example:
[ADD Example]

Check your added CSS code does not control any other items before submitting your code for review.

Avoid CSS that is too general #

Importantly:
Style classes that we add & control
Don’t style standard HTML elements

Example:
The following CSS is too general:

.cf7s-collapse-header h3 {
   position: relative;
}

These could easily inadvertently control other items outside of an individual React component.

Don’t add unnecessary CSS #

Don’t add more CSS statements than is necessary.

Example:
[ADD Example]

You can easily test if all the styling you have added is required by progressively disabling all of your code in your Dev Tool.

Don’t add any browser specific CSS #

We don’t add any browser specific CSS.

-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;

We use autoprefixer as a PostCSS plugin within webpack to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

If you are concerned your CSS may not have suitable browser coverage, you can check if necessary using http://caniuse.com

Further reading: