[HN Gopher] Show HN: ECSS - Simple rules for efficient CSS
       ___________________________________________________________________
        
       Show HN: ECSS - Simple rules for efficient CSS
        
       A list of CSS authoring rules with examples and a Stylelint config
       accessible from the top of the page.  I've come to these through 20
       years of experience and a willingness to make vanilla CSS a better
       alternative to frameworks.  I encourage you all to comment on the
       rules themselves and the Stylelint Config for ECSS. Here's the link
       for faster access (I still suggest at least zipping through the
       rules beforehand).
       https://www.npmjs.com/package/@efficientcss/stylelint-config...
        
       Author : emmacharp
       Score  : 14 points
       Date   : 2024-03-13 12:46 UTC (10 hours ago)
        
 (HTM) web link (ecss.info)
 (TXT) w3m dump (ecss.info)
        
       | pwnOrbitals wrote:
       | ECSS also means "European Consortium for Space Standardization".
       | They edit the standards for all fields within space engineering
       | :)
        
         | emmacharp wrote:
         | Ha! Nice, we're in good company then!
        
       | adr1an wrote:
       | A pre-commit script would be nice and easy entry (at least for
       | me)
        
         | emmacharp wrote:
         | As of now, you can integrate the Stylelint config in the
         | editor/IDE of your choice to have live linting (tested with VS
         | Code and Vim). Or you can run stylelint manually in the
         | terminal.
         | 
         | Didn't think about git pre-commit hooks to be honest. But I'll
         | look into it. If you have any ideas/suggestions, they are very
         | welcome!
        
       | midzer wrote:
       | Pretty solid approach, been a good read.
       | 
       | CSS performance is underrated as well.
        
         | emmacharp wrote:
         | Thanks! And you're right about performance. The "just in time"
         | approach as an alternative to the monolithic minified CSS file
         | has proven to be quite interesting on this subject.
        
       | SkeuomorphicBee wrote:
       | >Use attribute selectors to convey unicity.
       | 
       | > /* Do */
       | 
       | > [id="main"] { max-width: 80ch; }
       | 
       | > /* Don't */
       | 
       | > #main { Max-width: 80ch; }
       | 
       | I strongly disagree with this kind of guideline. The id attribute
       | has very good uses, and in those cases the hash syntax should be
       | the preferred way.
       | 
       | The use of id in an attribute selector is such a bad choice that
       | makes me question the whole document.
        
         | emmacharp wrote:
         | I'm curious: why is it such a bad choice?
         | 
         | As for the #selector, in what cases do you need that much
         | specificity? Not a rhetorical question!
        
       ___________________________________________________________________
       (page generated 2024-03-13 23:02 UTC)