npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@telegraph-engineering/stylelint-config-telegraph

v1.2.5

Published

Telegraph Engineering config for stylelint

Downloads

2,893

Readme

stylelint-config-telegraph

The Telegraph Engineering stylelint config.

We have based our config on stylelint-config-standard and made various custom changes to adhere to our internal standards.

Install

$ npm install @telegraph-engineering/stylelint-config-telegraph --save-dev

Usage

Within your stylelint config object You can extend this configuration. This will serve as a base for your config, then you can make overrides in your own config object.

{
  "extends": "@telegraph-engineering/stylelint-config-telegraph"
}

Rules

The different options for rules can be found in the original stylelint repo

Styleguide

Indentation

Indent your CSS properties with tabs. The default tab size should be set as 4.

Nesting

Heavy nesting should be avoided at all times, particularly with Sass. Every element should have its own class and be written on a new line.

Nesting is only permitted for pseudo selectors and must have a new, empty, line above them.

Readability vs Compression

CSS should be written in a readable manor and compression left for the build process and tooling.

Prefixes

Do not prefix any of your CSS as we let autoprefixer do all of the hard work for us.

Selectors

Multiple shared selectors should go on seperate lines and you should not have more than 3 levels deep for selectors.

Universal

Avoid all universal selectors (*). Components and styles will be shared on pages and these selectors will cause unforseen problems.

Type

Avoid the use of top level type selectors. Components and styles will be shared on pages and these selectors will cause unforseen problems.

ID

Never use ID selectors. The high specificty can cause unexpected issues between styles.

Class

Class names should be in the Block Element Modifier (BEM) style. BEM allows for clean, reusable code, that makes a clear connection between the HTML 'component' and its styles.

Compound

Never go more than two levels deep with compound selectors. If the BEM syntax is followed carefully then this should mitigate the need for these type of selectors.

Important

The use of !important should only be considered for helper classes or if it is a requirement to override third party, inline, styles.

Comments

Comment as much as you can to be as clear as you can. Where applicable, for a component, comment out a piece of markup to help define the context of the CSS. Comments should have a new, empty, line above them and be above the CSS selector.

@extend

We don't promote the use of the @extend operator. It can generate unexpected results in compiled CSS.

License

MIT © GitHub