Sticking to modular styling

Question

I have two modules:

A .master-header and a .header-nav

The .header-nav is inside the .master-header and is a simple nav:

<nav class="header-nav">
          <ul>
            <li class="active">
              <a href="/home">Home</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
            <li class="">
              <a href="/photos">Photos</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
          </ul>
        </nav>

In my .header-nav module I have the height of the a, li and ul to be 100% and then set the height of the .header-nav to be 100px from within the .master-header as that's logically correct as to where the layout styles for it's children should belong.

Now, the problem comes as I wish to vertically center the text within the a's. Line height is perfect for this but 100% won't work as 100% is the height of the font. line-height: 100px is the perfect thing to use to solve the issue but putting that inside the .header-nav module seems wrong as that's indicating that ALL .header-nav's should be like that. I'd much rather it say something like 50% but I can't do padding-top: 50% as that's based on the width of the item.

Any thoughts on what to do?

Neil

Please supply a jsfiddle, so those willing to help you have something more than markup to play around with! — Mathias Rechtzigel, Nov 07 '13 at 19:12
Not only that, but it's unclear what you want to achieve. It was alright up to "the perfect thing" - you meant you wanted something like [this fiddle](http://jsfiddle.net/MrLister/cfM7d/1/) - but then it got muddled. — Mr Lister, Nov 08 '13 at 08:20
If I'm guessing correctly, the solution is that there are other units besides `px` and `%`. How about `em`? In my example, the header-nav is 6em high, so half of that would be 3em. Would that work? — Mr Lister, Nov 08 '13 at 08:21
Or, as you seem to indicate, there are more elements with class `header-nav`, and your problem is that you want to pick out this specific one? In that case, just give it another class. You can give elements as many classes as you want in the class attribute: `class="header-nav yes-this-one"` — Mr Lister, Nov 08 '13 at 08:23
I didn't do a jsfiddle as it's not a sort of programming problem, more of a "where do I place this?" issue. line-height: 100px can solve my issue but I would have to place that line inside my .header-nav module and that doesn't seem like the right place according to the BEM module methodology. — rctneil, Nov 08 '13 at 18:30

score -1 · Answer 1 · answered Nov 13 '13 at 10:15

-1

You can use display: table-cell in order to achieve vertical alignment.

.header-nav {height: 100px}

.header-nav ul,
.header-nav li {height: 100%}

.header-nav ul {display: table;}
.header-nav li {display: table-cell; vertical-align: middle}

Check out this plunker for a working version

answered Nov 13 '13 at 10:15

katranci

2,551
19
24

Apart from CSS properties, it would be better to avoid "tag selectors" as they decrease page performance and make future support harder. More information is here http://bem.info/articles/yandex-frontend-dev/ – Varvara Stepanova Nov 13 '13 at 18:19
Yandex is using tag selectors in bem on their website and different services. – katranci Nov 13 '13 at 18:28
Could you please explain why you are using `.b-center .b-tabs td` selector on your homepage? – katranci Nov 13 '13 at 18:50
I am not sure whose homepage is mentioned. If mine, I can explain if getting a link on it. – Varvara Stepanova Nov 21 '13 at 17:18
1

Actually the purpose of CSS part of BEM is to provide independent block components which is only possible with avoiding tag selectors. You can find explanations here http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/ – Varvara Stepanova Nov 21 '13 at 17:21

Sticking to modular styling

1 Answers1