How to Structure CSS in Vue Like a Pro
--
Vue is one of the frameworks available out there with more growth in the last few years. It’s easy to learn, easy to integrate with other libraries or frameworks and has an extended and very well detailed documentation.
The number of stars on GitHub. Image from codeinwp
However, when it comes to styling and HTML componentization, it might present some issues: How can I write CSS in a scalable, reusable and readable way? How can I optimize my CSS? Which is the best way to add styles to my elements?
In order to try to give an answer to this dilemma, we’ll address some ideas.
Atomic Design
An option to cope with this styling in CSS, is writing it in small and separated elements following Atomic Design methodology. For those who might not know, Atomic Design is a methodology for creating reusable CSS components. This system has five levels of building blocks, from the smallest and less complex components to complicated pages. These levels are:
- Atoms: Atoms are the most basic components of Atomic Design. Some examples of atoms can be < label>, <input> and others HTML tags such as <h1>, <p> or <button>.
- Molecules: Molecules are a combination of atoms that are closely related and that have full meaning when grouped. E.g., an <input>, its <label> and its submit button.
- Organisms: Organisms are made out of molecules, and are more complex as they are used to build more elaborate sections. For example: Headers, footers…
- Templates: A template is a group of organisms that forms the layout of a page. They provide context to atoms, molecules and organisms.
- Pages: The highest level of atomic design components are pages, that show representative and real content.
Advantages of atomic design
- It’s really easy to understand and, well-deployed, it can save time.
- Atomic design is based on components, and so does Vue.
- You can reuse most components and mix them creating cohesion and…
