CSS and Angular Directives

Question

I am not that deep into web development but started learning Angular and CSS recently, now learning about css selectors and most of my directives for example has an ng-repeat/nested ng-repeats so i can just include the css classes inside the ng-repeat template, my questions are:

Does Angular change the way you write your css, like for example avoiding selectors in the CSS?
Any general tips on what to avoid in my CSS considering that the app I am working on is based on directives that I write by my own?

Here is an example :

before i turned my markup to a directive my css was like

.sidebar-menu > ul > li > a {
  border-bottom: 1px solid #ffffff !important;
  border-top: 1px solid #e7e7e7 !important;
  color: #555555 !important;
}

and the markup is something like

<div class="sidebar-menu">
  <ul>
   <li><a></a><li>
   <li><a></a><li>
   <li><a></a><li>
  </ul>
</div>

after changing it to a directive i removed the selectors

css

.linkc {
  border-bottom: 1px solid #ffffff !important;
  border-top: 1px solid #e7e7e7 !important;
  color: #555555 !important;
}

directive template

<ul>
  <li ng-repeat="item in items">
    <a class="linkc"></a>
  </li>
</ul>

It's just javascript - so if you change things live - keep in mind that the css is read once and then just a set of rules that may not apply the same way - if things have been changes since. — sheriffderek
– sheriffderek, Commented Mar 23, 2014 at 4:22

Sampson · Accepted Answer · 2014-03-23 04:38:20Z

Angular may dynamically modify your DOM. This won't necessarily affect the way you write your CSS. Granted, it could if you were building selectors like .first + .last which assumes one instance immediately follows another (Angular could insert many items in between, for example), but those issues should be few and far in between.

The only other way I can think that Angular would cause issues with your selectors is if you happen to run into conflicts using classname-based directives. But again, this isn't likely going to be something that you accidentally bump into unintentionally.

If you write modular CSS, that makes no assumptions about DOM structure and nesting patterns, you should be alright. If you want to start down the right path with regards to how you write your CSS, I would encourage you to check out Object-Oriented CSS.

Update

Thank you for adding the code that caused you to wonder about this. However, look at what is generated by Angular if you init some values:

<ul ng-app ng-init="items=['a','b','c']">
    <li ng-repeat="item in items">
        <a class="linkc">{{ item }}</a>
    </li>
</ul>

The following subtree is created:

<ul ng-app="" ng-init="items=['a','b','c']" class="ng-scope">
    <!-- ngRepeat: item in items -->
    <li ng-repeat="item in items" class="ng-scope">
        <a class="linkc ng-binding">a</a>
    </li>
    <!-- end ngRepeat: item in items -->
    <li ng-repeat="item in items" class="ng-scope">
        <a class="linkc ng-binding">b</a>
    </li>
    <!-- end ngRepeat: item in items -->
    <li ng-repeat="item in items" class="ng-scope">
        <a class="linkc ng-binding">c</a>
    </li>
    <!-- end ngRepeat: item in items -->
</ul>

Each <a> still has the .linkc class, so the CSS is still applied.

which is the same that will be generated when using css selectors, which way do you think is better for angular development keeping the css selectors or dumping them?
That question is unrelated to Angular entirely :) Please see the link I referenced in my answer for Object Oriented CSS. It will help you author solid modular CSS.

Collectives™ on Stack Overflow

CSS and Angular Directives

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related