Reading time: 4 minutes
Magento 2: working on the front-end with CSS and JS
18 / 08 / 2017
Working on the front-end in Magento 2 has changed significantly in comparison to the previous version of the shop. A fully modular approach has been introduced, which results in the code being stored in a slightly different, more structured form. This form allows, in my opinion, to more easily navigate the project, and to more easily find places which require changing.
In addition to the change in file structure, many new tools have been introduced, which should be the standard in every project. Taking into account how rapidly things change in the world of front-end, the solutions used here may no longer be considered state-of-the-art. However, it is important to note that a lot of time passes from the start of work on the new version of the shop before it is released, which forces the developers to choose technologies which, while not exactly state-of-the-art, are well-established and will not disappear overnight.
Magento 2 – CSS
The developers of Magento 2 decided to utilise the LESS dynamic stylesheets. You could of course argue that SASS is superior to LESS, but the functionalities which are most frequently used by programmers are available in both of these preprocessors. Even though Magento 2 forces the use LESS, it does not prohibit the use of SASS – using it should not pose any problems. However, as all default modules (it is worth noting that in Magento 2, everything is a module) utilise LESS, using SASS for the existing files will be difficult. When creating a new module, however, you can do it using SASS, and it should not pose any problems.
Seeing as Magento 2 uses a preprocessor, CSS files must be a result of source file processing. There are 3 options available when it comes to LESS/SASS file compilation:
1. Compiling using one of the available automation tools
Default Grunt’s configuration can simply be copied to the appropriate catalogue, then you need to instal grunt-cli, and voila, you can now compile files to CSS. This method is especially useful for efficient development. More information on the subject is available in the official documentation.
2. Server-side compilation
This option can be toggled in the administrator’s panel in the Stores/Configuration/ADVANCED/Developer/Frontend Development Workflow section. In this case, the compilation is PHP-side and is very efficient, so it can be used during development.
3. Client-side compilation
Magento 2 also made sure it has a default tool for combining and minifying all CSS files. These setting are available in Stores/Configuration/ADVANCED/Developer/CSS Settings. In order for file minification to work, you cannot be in developer mode – which is understandable.
Even though Magento 2 forces the use of a number of solutions, this does not really limit expanding and creating new functionalities. By default, you receive a set of ready-made, configured tools which enable you to start working effectively relatively quickly. Thanks to the modular approach, the sheer size of the system is no longer a problem. I can recommend Magento 2 to everyone who is thinking about giving this solution a spin – while it may take you a few weeks to get going, you will eventually realise that everything is well thought-out and that nothing is without a purpose.