I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
Related
I usually do like this if I want to objects on the same row:
<ul class="list-inline">
<li>
<label>Name:</label>
</li>
<li>
<p>John</p>
</li>
</ul>
The other way I know is to use row and columns. Alot of code for a simple thing. Is there something built in for this?
Something like:
<div class="some-neat-bootstrap-class">
<label>Name:</label>
<p>John</p>
</div>
Can't find any in the docs.
You can display both of those elements inline.
.some-neat-bootstrap-class label,
some-neat-bootstrap-class p {
display:inline;
}
I have a header navigation with kinda difficult hover effect.
In order to make it dynamic and NOT hard-coded, I'm gonna have to use spans inside list elements or even better I'm gonna need entire navigation done using DIVs.
Is there a way to edit the wordpress function wp_nav_menu() (codex definition)
so that it will give me divs that I want instead of ul-li hierarchy?
Another solution is to build it the common way but then append spans to it using jQuery. But that's my last resort.
Has anyone had similar experiences?
Thank you
Edit:
instead of
<ul>
<li>...</li>
<li>...</li>
</ul>
I'm gonna need:
<div class="x">
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
</div>
You need to use a custom menu walker. See http://codex.wordpress.org/Function_Reference/wp_nav_menu and http://www.mattvarone.com/wordpress/cleaner-output-for-wp_nav_menu/ and other Google results for "wordpress menu walker"
I've to setup a rather weird Navigation system for a Wordpress powered site.
Here is the sample code;
<nav>
<ul>
<li>Parent Menu
<div class="dropdown">
<div class="inner-menu-item">
<dl>
<dt>Title tag for the sub-menus below</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
<dt>Title tag for another sub-menu</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
</dl>
</div>
</div>
</li>
<!-- similar structure as above -->
<li>Parent Menu
<div class="dropdown">
<div class="inner-menu-item">
<dl>
<dt>Title tag for the sub-menus below</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
<dt>Title tag for another sub-menu</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
</dl>
</div>
</div>
</li>
</ul>
</nav>
What should be the best approach to write a Wordpress Nav code for the above setup?
It will be awesome if I can have the option to exclude some menu items too.
I'm OK with alternative methods where I have to change the CSS, I'm pretty comfortable with that. For instance wrapping inside multiple UL > LI instead of the DIV and DL > DD.
Use [wp_nav_menu]1 function to generate a menu. Using it will save you pretty much efforts and is supposed to be good practice in wordpress.
You'll have a structure pretty much like this:
<div id="menu-wrapper">
<ul id="menu">
<li id="menu-item-1">
Title
<ul class="sub-menu">
<li>Title 2</li>
<li>Title 2</li>
</ul>
</li>
</ul>
</div>
You can customize this structure by inheriting Walker_Nav_Menu and passing your new class instance to wp_nav_menu.
It's simple. Use WP menu and then assign class to the menu which has just title. Set the location to # and change cursor type for that class using CSS.
Also, div classes can be taken out and CSS properties can be given to Ul and LI inside first UL LI
IMHO the markup you have listed doesn't sound to be semantic. Instead of this you can use ul/li. Think of this from a search engine point of view, removing the CSS using web developer toolbar. You may further refer to w3c. I am writing as you have rights to modify the markup.
Wordpress is having menus option under the appearance tab, you can use that to setup herarchy. It will give you an unordered list. All that remains now is doing the CSS work.
Here is a great link that will help you get the CSS correct. Take a look at this for help on CSS.
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}
I am using the following rule to display a dot when the web is visited by a IE.
However, I don't know why the li.iedot doesn't work for IE6.0. In other words, all #nav-primary li displays the dot rather than #nav-primary li which has class .iedot.
#nav-primary li.iedot
{
font-size:110%;
color:#666;
*background:url(http://static02.linkedin.com/scds/common/u/img/bg/bg_grey_dotted_h-line_3x1.png) no-repeat 0 7px;
padding-right:2px;
*padding-right:6px;
*padding-left:6px;
*zoom:1;
}
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab iedot" id="nav-primary-home">
<span>Home</span>
</li>
<li class="tab iedot" id="nav-primary-profile">
<span>Profile</span>
</li>
<li class="tab" id="nav-primary-about">
<span>About</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
1> How to fix it? Or IE just cannot do it.
2> Where I can find some website that indicates which css feature is supported by IE?
Thank you
Quirksmode by ppk is the place to learn about the browser inconsistencies.
Added: why it doesn't work --
I think the IE 6 bugs with elements that have multiple classes may be tripping you up.
Test this out by changing your html to be
<li class="iedot" id="nav-primary-home">
instead of
<li class="tab iedot" id="nav-primary-home">
If that's the problem, then you'll need to use only one class name in the element. You could either invent a bunch of new class names or add a wrap div/span with the iedot class.