Gathering CSS best practices

[Tim Nguyen]

Hello everyone,

While CSS quality hasn't been too big of a problem in mozilla-central, I have sometimes noticed the following problems:

* Explaining Firefox Desktop's CSS structure/practices to newcomers can be difficult

* Some CSS reviews take too many roundtrips, which is great in terms of CSS quality, but it is also cumbersome for both the patch author and the patch reviewer.

* Big CSS changes/refactorings can be difficult despite sometimes being essential for moving forward

With those 3 problems in mind, I started writing the following MDN document with:

https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/CSS_Guidelines

It is based on the Developer Tools guide: https://docs.firefox-dev.tools/contributing/css.html

I would love to hear your thoughts about those guidelines. The document is incomplete and I invite everyone to complete it with everything they know about CSS in mozilla-central :) Please feel free to correct anything you think is incorrect or inaccurate.

Hopefully this document will be helpful to make iterating over CSS easier and more efficient, while preserving the quality that exists now.

Cheers,

Tim

[Chris Mills]

This is really useful, thanks for the contribution Tim!

I've edited the article, added tags, added a link to it from the parent article, and also updated the title and added a summary paragraph to make it clear what this is (compared to other CSS guidelines on MDN).

Hope this is all OK.

Best regards,

---

Chris Mills
MDN content lead & writers' team manager
MDN Web Docs

Mozilla
@chrisdavidmills

_______________________________________________
firefox-dev mailing list
firef...@mozilla.org
https://mail.mozilla.org/listinfo/firefox-dev

[Andrew Halberstadt]

Would it be helpful to stand up https://github.com/CSSLint/csslint (or some other css linter) in CI / reviewbot / mach lint? We could have control over which rules cause errors, warnings or are ignored completely. We would also have control over which directories it runs on (if we don't want to enable it across the tree in one go).

Cheers,

Andrew

[Dan Mosedale]

Automating CSS style curation with a linter sounds like an excellent
plan. CSSlint hasn't seen much action in a while; from what I can
tell, much of the interesting CSS tooling stuff is going on with
PostCSS-based stuff, which is written on top of NodeJS. I haven't
deeply investigated the various linting stuff (yet!), but
https://github.com/stylelint/stylelint is one popular example. If we
can wait a bit more until we've started landing live node_modules in
the tree, this might be a good way forward. Activity-Stream is
already tentatively planning land and use PostCSS in the tree, though
that's likely to happen in the new year.

Dan



Am Mo., 19. Nov. 2018 um 10:39 Uhr schrieb Andrew Halberstadt
<ah...@mozilla.com>:

[Andrew Halberstadt]

For anyone who has opinions on this, I filed:

https://bugzilla.mozilla.org/show_bug.cgi?id=1508369

[Jared Wein]

Thanks Tim, this is great and much needed. Having some automated linting is really helpful (both are great, proactive and reactive).

From reading your document I learned about inset-inline-start and inline-start, etc. These can help remove some extra RTL handling that we do today, though our CSS will become even harder for a regular user to contribute to (I don't think that's a good enough reason to not push forward).

Cheers,

Jared

[Matthew N.]

Thanks for working on this Tim. We may want to consolidate your new page with the existing related page at https://wiki.mozilla.org/Firefox/CSS_Tips

By the way, the document is probably better on the wiki as MDN is trying to focus on web tech documentation, not be Mozilla/Firefox-specific.

Thanks,

Matthew

[Tim Nguyen]

Hey Matthew,

Thanks for showing me this CSS Tips page! I didn't see it before.

I put it on MDN in line with other mozilla-central coding style articles, see the right column of: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code

Cheers,

Tim

[Matthew N.]

On Mon, Nov 19, 2018 at 5:18 PM Tim Nguyen <ntim...@gmail.com> wrote:

I put it on MDN in line with other mozilla-central coding style articles, see the right column of: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code

My understanding is that in the long term those are going to move to the wiki and/or firefox-source-docs but that plan could have changed.

[Tim Nguyen]

Thanks everyone for the feedback!

Automatic linting seems like a great way to cover basic formatting issues (spacing, indentation, naming, etc.), especially in addition to the already existing automatic tools (browser_parsable_css.js).

However, automatic CSS linting is far from being able to cover most of the semantic issues listed in the document.

Those issues have typically been covered by human reviews, which is the part the document is mainly trying to solve.

Cheers,

Tim

[Chris Mills]

This is still the long term plan, yes. For now, I think it is OK to add stuff to the Fx Dev Guide; when the time comes it can all be moved together to wherever we agree on.