About cubit bezier function And animation in CSS

Animation in CSS is the key to create engaging UI. To start with, here is the list of animation properties CSS supports.

animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation

Normally how to setup animation in CSS is by @keyframes.

A typical example would be in AnimateCSS git repo.

But today I will focus on one particular property named animation-timing-function, and its value cubic-bezier.

Cubic-bezier is a maths concept which lays a curve on 1×1 area axes. The curve has 4 points in control, [(0,0), (x1, y1), (x2, y2), (1,1)].

The cubic-bezier only took 2 middle points’ coordinates to determine the curves. To illustrate what it does, a graph from here clarifies the solution.

So the above line translates to cubic-bezier(.27,1.26,.66,-0.36).

Just bear in mind this is only a speed function of timing, reverse on Y axis only means traverse back into the animation process. So this way it can easily achieve the “bouncy” simulation.

Lastly, another interesting site to visit is https://easings.net/. It has the nice illustration of how most curves behave with an buildin animation demo.

Happy animating!

Posted in CSS

SMACSS architecture reference for writing CSS

The concept is to keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. SMACSS is one of the reference guides about CSS naming rules and conventions.

To begin with, there are 5 major categories from SMACSS point of view in CSS functionalities.

  1. Base – fundamental default element display features, like body, form, input or a
  2. Layout – decide how page is divided into sections
  3. Module – reusable parts like modal, sidebar, etc
  4. State – define how module will change based on different context (different views/devices)
  5. Theme – layer of theming, not necessary

For each of these categories, there are rules associated with it. Bear these simple minds with it,

  1. Base rule is default style, no need to use !important, and Reset CSS is helpful
  2. Layout has major & minor. Major layout are mostly shared across whole site, recommend using ID selector.
  3. Modules should avoid element selectors, and use class instead. And sub-classing is the key to increase portability on modules
  4. State should not only apply to layout/module, but also indicate javascript dependency. !important is recommended at this level.
  5. State change can be done in 3 ways, class name, pseudo-class and media query

Having said all these basic category concept and rules, there are actually some thinking go beyond.

Minimize the CSS depth – for better maintenance and readability/portability

CSS Evaluation flow has below facts, thus recommendation based on the facts,

Facts Recommendations
a. Style of an element is evaluated on the element creation (e.g. document rendered during transmission)

b. CSS is evaluated from right to left

i. Use child selectors

ii. Avoid tag selectors for common elements

iii. Use class names as the right-most selector

Using CSS Preprocessors are encouraged (LESS SASS Stylus)

Posted in CSS

PostCSS learning summary

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more

This post is a bit long overdue. I try to keep up with what I have explored with PostCSS, which so far is absolutely elegant, fun, well-structured solution to frontend CSS.

In technical, it supports gulp, webpack and npm/cli run. Since webpack is most popular among the community at the moment, so sample as below,

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [require('autoprefixer'), require('cssnext')];
    }
}

After setting up, there are several few key points of PostCSS features worth covering, it includes,

  1. Autoprefixer
  2. CSSnext
  3. CSS Modules
  4. Stylelint
  5. PreCSS

CSS specification weight.

A question confused me long time today has been solved. Its about CSS specifications weight, especially when two or more CSS specifications targeting the same element, which overwriting the others problem.

First the weight list for an CSS element selector:

  • 1000 points for Inline style
  • 100 points for ID selector
  • 10 points for Class selector and pseudo-classes (i.e. :hover, :focus)
  • 1 point for Element selector and pseudo-element (i.e. :before, :after)
  • 0 points for universal selectors (i.e. *, body *)

Then when deciding each element’s style, all the overlapping rules for CSS will be calculated weight. Highest points wins!

That’s it, simple and neat.

But never forget, we still have !important to overrule all the above calculations.