Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Code with pride, professionals are watching

Thursday, September 12th, 2013 by Servage

When we do web designing, we think mostly about the visitors of the website, and do everything for their benefit. But, when any developer approaches your completed website, they are definitely a type of user focussed on your design techniques, so consider them too in your designing process, as part of your user group.

Our focus area, as designers, is the backend interface, where other developers can understand and access the expected files and codes. Therefore, we must have good naming conventions and structure for files and folders to assist in the future development process. Here we need to design our code in such a way that any developer can access and understand the structure of the code besides changes in layouts, programming languages and programming styles of individual developers.

Process For Designing 

Now, it is mandatory for all developers to follow some standard structure of code and coding practices. If we are going to provide some naming conventions, the term atomic design is fitting here. In atomic design, you have different groups of programming/HTML tags, which act as the building blocks, like atoms in chemistry are said to do. For instance, labels, buttons, input fields, etc. can be grouped in some meaningful manner to form molecules, the functional units in templates.

This hypothetical structure of atomic designing enables you to create some CSS files which allow you to make global changes with just one file editing. You don’t need to use the find feature of your text editors to waste time for each small change. You can place atomic structure of your web design in a single file and make accessibility of code easy for developers in the future. Another immediate benefit of atomic designing is the relationship of components with each other.

If you are working with Sass, Erskine, etc. you will have thousands of code lines and remembering them is not plausible for any human. Now, what about the other developers who are working on your project? With atomic designing you have the simple task to find the relationships between the components and making changes as you wish, just dealing with a single file.

Designing Components

Let’s observe some design components that can make life easier for other future developers. The first element is the control panel. We should have a style sheet that can import all Sass partials that we are going to create. This way we have a single place where we have to make changes, instead of writing them from scratch.

The next hypothetical component is utility. Here we start to create system wide styles and place these directories in one place to define global classes, mixins and styles. The next component is Quark, the building blocks like tables, paragraphs/sections, images and links. If we are going to define the relationships between the quarks we should have some thoughts on the OOCSS, Object Oriented CSS, that gives coding structures based on atomic design principles. The same thing is true for BEM.

In coding, if we want to keep atomic design away from any attachment with an HTML element, we will create independent markup that defines the class, instead of only acting in safe mode. Thus, atoms will save us from writing hundreds of abstract code lines. At the molecule level, we can combine multiple quarks and atoms to form one-off structures like banners, navigations, footers, etc. that don’t need replicating, without interfering with our global style sheets for them.

References & More Reading

The “Other” Interface: Atomic Design With Sass
Atomic Design

Code with pride, professionals are watching, 3.0 out of 5 based on 2 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.