William Killerud
Keith J GrantIf you could have a magic #CSS linter/preprocessor that could flag *any* problems (selector conflicts, bad practices, etc), what would you like it to catch?
I have some fledgling ideas for a new type of #CSS tool. Kind of an opinionated, best-practices-enforcing linter/preprocessor. Trying to determine if the utility it can offer is worth the development effort it would take
Paul Shryock@keithjgrant What benefits would it have over using stylelint and sass?
@paulshryock I'm still collecting my thoughts, but the general idea is adding syntax to the language that can clue the linter into more info than raw CSS might do.
For example, enforcing specific cascade layers (ITCSS style) and ensuring the code in each layer "stays in its lane" doing only work it is supposed to do; or wrapping each module/component with an @module rule, so it can know those styles belong together and verify they don't conflict with other modules
@paulshryock I would certainly weave in a lot of existing eslint rules, too, but I'm mostly trying to see if there's enough "extra" it could do to really tackle pain points that eslint alone can't
@keithjgrant I wonder if this stuff could be achieved through a custom stylelint plugin.
https://stylelint.io/developer-guide/plugins/
Not to discourage you from writing a new tool, just throwing it out there in case it would save time and effort and achieve the same thing.
@paulshryock I was thinking of using postcss directly, but this would probably be another viable path. good to know, thanks! 👍🏻
🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻♓🧿@keithjgrant replace all instances of "gray" with "grey"
Dusty Pomerleau@keithjgrant Rules that have no effect, either due to errors in the CSS, or due to being universally overridden by another rule. By far the hardest aspect of CSS is silent failure.
@keithjgrant throw an error for any instance of `div` in a selector and suggest semantic markup instead.
Timothy Leverett1. flag usage of `px` instead of `rem`, and make it configurable because sometimes a project calls for only using `rem` for font-related rules.
2. flag any custom properties that haven't been defined somewhere (mostly to catch typos).
3. flag any direct assignment of z-index. z-index should always use custom properties. The custom properties should be suffixed with `-index` and be assigned in the same ruleset as `isolation: isolate` (maybe someday I'll write up an explanation).
Miron 🇪🇺@keithjgrant I’m using Vanilla Extract and I really appreciate that it catches typos and inexisting class names.
It also scopes the css automatically so I don’t need to learn BEM to keep css manageable.
Really, this has stood the test of time for me and I think there is always a place where we conpile the css at build time. Even if the browser could do these things at run time, there would be a performance cost.
Joseph Dickson@keithjgrant
- list of !important for remediation. (Important should always be a last resort not a practice to override rules in need of correction elsewhere. 😉)
- list of repeated identical rules.
- list of !important for remediation. (Important should always be a last resort not a practice to override rules in need of correction elsewhere. 😉)
- list of repeated identical rules.
@josephdickson for identical rules, are you thinking like running a report/analysis to see where you're doing the same thing in multiple places? Or more like preventing duplicate rules in the same ruleset
@keithjgrant mainly for uncovering duplicates, sometimes we inherit projects from others. Multiple sheets, overrides and it balloons out of control. For instance my last freelance project had two CSS designer/developers that worked on it prior to myself. I had no access to them so digging through details was next to impossible.
meduz'@keithjgrant Stuff related to the stacking context, maybe. (Maybe it already exists…)
Frost, wolf of winter 🐺🎄
@keithjgrant Honestly, less selector conflicts and /certainly/ not "bad practices" (especially code style, I am sick and tired of tools trying to tell me how to style my code, I have my own style in mind thank you) and more like
weird gotchas, like how you need to set the margin to 0 on html, body if you want to make it height: 100% without an annoying little scrollbar.