I'm making a custom directive <top-nav>.
Should I isolate the CSS for this in its own file?
What if it requires CSS from the main application that's shared across other pages?
Add a comment
|
4 Answers
Take a look at LESS and SASS css compilers.
I structure my apps like this.
/app
/directives
/fooWidget
fooWidget.scss
fooWidget.js
fooWidget.html
/directives.scss
/app.scss
/app.js
3 Comments
Ricky
Thanks! Off the bat, any preference of LESS vs SASS? Or is this a Ruby vs Python style question :p
BroiSatse
@Ricky - I would go with SASS, as it is just more powerful and you can easily add compass. More reasons: zingdesign.com/less-vs-sass-its-time-to-switch-to-sass
Reactgular
@Ricky which X or Y is something you have to decide on your own. I've used compass and it does save you time, but it has it's own compiler.
If you intend to publish it somewhere then you definitely want to isolate the CSS.
If this is only for internal use, it's a matter of preference, but I think the majority of developers would prefer if it's separate.
CSS in a separate file can still inherit from CSS defined elsewhere. Eventually you'll probably end up using Gulp to minify and combine all your CSS anyway.
2 Comments
Ricky
Thanks @MikeFeltman. Same question as Diego, would you then include your CSS in your template HTML file via a <link> tag? or just include in the parent HTML file?
Mike Feltman
Personally I like to have all of my CSS & JS loaded in my index.html file. I'm too old to keep track of where I load things from otherwise.
I don't see that as a necessity. If you are adding a template in your directive, then keeping the css to the external file won't do any harm, as the directive gets loaded when the DOM is being parsed & the style written for the element will be loaded accordingly from the external style sheet.
Hope that helps.
Comments
It is a good practice to use an isolate CSS file to the directive. You can use a structure for the directive like this:
/clockWidget
clockWidget.css
clockWidget.js
clockWidget.html
For the directive css it self you can create a css class that wraps all the html and use that class to affect only the directive html.
for instance, create the footer-widget css class and specify that class for the html elements of the directive.
In the clockWidget.css:
span .footer-widget{
background-color: red;
}
then in your html:
<div class="footer-widget">
<span>I'm The footer</span>
</div>
This way the css class will wrap all the html, only affecting the directive html. And you can use main application css without problems.
1 Comment
Ricky
So if I separate the CSS, does that mean I'll need to include the CSS into my directive via a <link> tag?