CSS structure, style and conventions. Sass, OOCSS, BEM, rscss, SMACSS, OMG?

Level: intermediate

What does it mean to be busy? For example, there was absolutely no time for new posts on the blog, but the topics list is never-ending. I was so busy, professionally and privately. Today we back “on-line”, with a really nice topic.

We can save our time by optimizing daily tasks. Organizing and automating them. And I always try to implement such improvements step by step. No use to complain that there is so much to do and no time for all. The effects may be surprising. Otherwise our frustration can keep growing.

In the matter of programming, we could write here about the tools, such as webpack. But this topic deserves for separate articles. Today we will focus on approaches for writing CSS styles. In a good, comfortable (for us and the others) way. Such codes will be easier to maintain and develop.

“Long term value of the software is directly proportional to the quality of code base…”
— Douglus Crockford

Do you know any other guides and conventions for CSS structure? Like OOCSS, BEM, rscss, SMACSS. Or maybe OMG? Maybe you have seen code samples, that were written using one of these approaches, like BEM or other SMACSS… but you maybe didn’t care about. This article looks closer at the topic of writing better CSS.

Note: personally I write my styles mostly usingSass (SCSS – Syntactically Awesome Style Sheets), so articles and code examples here will be also made using this CSS pre-processor, also known as “CSS with superpowers” 🙂

See more at official website: http://sass-lang.com. Starting work with Sass goes smoothly, especially when we use a framework, that provides a nice support for such technologies (such as Ruby on Rails).

About style giude, in case of JavaScript / ES6, my favorite one is this elaborated by Airbnb:


Same about approach to writing (S)CSS:


Setup of linting tool will help us to keep the right syntax.

NOTE: the only detail I don’t like and don’t use about Airbnb style guide for CSS is about letter case for blocks. In case of fronted-development, I’m not a fan of PascalCase / camelCase.

Certainly in other cases, like writing classes in Ruby / RoR, we use PascalCase, and also snake_case for naming methods. In both cases it’s great and looks good. Just somehow I don’t like it for CSS.

For CSS I prefer kebab-case (spinal-case, hyphen delimited, https://en.wikipedia.org/wiki/Letter_case#Special_case_styles), so I DON’T write any:

.pageHead {}
.sub_header {}


.page-head {}
.sub-header {}

That’s my own preference of course.

Actually there’s so many approaches and conventions, both for JS and CSS. We simply should use those we like, that are nice and reasonable for us. Then let’s follow the conventions we choose, constantly. With this we can really take many advantages for our code development. Without consistency we may create a mess instead.

Let’s start smoothly, from the basic thing – few words about Sass and directory / file structure for our styles.

“Writing CSS is easy. Writing maintainable CSS is hard.”

Why it’s important? For sure I hate to see any “over-engineering” acts, unfortunately it seems to be typical for front-end developers. Therefore we have billions of JS tools, libraries, approaches and so on. But not time for philosophy now, to the point.


Bootstrap Tutorial and RWD – responsive websites

Level: intermediate

Today a quick tutorial about Bootstrap and creating responsive websites. Actually a template of good start point for further projects. We will also talk about the techniques, which allow us to reach specific results. We also collected links to resources with valuable information.

Bootstrap Tutorial – responsive template by hand

As we know, Twitter Bootstrap (TB) is an open-source CSS framework. Incredibly simplifies and accelerates the creation of solid, nice looking web projects (UI). Mobile-first approach included.

So let’s get straight to the point and create a basic template. We want to get it ready to run in desktop, as well mobile browsers. The first detail will be to define the viewport (area visible for the user at one screen). More about HTML5 basics can be found here.

HTML5 document and including necessary files

Let’s create HTML5 document, and include jQuery, as well Bootstrap 3.3.7 (e.g. from https://www.bootstrapcdn.com).

Progress bar

CSS: visually consistent html5 progress bar in all browsers

Level: intermediate

Today a few words about HTML5 progress bar, and more specifically about adding CSS rules to such an element, so it will be looking same in all the browsers. For example there may be a requirement at design level, to keep visually consistent html5 progress bars. The developer may be surprised about the default behavior of this element.

The same appearance of html5 progress bar in all browsers

Different web browsers displays html5 progress bar in a different way. Also the default styles are not same. If we want to get progress bar looking always the same, we need a small CSS trick. A ready solution below.


Useful tools for programmers: Yeoman

Level: intermediate

Finally, I’ve got a little bit of time for blogging, so today wanted to write a few words about one of useful tools for developers – Yeoman.

Yo man! Useful tools for programmers – Mr Yeoman

Why to do the tedious, repetitive tasks, if it can be done for us by machine, or in this case – by the program. Yeoman allows us to generate different kind projects, especially creating the structure of folders and the necessary ingredients, in order to the best practices and patterns.

It makes initial creation of necessary folders and files, as well the setup of dependencies.

For example we may create new AngularJS project, where we also want to have Bootstrap, Saas and other extensions, that our project will need.

Installation is based on npm, which for sure we have in our environment, if we have worked with node.js. There also Bower and Grunt will be necessary =>


Top 5 jQuery plugins and libraries – May 2016

Level: intermediate

The next portion of good jQuery plugins and JavaScript solutions from our library. Here we present a small ranking of top jQuery plugins from May 2016.

Top 5 jQuery plugins from May 2016

Ordered by popularity.

1. Style elements, use media queries to build a responsive menu in jQuery

In this tutorial you’ll style elements and use media queries to build a responsive menu in jQuery. A nice effect reached quickly.


Progress bar with CSS and HTML5 in a few lines of code

Level: intermediate

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

Top jQuery plugins

Top jQuery plugins – March 2016

Level: intermediate

Hello! We added many new interesting positions to our scripts and plugins library. Here we present a small ranking of top jQuery plugins from March 2016.

Top jQuery plugins from March 2016

Ordered by popularity.

1. Multi-step jQuery form wizard plugin – jquery.steps

The first plugin is a nice way to implement forms in web application: multi-step jQuery form wizard solution. Turn multiple forms into a step-by-step form wizard with nice effects.


AngularJS Tutorial – a simple UI to control elements

Level: intermediate

Angular in practice! Today we have a small AngularJS tutorial, about creating small UI connected with dynamically created (refreshed) graphical object.

AngularJS Tutorial – control an element with Angular

In the basic course of Angular, we focused on information. Now it’s time to see it in a real example. Today’s simple tutorial in small steps will help us with this.

Step 1.

Let’s create HTML5 document and include AngularJS library.

Step 2.

Define an element, on which we will operate from the level of UI. In our example we will create a simple element using CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;

Learning AngularJS – a basic course part III – summary

Level: intermediate

In the 3rd part of basic Angular course, we will continue topics from the previous part, as well we will touch next related topics.

Further learning AngularJS

Let’s start with filters. It’s a yet another Angular feature, which takes off a part of tedious work from the programmer. Let’s see them in action, when formatting various kind of data.

AngularJS filters

Even in the previous part we could see how simple in use (but useful) the filters are. For example:

<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>

Top 5 jQuery plugins and articles – February 2016

Level: intermediate

Hello! We were to busy to publish next AngularJS articles, but at least here we have some cool stuff. It’s a small ranking of Top 5 resources from our website with web development stuff.

Top 5 jQuery plugins – Feb 2016

Here we go – from most popular.

1. jQuery and Bootstrap show hide password plugin

It’s a jQuery plugin, that allows the user to toggle the password input field text visibility by clicking the toggle icon (checkbox). Styling with Bootstrap.

Top 5 jQuery plugins & posts from Feb 2016

Top 5 jQuery plugins & posts from Feb 2016

2. jQuery and CSS3 image direction-aware hover effect

This is a nice jQuery and CSS3 image direction-aware hover effect. The main idea is to slide in an overlay from the direction we are moving with the mouse.