11ty / 11ty-website

Documentation site for the Eleventy static site generator.
https://www.11ty.dev/
MIT License
473 stars 680 forks source link

Internal vs. Inline JS and CSS #102

Open missmatsuko opened 5 years ago

missmatsuko commented 5 years ago

I don't think 'inline' is an accurate term for what's described on QUICK TIP #001—INLINE MINIFIED CSS and QUICK TIP #002—INLINE MINIFIED JAVASCRIPT.

An internal stylesheet is where you don't have an external CSS file, 
but instead place your CSS inside a <style> element, contained inside the HTML head.
Inline styles are CSS declarations that affect one element only, 
contained within a style attribute:

REF: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML

I think for JS as well, inline implies something like a click handler on an element:

<button onclick="console.log('clicked');">Click me</button>
CanIGetaPR commented 1 year ago

That's correct, css in a style element is called Internal CSS. JS in a script element is called Internal JS.

zachleat commented 1 year ago

I think this convention is commonly used when referring to critical CSS, there are a few examples here: https://web.dev/extract-critical-css/