The ul tag is very generic and something I continually struggle with.
Initially I had a base style rule defined for my ul and li tags to handle bullet points in my generic text blocks for WYSIWYG text.
I am using BEM so I figured I would just add a class to any ul which had a different role (say a menu, or a list of news thumbnails, etc.)
The problem is that I don't always have control over the markup; my current problem is a pagination plugin which uses a ul/li structure but doesn't allow me add a class to the ul.
I am using BEM so I don't really want to use descendant selectors, and especially element selectors, but I realise I will probably need to do so when I don't have access to the ul/li markup.
Any advice would be appreciated - especially with base/rest rules, as I have ul/li lists all over the place in so many sites and once and for all want to master this problem.
Thanks
A solution:
Reset the styles for ul/li with a CSS reset;
Make an exception in your BEM principles, and use a cascade for the formatted text. Example:
CSS:
.text ul {
list-style: circle;
}
.text li {
margin: .5em 1em;
}
.text p {
margin-bottom: 1em;
}
/* etc. */
HTML:
<div class="text">
<p>Here all the text is formatted</p>
</div>
I agree with #Tarh
So this comes up with WordPress theme dev all the time. All content areas get generic element that you can't attach classes too. So you have two solutions here:
Like Tarh describes above, you use a reset to kill all styles on UL/LI, and you only use BEM for styling them through out your site. But when you reach the content areas that don't allow you to add classes to elements, you just wrap the whole content area in a div with the BEM class of your liking, and you follow the steps above.
2.In WP there is a little know way to handle this, but it requires writing some functions. You can read about how to do this here. Basically, you make the hidden formatting dropdown visible, then you hide the default "paragraph/heading" dropdown hidden. Then you can format generic elements however you want. Like:
array(
'title' => 'Large heading',
'block' => 'ul',
'classes' => 'content__list'
)
But I don't know if you are actually referring to WP stuff, so I'm just going to end this here.
Best of luck! Stay awesome!
Related
Is it right, to add styles to html 5 semantics (nav, header, footer, etc...) like we add them to divs?
To use them instead of regular divs?
One time I heard frome someone I respect, that we should not add any style to html 5 semantic elements - just only if it is really necessary add a bit, but no many styles to this elements. Is he right?
for example
<nav>
<ul>
................
<ul>
</nav>
nav {
background-color: .....
width: ....
height: ......
margin: .....
color: ......
padding: ......
}
instead of
<nav>
<div id="nav">
<ul>
................
<ul>
</div>
</nav>
#nav {
background-color: .....
width: ....
height: ......
margin: .....
color: ......
padding: ......
}
How we should do it right?
What is the proper way of coding this?
What is perfect way of handling it?
The idea of separating the structure/content (you html code) from your style gives you exactly this ability, and actually drives you in this direction.
The structure gives multiple devices the ability to better understand your content in order to give your users a better experience. For example - if you will just use a ul > li structure for your menu, some devices that are not regular browsers will not be able to fully understand that this is the menu for your website, while using nav > ul > li gives them exactly that.
The style only tells the device how it should display them - and you should use it in order to give your users better experience.
The semantic elements helps us separate the structure of the page, for example:
Well, HTML5 semantic (nav, header, footer, etc...) were created to help us give meaningful and self-descriptive names to sections of our web pages. They are expected to be unique.
So, before the introduction of these semantics, sections were done this way:
<div id="main-section">
your content
</div>
<div id="sidebar">
your sidebar content
</div>
HTML5 semantics were supposed to save us from situations like the above while also being descriptive.
Styles were added to sections like the above then, and I don't see why we can't do the same now. There isn't really any rule against adding styles to HTML5 semantics but ensure that HTML5 semantics are used for unique elements in the first place.
I agree. Avoid adding styles to semantic elements. This is because these elements add nothing new when we are speaking about how things 'look'.
Remember that you want to avoid redundancy. If you need a block element, you are thinking about the 'look', and so use a div and style that. Then immediately inside that div, add your semantic element if you wish. Leave the semantic elements as hidden as possible from your css, and even from your selectors, whether in the css, or the javascript. However, adding a custom class that marks these semantic elements is good for clarity. And so, instead of:
div > * h1,
you would write like this:
div > .semanticElement h1.
This should be better for clarity, while avoiding referencing the semantic element.
If the reason for some of the above is not clear, think of it this way. The semantic changes for one element, and now suddenly I also have to make a change in the css and javascript, which is absurd.
I'm using Wordpress>Atahualpa Theme>Recent Posts Widget Extended on my site toawaken.org.
Recent Posts are listed in the r.h. sidebar. I have added a "bullet" (disc) in front of each Post title. When I did so, it threw the spacing off.
If you link to my site, you will see for some reason the added bullet is forcing the text to appear one line below the bullet, instead of right next to it, on the same line as the bullet, as it should. I want the post's title to line up on the same line as the bullet, not one line below it. I tried adjusting margins/padding in the CSS editor, but no margin/padding combination changed this. Nor did changing the div list-style-position from inside to outside:
div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}
If anyone could please check the sidebar on my site and offer a remedy, would be much appreciated.
This plugin seems to have a clearfix implemented in the <li> elements, and it's pushing headers to the next line. You can override it with this CSS:
.rpwe-clearfix:before, .rpwe-clearfix:after {
content: none;
}
As a side note, try not to use so much !important expression in your stylesheets. You'll end up having more and more difficulties changing the CSS rules. If you want to everride certain rule, you use a selector with just a bit stronger specificity than the one you want to change.
You can read more about selectors' specificity here.
My website has two different css style documents. The first is specifically for the index page, which uses lists to do the tabs at the top for a link bar between the title and the rest of it. This has the code:
index.css:
u1
{
list-style-type:none;
}
along with some code which applies to the li elements.
The other css document is for the rest of the site. I want to use lists for some of the other parts, but I'm having an issue. While the li elements are overwriting properly, I can't get u1 element to show the bullets in the rest of the site. I've tried using u1.a and u1.b , but that doesn't fix it.
main.css:
u1
{
list-style-type:circle
}
Try overwriting it by adding !important
u1
{
list-style-type:circle!important;
}
and/or add another CSS file with just this rule to the page you want to be different.
The element is ul as in UL not u1 and in u-one. I assume this is not a typo of the code because it's all over the place in your question.
CSS work by cascading and specificity. Having list style apply to other elements of your site might be as simple as adding a class:
ul.circle {
list-style-type: circle;
}
and then adding the same class to your element in the HTML document, as such:
<ul class="circle"></ul>
There are many different ways to override CSS, and I described them in an answer of sometime ago, but in your case this should be the easiest.
sorry to probably reiterate what was already said, but if you wanted to make your 'u-one' class, you should prepend a dot to it, so it is either a class:
.u1 {list-style-type: circle;}
And you will use it as a usual class, ie
<ul class="u1"> <li></li> </ul>
or use ul [UL] as a tag:
ul {list-style-type: circle;}
and all your UL lists will have this formatting.
The way you put it in your css will not work with html because the 'u1' tag does not exist.
But I'll need to see a snippet of your html to be sure.
I have a tab system built in css using unordered lists and list items. I would like to embed a second tab structure using the same visual style within my content region. I was able to do that and everything functioned, but there is an appearance issue. Within my content region I have a different set up ul definitions. I would essentially like to tell one div to follow half of the instructions defined in the content region. The spacing and that type of formatting is needed, but I would like the ul stuff ignored.
If anyone has experience in this, I will gladly supply any needed code. I didn't want to post a bunch of stuff that didn't assist in solving the problem though.
Thanks for your help
You need to specifically target the lis and uls only in your content and override values you dont want or change.
If your content is in a wrapper called #content, and the tabs are called .tabs then do
#content .tabs {
background-image:none;
margin:0px;
}
and so on, setting the values you need.
How are the tabs styled? Use the exact same selectors but put a selector in front of them, like the content wrapper so you can target them specifically.
Hard to give you an exact answer without any code.
Apply an "un-reset" CSS block to your content region.
See: https://github.com/jbcrawford/Un-ResetStylesheet
or: http://noscope.com/vanilla-css
How does one go about establishing a CSS 'schema', or hierarchy, of general element styles, nested element styles, and classed element styles. For a rank novice like me, the amount of information in stylesheets I view is completely overwhelming. What process does one follow in creating a well factored stylesheet or sheets, compared to inline style attributes?
I'm a big fan of naming my CSS classes by their contents or content types, for example a <ul> containing navigational "tabs" would have class="tabs". A header containing a date could be class="date" or an ordered list containing a top 10 list could have class="chart". Similarly, for IDs, one could give the page footer id="footer" or the logo of the website id="mainLogo". I find that it not only makes classes easy to remember but also encourages proper cascading of the CSS. Things like ol.chart {font-weight: bold; color: blue;} #footer ol.chart {color: green;} are quite readable and takes into account how CSS selectors gain weight by being more specific.
Proper indenting is also a great help. Your CSS is likely to grow quite a lot unless you want to refactor your HTML templates evertime you add a new section to your site or want to publish a new type of content. However hard you try you will inevitably have to add a few new rules (or exceptions) that you didn't anticipate in your original schema. Indeting will allow you to scan a large CSS file a lot quicker. My personal preference is to indent on how specific and/or nested the selector is, something like this:
ul.tabs {
list-style-type: none;
}
ul.tabs li {
float: left;
}
ul.tabs li img {
border: none;
}
That way the "parent" is always furthest to the left and so the text gets broken up into blocks by parent containers. I also like to split the stylesheet into a few sections; first comes all the selectors for HTML elements. I consider these so generic that they should come first really. Here I put "body { font-size: 77%; }" and "a { color: #FFCC00; }" etc. After that I would put selectors for the main framework parts of the page, for instance "ul#mainMenu { float: left; }" and "div#footer { height: 4em; }". Then on to common object classes, "td.price { text-align: right; }", finally followed by extra little bits like ".clear { clear: both; }". Now that's just how I like to do it - I'm sure there are better ways but it works for me.
Finally, a couple of tips:
Make best use of cascades and don't "overclass" stuff. If you give a <ul> class="textNav" then you can access its <li>s and their children without having to add any additional class assignments. ul.textNav li a:hover {}
Don't be afraid to use multiple classes on a single object. This is perfectly valid and very useful. You then have control of the CSS for groups of objects from more than one axis. Also giving the object an ID adds yet a third axis. For example:
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}
div.wide {
width: 15em;
}
div.narrow {
width: 8em;
}
div#oddOneOut {
float: right;
}
</style>
<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
Giving a class to your document <body> tag (or ID since there should only ever be one...) enables some nifty overrides for individual pages, like hilighting the menu item for the page you're currently on or getting rid of that redundant second sign-in form on the sign-in page, all using CSS only. "body.signIn div#mainMenu form.signIn { display: none; }"
I hope you find at least some of my ramblings useful and wish you the best with your projects!
There are a number of different things you can do to aid in the organisation of your CSS. For example:
Split your CSS up into multiple files. For example: have one file for layout, one for text, one for reset styles etc.
Comment your CSS code.
Why not add a table of contents?
Try using a CSS framework like 960.gs to get your started.
It's all down to personal taste really. But here are a few links that you might find useful:
http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
http://www.louddog.com/bloggity/2008/03/css-best-practices.php
http://natbat.net/2008/Sep/28/css-systems/
Think of the CSS as creating a 'toolkit' that the HTML can refer to. The following rules will help:
Make class names unambiguous. In most cases this means prefixing them in a predicatable way. For example, rather than left, use something like header_links_object2_left.
Use id rather than class only if you know there will only ever be one of an object on a page. Again, make the id unambiguous.
Consider side effects. Rules like margin and padding, float and clear, and so on can all have unexpected consequences on other elements.
If your stylesheet is to be used my several HTML coders, consider writing them a small, clear guide to how to write HTML to match your scheme. Keep it simple, or you'll bore them.
And as always, test it in multiple browsers, on multiple operating systems, on lots of different pages, and under any other unusual conditions you can think of.
Putting all of your CSS declarations in roughly the same order as they will land in the document hierarchy is generally a good thing. This makes it fairly easy for future readers to see what attributes will be inherited, since those classes will be higher up in the file.
Also, this is sort of orthogonal to your question, but if you are looking for a tool to help you read a CSS file and see how everything shakes out, I cannot recommend Firebug enough.
The best organizational advice I've ever received came from a presentation at An Event Apart.
Assuming you're keeping everything in a single stylesheet, there's basically five parts to it:
Reset rules (may be as simple as the
* {margin: 0; padding: 0} rule,
Eric Meyer's reset, or the YUI
reset)
Basic element styling; this
is the stuff like basic typography
for paragraphs, spacing for lists,
etc.
Universal classes; this section
for me generally contains things
like .error, .left (I'm only 80%
semantic), etc.
Universal
layout/IDs; #content, #header,
or whatever you've cut your page up
into.
Page-specific rules; if you
need to modify an existing style
just for one or a few pages, stick a
unique ID high up (body tag is
usually good) and toss your
overrides at the end of the document
I don't recommend using a CSS framework unless you need to mock something up in HTML fast. They're far too bloated, and I've never met one whose semantics made sense to me; it's much better practice to create your own "framework" as you figure out what code is shared by your projects over time.
Reading other people's code is a whole other issue, and with that I wish you the best of luck. There's some truly horrific CSS out there.
Cop-out line of the year: it depends.
How much do you need to be styling? Do you need to change the aspects of alomost every element, or is it only a few?
My favorite place to go for information like this is CSS Zen Garden & A List Apart.
There are two worlds:
The human editor perspective: Where CSS is most easily understand, when it has clear structure, good formatting, verbose names, structured into layout, color and typesetting...
The consumer perspective: The visitor is most happy if your site loades quickly, if it look perfect in his browser, so the css has to be small, in one file (to save further connections) and contain CSS hacks to support all browsers.
I recommend you to start with a CSS framework:
Blueprint if you like smaller things
or YAML for a big and functional one
There is also a list of CSS Frameworks...
And then bring it in shape (for the browser) with a CSS Optimizer (p.e. CSS Form.&Opti.)
You can measure the Results (unpotimized <-> optimized) with YSlow.
A few more tips for keeping organized:
Within each declaration, adopt an order of attributes that you stick to. For example, I usually list margins, padding, height, width, border, fonts, display/float/other, in that order, allowing for easier readability in my next tip
Write your CSS like you would any other code: indent! It's easy to scan a CSS file for high level elements and then drill down rather than simply going by source order of your HTML.
Semantic HTML with good class names can help a lot with remembering what styles apply to which elements.