Magento 2 - Why is less so painfull to use compared to css? (css vs. less)

Question

I started to learn .less but it brings more difficulties than benefits.

In css, I can just edit files in the browsers developer tool after I activated "Enable Local Overrides", and see the result immediately live.

And after I finished my edits, I overwrite the real file with the modified file from the browser. Easy peasy.

But if I use .less, then I first have to figure out in which file the code I need to edit is located, then I have to guess the right values and execute:

rm -rf pub/static/frontend var/view_preprocessed
php bin/magento cache:flush full_page

and then clear the browser cache and reload the site, so I can see the changes... Thats alot of pain compared to normal CSS.

Am I doing something wrong in my workflow or is it really this complicated and painfull?

---

Imagine you want to set the margin-left of a button. Then how do I even know in which file this button is located if it just shows styles-l.css in the developer tools? Can I just create a new file main.css and add the css query into it which changes the margin or is this bad ? I wonder when should I use less and when css

I hope someone with much experience with .less can answer what steps he follows, when he wants to change the style of a button, for example. From start to end.

Answer 1

You should be using the dev tools such as Grunt, see https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html for more info.

This provides a watcher which will automatically compile your Less to CSS, I've never managed to get the automatic browser reload working though. It's still absolutely terrible compared to every other frontend workflow but it's better than the core workflow without Grunt.

Answer 2

Less is still compiled into CSS in the end, so nothing prevent's you to continue editing css in the console and see live results. Also the process to go from less to css isn't something specific to magento at all. Why we are using less, that's an other issue that integrators or webdesigner could answer, but that's not my case.

Answer 3

UPDATE from my future self:

The following text contains the view I had as a beginner. If you were able to figure it all out, which can take some days or weeks, then you will love less. It is much better than CSS and has many advantages likes reusable code (mixins) and functions.

But you will need some time to fully understand how to find everything you need. The documentation was bad back then when I wrote this, maybe it is better now.

---

From my experience, LESS is extremly painful compared to CSS. Especially the workflow is much much slower. Most of it's advantages like nesting, are getting destroyed by the much bigger disadvantages.

Disadvantages:

1. Almost no documentation about using LESS, Grunt and Livereload with Magento 2. (I needed about 4-5 days of research and trial and error to figure it out)

2. Edit in browser developer tools is not possible if your project is on a remote server, you will have to make your changes in your IDE, because the browser <-> IDE Synch does not work well, even if you added Workspaces .

3. No immediate live edit in browser possible. You will have to wait until "grunt watch" detects the changes and recompiles the files and livereload plays them back. You have to wait about 8-10 seconds, even on a fast server.

4. It is hard to tell in which file you have to make changes, even with sourcemapping activated. It can still lead you to the wrong code. You always have to use linux find and grep to localize the code parts, which can take much time.

5. LESS Code is not very intuitive compared to CSS. There are random variables everywhere and you always have to use linux commands like find and grep to find the definition, unless your IDE is able to find them (NetBeans doesnt).

6 . .. and many more

But there are some helpers to minimize the disadvantages.

#1. Grunt

Without grunt you always have to manually execute alot of magento code in order to remove certain folders, generate less and so on.

Grunt is an automation tool used to automatically perform frequent tasks.

With grunt you can just execute grunt refresh && grunt watch and it will detect changes in .less files automatically and recompiles.

#2. Livereload Extension

First you will have to install it on your server and configure it, then it will automatically get started if you run grunt watch.

You have to add this script to your themes

THEME\Magento_Theme\layout\default_head_blocks.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <script src="http://your-domain.com:35729/livereload.js" src_type="url"></script>
    </head>
</page>

You will also have to install the browser extension, which reloads your site automatically if changes are getting detected.

#3. Sourcemapping

if you generate .LESS code, then sourcemaps are getting generated. You will have to activate sourcemaps in the developer tools. Then if you inspect an element, it might lead you to the code in the according .less file instead of just showing **styles-l.css" or styles-m.css. But it might also mislead you, unfortunatelly it does not work very well.

---

From my experience the workflow is much much slower when working with LESS than with CSS. You always have to wait until the code compiles and most of the time you will be busy to figure out where the code you need to modify is located at, even with sourcemaps enabled. Yes it also has some advantages, the code looks more structured on the first look, but this is just a illusion, because variables and classes are distributed in many different files on many different places and it will be alot of work to puzzle it all together in your mind.

Personally I only use LESS to override variable values of the parent luma theme and for changes which are easy to figure out. But if it gets complicated then I just code it in my custom "main.css".