Using Import statement

[VShaneCurtis]

Hi Guys,

I wanted to get some opinons about using the Import statement.  I'm not a wiz at web page development.  I've had training in college and I understand the basic concepts and ideas.  I don't seem to have a real knack for building a page from scratch.  I'm more comfotable working from thrid party templates and modifying or tweaking them.  I've been working with a third party template and making modifications to it.  As I've been working with the template I've noticed certain aspects in the design that corespond to certain aspects of software development.  The template uses a few different CSS files that I would consider to be Presentation Layer elements.   They control the final look and feel of the page. Names like Primary Secondary Minimized and Magazine.  There are also other CSS files being used within the template.   I would consider these CSS files to be secondary CSS files which focus in on a specific aspect of the page like fonts or padding and spacing.  Curently these CSS files are being pulled into the template in the same fashion as the Presentation Layer CSS file.  My question is, Can I use the Import statement to pull the secondary CSS files into the Presentation Layer CSS file.   Software design priciples say that design should be layered and that the layers should be isolated.  In other words, I should only see the Presentation Layer CSS file in the template.  The Presentation Layer CSS should pull in any lower layer files it needs by whatever means are available.  In the software development would the process has 3 layers.  The Data Acess Layer which is the database and related queries. The Business Logic Layerr which provides the programming code to access the database and queries and implements the business rules and The Presentation Layer which controls what the user sees and how the program interacts with the user.  Each layer is connected to the one above and communication travels up and down through the layers.  There is no cross connection of one layer bypassing another.  I want to implent a similar approach in this template if possile.  Any thoughts you have are appreciated.  Thanks

[Nancy OShea]

I don't use @Import much except when creating media-queries for specific devices or conditional use cases. 

@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import "common.css" screen;

For most purposes, ordinary <links> to external CSS files are cleaner and easier to manage.

Have a look at these tutorials.

https://www.w3schools.com/cssref/pr_import_rule.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[osgood_]

I think you're just over complicating matters which seems to be the new norm these days, for some reason. I dont know if this approach is to disguise the fact that its become too easy to build websites and the more complex its made to look somehow justifies that its still skillfull ...........just use common sense.

I never use import. l guess l could import external css like Google fonts into one stylesheet which cuts out the call to the server if it was a linked file but in my experience there's no benefit. You should look at the source code for a WordPress website, depending on the amount of plugins used you could see 20 or 30 calls to the server to retrieve css and javascript files.

Keep, it simple, stupid would be my advice and forget trying to make it appear more complex than what it really is or should be.