Jeremy Daley daleyjem

LESS/SASS Guidelines

Structure. Structure. Structure

Make sure structure is organized and created in such a way that accommodates a large project by properly categorizing and modularizing folders and files. It’s better to feel that you’re over-engineering at the beginning, and restructure “down” later, than to assume a minimal set-up up front, simply for the sake of expediency.

Bad:

> less
	*all-of-the-files.less

Deep Imports

Description

A "deep import" is simply an ESM import that goes deeper than the package root:

import thingA from 'my-package-name/src/components/thingA'
import thingB from '@my-namespace/my-package-name/src/components/thingA'

It doesn't make sense upon initial description reading, but there is a use case for it... Updating a package.json dependency to use a caret without getting the latest semver match.

I'm currently working on a very large project, in which we would like to enforce exact version matches across all child workspace package.json files.

Understand that when I say child workspace packages, you mustn't assume this project is a monorepo that publishes its packages. It uses yarn workspaces simply for the benefit of doing non-relative-path imports:

import { thing } from 'internal-package-a'
// vs

	import { NgModule } from '@angular/core';
	import { ServerModule } from '@angular/platform-server';
	import { AppModule } from './app.module';
	import { AppComponent } from './app.component';

	@NgModule({
	imports: [
	ServerModule,
	AppModule
	],

	const axios = require('axios')

	const userToken = '<user token>'
	const devToken = '<dev token>'

	/**
	* Gets a distinct array of the artists in a user's playlists
	* @param {string} devToken The Apple-issued JWT developer token
	* @param {string} userToken The returned Apple `musickit.authorize()` user token
	*/