Just come across an interesting idea for CSS

In a word, prefixed the class name with an indicator of the class' purpose and scope.

• .o- // an object, an unstyled design pattern
• .c- // a component, a styled piece of UI
• .a- // an alteration, an UI-independent override
• .t- // a theme, change UI appearance based on theme
• .is-, .has-, .for- // state-based styles
• .js- // used for binding behavior to components

In each layer of the inverted triangle, the scope of the styles get narrower and more specific. At the bottom of this is a layer of utility or helper classes, referred to as “trumps”, that contains high-specificity selectors (ref).

This probably become less important now when using Angular2 component with style attached, but still a good thought.

more:

• Manage large-scale web projects with new CSS architecture ITCSS
• More Transparent UI Code with Namespaces

Another detail.

I was woundering why some images were missing on my github page generated by Hexo but showed correctly on local Hexo server.

It turns out the image path for Githut page is case-sensitive !

case closed.