0

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.

Chrome Developer Tools

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.

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.

| improve this answer | |
  • Ok I see. Do you think it is okay to create a new file (or multiple files...) main.css and put my overwrites and styles there? Because if I have to code in less, then I will progress much slower, since I don't see changes live. – Black Feb 28 at 7:30
  • 1
    Yeah, the main downside would be you can't override core LESS so you will end up with some CSS loading in the browser that is not actually used anymore.But Magento 2 is very slow anyway so that is unlikely to make a large impact. – Ben Crook Feb 28 at 10:58
  • Im not sure what you mean with "you can't override core LESS". – Black Feb 28 at 14:37
  • 1
    I imagine you will be using a parent theme such as Blank or Luma themes, these are written in LESS. Let's say the design you have for the product page is vastly different to the Luma theme, your choice is to remove all or none of the core LESS and if you do not override it it means the user downloads all of that CSS even though it isn't used. Does that make more sense? – Ben Crook Feb 28 at 15:41
  • Or with a simpler example, let's say you change the primary button background color. you will end up with your new background color, and Magento's primary button background color which is not used anymore but the user still has to download that line of CSS. – Ben Crook Feb 28 at 15:42
0

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.

| improve this answer | |
  • Lets say I 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 – Black Feb 27 at 14:55
  • I'm not really good with this kind of stuff, but for me, you can still go for your own css without less if you don't need to do treatments that requires less like for exemple using variable in your css. Simple css is valid in less. Then all the css are compiles into the styles-l.css I think. – Kurano Feb 27 at 14:59
0

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".

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.