Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Syntax for external files

cbreemer

cbreemer

Bronze Coder
Not a problem, just a question. I am struggling to understand why the syntax for including external CSS and JS is so different. Currently I use this :

HTML: 
<script                 src="http://localhost:80/lib/dialogs.js"></script>
<link rel="stylesheet" href="http://localhost:80/lib/dialogs.css">

This works, but being a sucker for neat and tidy code, this syntax annoys me. I don't really see why there should be a difference. Would/should it not be possible to use the same syntax for both ? Or even better, for the JS fle to pull in the CSS file so I would only need one line ?
 
Solution
cbreemer
For the record, I found out it is real easy to have the external JS pull in the external CSS on its own :

JavaScript: 
    const link = document.createElement('link');
    link.setAttribute('rel',  'stylesheet');
    link.setAttribute('href', 'http://localhost:80/lib/dialogs.css');
    document.head.appendChild(link);

so that pages will only have to <script> the external JS file. Problem solved 😊
Sort by date Sort by votes
Coding works in mysterious ways.
The most probable reason might be that the people who maintain JavaScript differ from those who take care of HTML/CSS and want different call standards.
 
Upvote 0 Downvote
OldMan said:
Coding works in mysterious ways.
The most probable reason might be that the people who maintain JavaScript differ from those who take care of HTML/CSS and want different call standards.
Click to expand...
Things evolve in random ways, is what you mean to say. Still I was hoping for some rhyme or reason behind it.
 
Upvote 0 Downvote
I'm sorry alexcray, but things are a little simpler -> "href " is the URL of an external script. We could JS the same way but "src" allows us to call the script in three different ways:
asynchronously , defer , and just run it where the script tag exists.

I don't think if JS was called like this ->
<script rel="javascript" href="http://localhost:80/lib/dialogs.js">
OR
<link rel="javascript" href="http://localhost:80/lib/dialogs.js">
it would confuse coders
 
Upvote 0 Downvote
alexcray said:
CSS and JavaScript serve distinct purposes. CSS focuses on presentation and styling, while JavaScript handles interactivity and dynamic behavior. Keeping separate syntaxes reinforces this separation and promotes cleaner, more maintainable code. Imagine mixing styling rules with logic and event handlers – it would become messy and hard to follow.
Click to expand...
Thanks, I am aware of JS and CSS being two different animals 😊 But at the <head> level, these are just two files we need to pull in. The different syntaxes do nothing to help understand the differences between CSS and JS, not do they result in cleaner code. Especially the href (which is typically used when you click on something) seems illogical and confusing to me, as is the use of <script> both to contain local script and to link to external script. Not to mention that <script> needs an end tag but <link> doesn't. The two lines I need to use seem messy and inconsistent to me, and I think it should have been done like this:

HTML: 
<link rel="javascript" src="http://localhost:80/lib/dialogs.js">
<link rel="stylesheet" src="http://localhost:80/lib/dialogs.css">
 
Last edited:
Upvote 0 Downvote
For the record, I found out it is real easy to have the external JS pull in the external CSS on its own :

JavaScript: 
    const link = document.createElement('link');
    link.setAttribute('rel',  'stylesheet');
    link.setAttribute('href', 'http://localhost:80/lib/dialogs.css');
    document.head.appendChild(link);

so that pages will only have to <script> the external JS file. Problem solved 😊
 
Upvote 0 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom