Learning CSS Rewrite 2.11 Organising your CSS

[rachelandrew]

Individual tasks for the rewrite of the learning CSS section. This one for the 11th part of the CSS Building Blocks section.

This covers the things that are in “making CSS readable” but also perhaps should mention things like the different methodologies people might come across. Not in an in-depth way but showing perhaps a couple of examples of something like BEM and so on.

https://docs.google.com/document/d/1vN0gWLZe_IweWJnYi9q1eMBUsaxdafxfu-ed383nPI8/edit?usp=sharing

[rachelandrew]

@chrisdavidmills First draft is here https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/Organizing_your_CSS

[chrisdavidmills]

Hey there,

This is looking pretty good. I have some brief feedback below, but not much:

• In the "Comment your CSS" section, what you've written makes sense, but it'd be even better if you showed a specific snippet (or snippets) to show some real examples of the kind of comments you would use, so readers get the idea.

• Also, what about using CSS flags? I still love this technique

• In the "Create logical sections in your stylesheet" section, again it might be nice to have a sample to link to, so people can seemore clearly what you mean.

• For OOCSS and BEM, it makes me wonder whether you should include links to some tutorials to learn how to use them, as youdon't really say that much about them here (I appreciate there is not really space)

[rachelandrew]

I don't know what "CSS Flags" is I'm afraid. A search just gets me flag icons.

I can link to tutorials, however I'm not a BEM expert (I actually don't like it as a technique at all) so I couldn't be sure what I was linking to was actually any good.

[chrisdavidmills]

I don't know what "CSS Flags" is I'm afraid. A search just gets me flag icons.

Oops, sorry! It was something that I remember Doug Bowman going on about years ago, and I've used it ever since. It is the idea of separating your CSS fileout into different sections, like you already say, but in the comment separators including some kind of short character sequence that won't appear in the syntax, so you can search for that character sequence and jump between the start of each section.

I use || for my sequence, so for example:

/* || General styles */

...

/* || Typography */

...

/* || etc. */

...

I can link to tutorials, however I'm not a BEM expert (I actually don't like it as a technique at all) so I couldn't be sure what I was linking to was actually any good.

I'm not a fan either — seems way too verbose and confusing for my liking. https://css-tricks.com/bem-101/ looks OK for a bit of a light intro. I don't like the stuff on the official BEM web site — too much of it, and not very helpful for beginners, imo.

[rachelandrew]

OK, I have added some more examples through the commenting section, I've not referred to these as CSS Flags as this sounds like something official that there should be docs about, rather than just something someone mentioned once. Also added a link to the BEM 101 page.