Getting Started with Myth: the Preprocessor of the Future

I never understood the argument that it’s easy to update if you change your websites design. If I change my desing of a website, then 99% of the time the HTML structure will chagne, making my old CSS useless.

But if you want to change a single color value that’s used all over the place you might change your mind. Of course, you can do that with search and replace, too, though you may not want to replace every instance of the color (maybe just font color but not background color, for example).

Then I’d narrow my search to search for color but not background color. Any decent editor can search for that.

You can copy and paste raw CSS into both SCSS and LESS for the most part. Neither force anything on the user and you can choose to include or use their syntax as you please. This is not a selling point for Myth.

Honestly, I don’t see any purpose for Myth. I mean it’s good to have competition at all, but at this point with a lot of these late comers it just seems like this xkcd:

There are other situations where it would be harder, of course. How would you target one of these but not the other?

border: 1px solid #30353b;
background: #30353b url(/images/image.png);

(Heh, sounds like I am arguing for preprocessors!)

Perhaps I could have done a better job wording that. But, yes, you do have to learn some new syntax when using other preprocessors.

This is the variable syntax for LESS:

@link-color: blue;

This is the variable syntax for CSS:

:root {
    --link-color: blue;
}

They are different from each other.

Honestly, I like Less syntax better than CSS syntax.

I’m not saying that it will be like learning a completely foreign language in order to use preprocessors. The popular preprocessors have syntaxes that are intuitive if you already know CSS. This is because much of the syntax, such as declaring properties and selectors, are based on CSS.

My one worry about a preprocessor that anticipates future CSS is that those proposals will inevitably evolve and change over time before they are ready for use. So it’s not necessarily a good investment of time to learn things that might change a lot, and the processor will have to decide what to do with out of date stuff.

Wrong yes any decent editor can do that, however with CSS Preprocessors it’s easy to create themes add flexible rules. I can easily create highlights of buttons by getting the color and moving 10 values up number to brighten it. Another major advantage is code organization which i find very useful its easy to organize codes and inherit maybe . The framework I use is Dojotoolkit,in order to create a custom theme we simply alter the variable and function and viola a new kickass theme is born. However i’d like to know advantage of Myth over Stylus, Stylus seems more like Python with CSS on steroids.
(Edited:Sorry made some typos, i type too fast)

1 Like

I moved a post to an existing topic: Welcome to The New SitePoint Forums

I wrote an article that discusses what I believe to be the best CSS preprocessors (which includes Myth and Stylus). That article might shed some light about the advantages and disadvantages between using one or the other.

1 Like

That is a valid concern! Thank you for mentioning this point. This is something anyone thinking about using Myth should keep in mind.

There’s always the possibility that the specs will change between now to final rec.

In production, since we’re deploying stylesheets that use final rec CSS specs, there’s no issue at all, the site will be unaffected with any sudden spec change.

But it is definitely a maintainability concern though: We need think about the steps we will take if the proposed specs change significantly between our initial development and a development-iteration/redesign/feature launch we are working on.

For example, what will we do if the CSS variable syntax is changed in a couple of years and we’re going back to update one of the sites we built with Myth? Will we update our input/development stylesheets to whatever the newest specs are? Or will we just stick to a backwards-compatible release of Myth and just develop with the “original” proposed specs we used during initial development?

1 Like

I strongly disagree, a preprocessor does so much more. It’s not just about changing a color value. Some examples:

  • loops help you to avoid repetitive code (i.e. if you have different areas on your site, each one in a different color/style) and make changes much easier (than being forced to replace the values multiple times)
  • true, it’s quite unlikely that you’ve used the same color for different things, but what about measures of length? As soon as you’ve got numbers, search and replace will be much harder as the same ones are used in different contexts. Furthermore search and replace will fail if different color syntax’s (#hex, rgb, rgba) are used.
  • nesting of selectors saves time (no need to repeat the long selector list all the time) and provides much better readability
  • You intrinsically avoid “magic numbers”. If you need to calculate a value, you don’t write the result, but the expression. e.g. instead of writing “12.66667em” you write something like “$parent-width - $margin-left - $margin-right”, which is some sort of documentation out of the box

When porting a huge project to SASS (design/structure remained very similar), the new sass-project had ~2.800 lines, whereas the old CSS-Project had ~12.000 lines. Of course there were some other optimizations as well, but about 60-80% of the savings was due to SASS (loops, no need for prefixes, nesting)

Have you used any Preprocessor ever intensively in a real project? I would never want to switch back again (unfortunately I’m from time to time forced to use plain old CSS again in legacy projects…and it’s a pain)!

1 Like

I work on a ~9000 page website where SASS is used, so yes I think this project is big enough.

I have used preprocessors before.

I’ve never refuted any of your benefits that you are listing so I’m not sure why you feel the need ot remind me of them.

It seems that a straight-forward find/replace using a regular expression would do the job well there.

Find: border:(.)#30353b(.)
Replace: border:\1#30353f\2

Hm, can you do that in a text editor? Will have to try it.

Not in a simple editor like Notepad, but Notepad++ has the feature

OK, you can search in Sublime via regular expressions, too, but I’m darned if I know how to write them. Probably easier just to search the file manually!

Sacrilege!
You can use tools such as regexr to help you compose them, or just ask in the forums.
They’re not difficult once you get the hang of them and save a ton of manual labour!

I don’t know if there’s a better reason to start learning about regular expressions than this one :slight_smile:

Here’s something that could help: Sublime Text 2: Find and Replace with Regular Expressions for Idiots

1 Like

Or css preprocessors… :smiley:

1 Like