How thinking in components can increase your productivity

    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    This article is about the secrets of component thinking to build scalable and maintainable projects.

    What are the benefits of components?

    Components are units of code that are nestable, reusable and decoupled. They help you to don’t repeat yourself writing the same functionality or HTML tags multiple times. They ease the process of thinking because in a modern architecture everything is just a component. You don’t need to figure out how to structure your project in logical parts. This makes your project also much more maintainable when you work in a team.

    Most developers think about React, Vue.js or “Web Components” when they hear components. But you can apply this design pattern to every technology. It works especially well in frontend development.

    Component Thinking and how to reduce brain cycles

    Principles of “component thinking” you should follow

    • Everyhing is a component. Really! All exceptions just will mess up your project.
    • Don’t repeat yourself.
    • Code your component in a way that works decoupled and standalone.
    • Follow naming conventions (BEM).


    If you are not using Vue.js or some other bundling tool that allows you to write all parts of a component in one file I recommend following project structure:

    • css/components/header.css
    • js/components/header.js
    • templates/components/header.html

    Now you can easily find all the javascript logic, styling and templates relating to the header. Even better, inspecting the code in your browser will already tell you where to look for the files if you follow the BEM convention.

    Components in HTML, CSS and Javascript


    If you are not already thinking in components, you should really try out some frameworks that are promoting the usage of components like React, Vue.js or Storyblok - A component composer for the technology you already use.