About guidelines

[peritpatrio]

I think there should be more guidelines about how the koodiklinikka.fi code should be structured so when people commit to the project they don't just do it in their own style.

CSS for example

If you take a look at https://github.com/koodiklinikka/koodiklinikka.fi/blob/master/src/styles/style.styl, you'll see that things aren't that organized yet (unrelated styling, different takes on selectors). :)

I personally prefer the BEM(ish)-syntax as well as avoiding element selectors, ids and nesting of selectors.

Recently I've started to sort the CSS properties alphabetically (with few exceptions) as it makes it easier to find the property you're looking for. Some exceptions are nice though, for example:

/* Top, right etc.  are all related to the position property => group em! */
.foo {
  position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

If the site's code is structured neatly and follow some defined guidelines it would act as a good example for Koodiklinikka's beginners.

Any ideas/comments?

[peritpatrio]

Also min-width media queries should be preferred to encourage mobile first approach.

[rikukissa]

Yes, there definitely should be clear guidelines and a plan how all the repositories should be built.

I would personally go with projects consisted of small modules / components. In practice this would basically mean that any part of the codebase that could be considered as something that could be published in NPM for everyone to use, should be separated from the rest of the code and documented individually. This doesn't necessarily mean that there should be a separate repository for it, but that there could, for example, be a modules/ directory inside of the project where all these kinds of modules would live.

This could eventually lead in a situation where we have just a thin layer of our domain-specific code that combines all of our modules and creates the logic for them to communicate with each other.

BEM(ish) style would be my choice also. It encourages building small components as I mentioned above.
Any take on the selected preprocessor (Stylus)? I think it offers all the same functionality as Sass for example, but I'm kind of wondering if it would be better for beginners to not omit braces, semi-colons, colons etc.

For JavaScript guidelines
I'd suggest airbnb's JavaScript style guide. There seems to be nothing about ES6 features yet so there might also be a more up-to-date style guide if anyone knows about one.

[akx]

Closing as obsolete. #103 made the site Tailwind, so BEM and so on is no longer a concern.