CODEWITHSUNDEEP
javascriptangularjs
Ricky
Ricky

Reputation: 2907

AngularJS - Custom Directive - CSS separate file?

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?

Upvotes: 1

Views: 355

Answers (4)

Diego Unanue
Diego Unanue

Reputation: 6826

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.

Upvotes: 0

MaK
MaK

Reputation: 110

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.

Upvotes: 1

Reactgular
Reactgular

Reputation: 54771

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

Upvotes: 2

Mike Feltman
Mike Feltman

Reputation: 5176

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.

Upvotes: 1

Related Questions