My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
CSSNext: TurboCharge your CSS Development 🏎

CSSNext: TurboCharge your CSS Development 🏎

Pankaj Patel's photo
Pankaj Patel
·Apr 20, 2018

CSS has come really far and now has really cool enhancements; some are under consideration, some are already part of specs. Those enhancements will turbocharge your CSS development in terms of speed & experience. But still, they might not be available in Browser.

CSSNext with PostCSS comes to the rescue.

CSSNext is set of PostCSS plugins to enable CSS features for your development.

Here are top five quick features provided by CSSNext:

Variables

Variables are the easiest way to make the consistent changes apart from single responsibility CSS files.

:root {
  --color-primary: #555;
}
body {
  background: var(--color-primary);
}

Nested Rules

Nested rules are one of the primary reason people moved to LESS or SASS. With CSSNext, you can do so.

The only syntactical difference is the heavy use of & to mark the hierarchy properly. But the feature does not end here. With CSSNext, we have @nest.

With @nest, you can do complex nesting where you can point selector in the certain parent; i.e. context-aware rules. Pretty cool 😎; right! Here is an example:

:root {
  --color-primary: #555;
  --color-shadow-primary: rgba(100, 100, 100, 0.3);
}
.button, button {
  color: #fff;
  background: #aaa;
  border-radius: 0.25em;
  border: 1px solid var(--color-primary);
  box-shadow: 1px 1px 2px 1px var(--color-shadow-primary);

  /* this section will be applied to the (.button, button) inside (.nav.dark) */
  @nest .nav.dark & {
    /* & = .button, button */
    border-color: #efefef;
    color: var(--color-primary);
    background: #dedede;
    box-shadow: 1px 1px 2px 1px rgba(255, 255, 255, 0.2);
  }
}

generates following:

.button, button {
  color: #fff;
  background: #aaa;
  border-radius: 0.25em;
  border: 1px solid #555;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(100, 100, 100, .3);
          box-shadow: 1px 1px 2px 1px rgba(100, 100, 100, .3)
}
.nav.dark .button, .nav.dark button {
  border-color: #efefef;
  color: #555;
  background: #dedede;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(255, 255, 255, .2);
          box-shadow: 1px 1px 2px 1px rgba(255, 255, 255, .2);
}

You can read more about the specification here: tabatkins.github.io/specs/css-nesting/#at-n..


Read the full post at

Check the Code at github.com/time2hack/graphql-demohttps://ti..