• Home
  • Home
    • Home Default
    • Podcasts Home
    • Home Radio
    • Home Solo
    • Home Solo 2
    • Home Music Class
    • Home Podcaster
  • Home
    • Classic
      • Classic Agency
      • Classic Start-Up
      • Classic Saas
      • Classic Banking
      • Classic Firm
      • Classic Landing
      • Classic Photographer
      • Classic Lawyer
      • Classic Business
      • Classic Consultants
      • Classic Restaurant
      • Classic Studio
      • Classic Help Center
      • Classic Travel (RTL)
    • Creative
      • Creative Marketing
      • Creative Digital Agency
      • Creative Collective
      • Creative Landing
      • Creative Agency
      • Creative Freelance
      • Creative Director
      • Creative Fitness
      • Creative Corporation
      • Creative Studio
      • Creative Artist
      • Creative Designers
      • Creative Event
      • Creative vCard
    • Portfolio
      • Portfolio Agency
      • Portfolio Minimal
      • Portfolio Metro
      • Portfolio Studio
      • Portfolio Developer
      • Portfolio Büreau
      • Portfolio Carousel
      • Portfolio Freelance
      • Portfolio Albums
      • Portfolio Photos
      • Portfolio Gallery
      • Portfolio Video
      • Portfolio Illustrator
      • Portfolio Classic
    • Blog
      • Blog Magazine
      • Blog Newspaper
      • Blog Masonry
      • Blog Impact
      • Blog Journal
      • Blog Culture
      • Blog Metro
      • Blog Editorial
      • Blog Split
      • Blog Grid
      • Blog Stories
      • Blog Author
      • Blog Wide
      • Blog Simple
    • Shop
      • Shop Boutique
      • Shop Creative
      • Shop Alternative
      • Shop Techie
      • Shop Classic
      • Shop Off Grid
      • Shop Metro
      • Shop Landing
      • Shop Design
      • Shop Split
      • Shop Furniture
      • Shop Parallax
      • Shop Minimal
      • Shop Carousel
  • Shop
    • View shop
    • Single product
    • Categories
      • Bags
      • Clad
      • Fashion
    • Cart
    • Checkout
  • Genre
  • Albums
  • Categories
    • Music
    • Attraction
    • Beauty
    • Featured
    • Fashion
    • Relationships
    • Seductive
    • Hip Hop
    • Midnight talk
  • Videos
  • Events
  • Gallery
  • Blog
  • Artists
  • Favourites
  • Shop
  • Documentation
  • Videos
  • Blog
  • About
  • Contacts
  • Pages
    • About
      • About Classic
      • About Clean
      • About Creative
      • About Grid
      • About Wide
      • About Simple
      • About Minimal
    • Contact
      • Contact Classic
      • Contact Clean
      • Contact Creative
      • Contact Grid
      • Contact Wide
      • Contact Simple
      • Contact Minimal
    • Services
      • Services Classic
      • Services Clean
      • Services Creative
      • Services Grid
      • Services Wide
      • Services Simple
      • Services Minimal
    • Utility
      • Coming Soon
      • Splash Page
      • Maintenance Mode
      • FAQ
      • Custom 404
      • Custom Search Results
      • Custom Author
    • Product
      • Product Digital
      • Product Furniture
      • Product Fashion
      • Product Gallery
      • Product Review
      • Product Designers
      • Product Comparison
  • Features
    • Base HTML
      • Typography
      • Heading Styles
      • Dividers
      • Lists Styles
      • Buttons
      • Icon Box
      • Contact Forms
    • Grid & Gallery
      • Isotope Grid
      • Media Gallery
      • Single Media
      • Lightbox Options
      • Media Carousels
      • Content Carousel
      • Quotes Carousel
    • Interactive
      • Tabs & Accordions
      • Google Maps
      • Social Share
      • Team Members
      • Pricing Tables
      • Counters & Countdown
      • Pie Chart & Progress Bar
    • Headers
      • Header Fade
      • Header Slide
      • Header Ken Burns
      • Header Video
      • Header Text Slides
      • Header Elements
      • Slider Rev & LayerSlider
    • And more…
      • Grid Systems
      • Rows & Columns
      • Thumbnails Options
      • One Page Scroll
      • Animated Headings
      • Slides Scroll
      • Shape Dividers
  • Works
    • Full-Width Layouts
      • Portfolio Grid
      • Portfolio Metro
      • Portfolio Masonry
      • Portfolio Carousel
      • Portfolio Lateral
      • Portfolio Photos
      • Portfolio Albums
      • Portfolio Video
      • Portfolio Audio
    • Boxed Layouts
      • Portfolio Grid
      • Portfolio Metro
      • Portfolio Masonry
      • Portfolio Carousel
      • Portfolio Lateral
      • Portfolio Photos
      • Portfolio Albums
      • Portfolio Video
      • Portfolio Audio
    • Project Centered
      • Centered Custom One
      • Centered Custom Two
      • Centered Media Stack
      • Centered Media Gallery
      • Centered Media Slides
      • Centered Media Stack Full-Width
      • Centered Media Gallery Full-Width
      • Centered Media Slides Full-Width
    • Project Sidebar
      • Sidebar Custom One
      • Sidebar Custom Two
      • Sidebar Media Stack
      • Sidebar Media Gallery
      • Sidebar Media Slides
      • Sidebar Media Stack Full-Width
      • Sidebar Media Gallery Full-Width
      • Sidebar Media Slides Full-Width
  • Blog
    • Full-Width Layouts
      • Blog Grid
      • Blog Masonry
      • Blog Metro
      • Blog Lateral
      • Blog Sidebar
      • Blog Carousel
      • Blog Textual
      • Blog Custom
      • Blog BigText
    • Boxed Layouts
      • Blog Grid
      • Blog Masonry
      • Blog Metro
      • Blog Lateral
      • Blog Sidebar
      • Blog Standard
      • Blog Textual
      • Blog Column
      • Blog BigText
    • Post Layouts
      • Layout Custom One
      • Layout Custom Two
      • Layout Custom Three
      • Layout Custom Four
      • Layout Header Default
      • Layout Header Fullscreen
      • Layout Header Custom
      • Layout Custom Sidebar
      • Layout Custom Column
    • Post Media Type
      • Video External Source
      • Video Self-Hosted
      • Audio SoundCloud
      • Audio Self-Hosted
      • Images Gallery
      • Image Instagram
      • Image Flickr
      • Quote Twitter
      • Quote Simple
  • Shop
    • Products
      • Shop Grid
      • Shop Metro
      • Shop Creative
      • Shop Carousel
      • Shop Lateral
      • Shop Default
    • Single product
      • Product with Custom Layout
      • Product Gallery Carousel
      • Product Gallery Stack
      • Product Full-Width Layout
      • Product Header Layout
      • Product on Sale
      • Product Variable
      • Product Grouped
      • Product External/Affiliate
      • Product Out of Stock
    • Lookbook
      • Lookbook Grid
      • Lookbook Vertical
      • Lookbook Metro
      • Lookbook Justify
      • Lookbook Carousel
    • Pages
      • Cart
      • Checkout
      • Privacy Policy
0

Time is passing by

  • Home
  • Blog
  • Business
  • Time is passing by
Hey DJ play that song
February 18, 2017
Stumbled the concept
March 3, 2017
Published by admin on March 2, 2017
Categories
  • Business
Tags
  • Life
  • Sport
  • Tech
  • Travel
0 Facebook Twitter
0 Facebook Twitter
0 Facebook Twitter

CSS selectors all exist within the same global scope. Anyone who has worked with CSS long enough has had to come to terms with its aggressively global nature — a model clearly designed in the age of documents, now struggling to offer a sane working environment for today’s modern web applications. Every selector has the potential to have unintended side effects by targeting unwanted elements or clashing with other selectors. More surprisingly, our selectors may even lose out in the global specificity war, ultimately having little or no effect on the page at all.

Any time we make a change to a CSS file, we need to carefully consider the global environment in which our styles will sit. No other front end technology requires so much discipline just to keep the code at a minimum level of maintainability. But it doesn’t have to be this way. It’s time to leave the era of global style sheets behind.

It’s time for local CSS.

In other languages, it’s accepted that modifying the global environment is something to be done rarely, if ever.

In the JavaScript community, thanks to tools like Browserify, Webpack and JSPM, it’s now expected that our code will consist of small modules, each encapsulating their explicit dependencies, exporting a minimal API.

Yet, somehow, CSS still seems to be getting a free pass.

Many of us — myself included, until recently — have been working with CSS so long that we don’t see the lack of local scope as a problem that we can solve without significant help from browser vendors. Even then, we’d still need to wait for the majority of our users to be using a browser with proper Shadow DOM support.

We’ve worked around the issues of global scope with a series of naming conventions like OOCSS, SMACSS, BEM and SUIT, each providing a way for us to avoid naming collisions and emulate sane scoping rules.

We no longer need to add lengthy prefixes to all of our selectors to simulate scoping. More components could define their own foo and bar identifiers which — unlike the traditional global selector model—wouldn’t produce any naming collisions.

import styles from './MyComponent.css';
import React, { Component } from 'react';
export default class MyComponent extends Component {
 render() {
    return (
      <div>
        <div className={styles.foo}>Foo</div>
        <div className={styles.bar}>Bar</div>
      </div>
    );
  }

The benefits of global CSS — style re-use between components via utility classes, etc. — are still achievable with this model. The key difference is that, just like when we work in other technologies, we need to explicitly import the classes that we depend on. Our code can’t make many, if any, assumptions about the global environment.

Writing maintainable CSS is now encouraged, not by careful adherence to a naming convention, but by style encapsulation during development.

Once you’ve tried working with local CSS, there’s really no going back. Experiencing true local scope in our style sheets — in a way that works across all browsers— is not something to be easily ignored.

Introducing local scope has had a significant ripple effect on how we approach our CSS. Naming conventions, patterns of re-use, and the potential extraction of styles into separate packages are all directly affected by this shift, and we’re only at the beginning of this new era of local CSS.

process.env.NODE_ENV === 'development' ?
    '[name]__[local]___[hash:base64:5]' :
    '[hash:base64:5]'
)

Understanding the ramifications of this shift is something that we’re still working through. With your valuable input and experimentation, I’m hoping that this is a conversation we can have together as a larger community.

Note: Automatically optimising style re-use between components would be an amazing step forward, but it definitely requires help from people a lot smarter than me.

0 Facebook Twitter
Share
0
admin
admin

Related posts

March 22, 2017

Inspired by clouds


Read more

Slieve League, Ireland

March 20, 2017

Make it clean and simple


Read more
January 28, 2017

Sounds from the streets


Read more

3 Comments

  1. John Doe says:
    May 29, 2015 at 5:32 pm

    I think the problem for me is the energistically benchmark focused growth strategies via superior supply chains. Compellingly reintermediate mission-critical potentialities whereas cross functional scenarios. Phosfluorescently re-engineer distributed processes without standardized supply chains. Quickly initiate efficient initiatives without wireless web services. Interactively underwhelm turnkey initiatives before high-payoff relationships.

    Reply
    • Jennifer Freeman says:
      May 29, 2015 at 6:03 pm

      Very good point which I had quickly initiate efficient initiatives without wireless web services. Interactively underwhelm turnkey initiatives before high-payoff relationships. Holisticly restore superior interfaces before flexible technology. Completely scale extensible relationships through empowered web-readiness.

      Reply
  2. Willie Clark says:
    May 29, 2015 at 6:09 pm

    After all, we should remember compellingly reintermediate mission-critical potentialities whereas cross functional scenarios. Phosfluorescently re-engineer distributed processes without standardized supply chains. Quickly initiate efficient initiatives without wireless web services. Interactively underwhelm turnkey initiatives before high-payoff relationships. Holisticly restore superior interfaces before flexible technology.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

© 2023 My blog. All Rights Reserved. Muffin group
    0