CSS style resetting - css

Usually in order to get the style the same for every browser you see some sites have something like this:
html, body, div, span, object, ... {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Is there a reason why they don't simply use:
*, html { ... }

The more broad a set of CSS rules is, the more processing it'll take to load them. The best ruleset is also the most specific.

You can use something along the lines of
* {
margin: 0;
padding: 0;
...
}
to reset everything, the big drawback is, it does exactly that. Then paragraphs don't have any spacing, etc. I'd rather have universal style than having no style and starting from scratch.
This article does a good job explaining the benefits as well, starting at the section titled "A reset to where it all started…"

Related

Overwrite multiple css rules

I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really

What is right BEM approach to global class inheritance?

I recently started using BEM methodology and I'm confused about class inheritance, or rather - when we talk about BEM - some use cases of modifiers.
Let's look at this example, I have a simple element with few children
.b-content { width: 100%; }
.b-content__image { display: block; }
.b-content__date { font-size: 14px; }
.b-content__title { font-size: 30px; }
.b-content__text { font-size: 16px; }
Now I want to reuse my .b-content block with slightly different styles, so I use modifier .m-compact and now I'm not sure what approach is the right one (in BEM).
Whether I should append modifier class to all elements (which I find more valid according to documentation):
.b-content.m-compact { width: 50%; }
.b-content__image.m-compact { display: none; }
.b-content__date.m-compact { font-size: 12px; }
.b-content__title.m-compact { font-size: 24px; }
.b-content__text.m-compact { font-size: 14px; }
or should I append modifier only to the parent element:
.b-content.m-compact { width: 50%; }
.b-content.m-compact .b-content__image { display: none; }
.b-content.m-compact .b-content__date { font-size: 12px; }
.b-content.m-compact .b-content__title { font-size: 24px; }
.b-content.m-compact .b-content__text { font-size: 14px; }
I find this second method more logical, you know, since I'm writing cascading styles and in real world if I want to write e-mail to 10 people, I would write one and just add more recipients, but on the other hand I realize BEM is practically non-cascading approach.
So what should I use and why?
As you point out in the last lines of your question, when doing BEM you should avoid cascading so, as a corollary to this, you don't have to repeat the modifier where it isn't needed.
For your Modifier I'd write something like this:
.b-content--m-compact {
width: 50%;
}
In your example the Block and the Modifier set only the width, so this is a limited use case. In general it comes handy to use some kind of CSS preprocess to ease the code writing, e.g. in SASS:
.my-block
width: 100%
color: red
&--modifier
#extend .my-block
border: 1px solid red
which will results in:
.my-block, .my-block--modifier {
width: 100%;
color: red;
}
.my-block--modifier {
border: 1px solid red;
}
Modifier in BEM looks like this: .block_modName_modValue
You can add additional class - but it's not BEM. And also modifiers have a name and value.
Block in BEM set namespace
So you set default styles for blocks and all unique(that can be changed) place in css with modifiers. This way your styles don't messed up.
To do this you need:
Place common styles in block styles(.portfolio)
Place unique style(with modifiers) like this.(portfolio_theme_list)
In css you don't need to separate this(preprocessor will be needed).
.portfolio {
/* common styles */
&_theme_list {
/* modifiers style */
}
}
In BEM project-stub(template engine) it would look like this:
If you add modifier to block. Then compile(bemjson) to html.
{
block : 'portfolio',
mods : { theme : 'list' },
}
You will see this code
<div class="portfolio portfolio_theme_list">
</div>
You write elements correctly and understand that they need to be separated(without inheritence).
So now you need just define styles for your block with modifier(portfolio_theme_list).
You have 2 options:
1) If you have 2 different blocks - you need separate common and
unique styles. Unique styles place in styles with modified blocks.
2) If you have only 1 different block & you already have styles on
this blocks. Then you can override and don't separate common
styles(but it can cause pain if you add another modifier/instance)

CSS Compatibily Cross-Browser

I'm a web designer and I have a doubt.When I create a site, for styling it I use CSS, but the problem is that the browser understand the CSS n different methods. I mean, if I put a rule in css like mydiv { margin-left: 20px; } in firefox I will see it with 5% distant from left. But if I open the site in Chrome I will see it more than 5% distance from left. And I can understand, because there's not the same graphic engine to use. My question is: Is there any method in CSS to maintain the same disntace, width, height and other, in firefox and chrome ( because there are the most used browser) ? I've heard about a -moz-document-url, that say that all rules aplies there will be applied only for Firefox. It is right ?
You can use this reset :
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
padding: 0;
margin: 0
}
NOTE
mydiv { margin-left: 20px; } doesn't exist in css mybe you mean #mydiv
{ margin-left: 20px; } or .mydiv { margin-left: 20px; }
I suggest that you use the Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

GWT UiBinder style primary name not working

I'm trying to override a particular widget's style using UiBinder. What am I overlooking?
<ui:style>
/*************
* Note #1
*************/
.btnVote {
display: inline-block;
width: 50px;
height: 50px;
background: #fff;
margin: 5px;
text-align: center;
outline: none;
cursor: pointer;
}
/*************
* Note #2
*************/
.btnVote-up-hovering, .btnVote-down-hovering {
background: #ddd;
}
.btnVote-up-disabled, .btnVote-down-disabled {
border-shadow: inset 0 1px 3px #aaa;
}
.lblName {
line-height: 50px;
font-size: 40px;
padding: 5px 10px;
}
.clear {
clear: both;
overflow: auto;
}
.floatLeft {
float: left;
}
</ui:style>
<g:HTMLPanel styleName="{style.clear}">
<g:FlowPanel styleName="{style.floatLeft}">
/*************
* Note #3
*************/
<g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
(+)
</g:PushButton>
<g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
(-)
</g:PushButton>
</g:FlowPanel>
<g:FlowPanel styleName="{style.floatLeft}">
<g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
</g:FlowPanel>
</g:HTMLPanel>
Note 1: This rule is being applied and works fine
Note 2: This other rules seem to be getting ignored (they don't take effect)
Note 3: The default naming for the widget is being reset, hence Note 1 works fine. The base class is set to GOGXR1SCFI instead of gwt-PushButton
Why aren't they other rules working? When I hover the widget, the class GOGXR1SCFI-up-hovering is indeed set to the widget, but no accompanying CSS.
Thanks for your help.
Update
Something I ran into that gave me a hard time for a while: when you use the #external keyword, you must place a semi-column at the end of the #external statement, as in:
<ui:style>
#external .btnVote;
.btnVote {
...
}
</ui:style>
<g:FlowPanel styleName="{style.btnVote}"/>
One thing you could do is to create your CSS using ClientBundle, define all the different states there, then handle the various states manually. This way you don't need to define classes as #external, and GWT will optimize the CSS for you (shorten the names, only ship what gets used, etc.). This is especially beneficial for custom widgets and such.
The easiest way to deal with this is to write #external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled at the top of your <style> section.
The original GWT widgets do not work well with CSS resources (like the one you have in your UiBinder). They depend on a primary style name that they append things like "up-hovering" to. This is terrible for CSS resources and UiBinders because when you type "up-hovering" it becomes things like SDLFJKS.
The button styles do NOT get obfuscated (so you can read "up-hovering"). Your UiBinder styles DO get obfuscated. You can never make them match as long as obfuscation is going on.
So, the #external keyword tells UiBinder and CssResource not to obfuscate certain styles. Now, when you use {style.btnVote-up-hovering}, that will actually come through to the final HTML, which is where these old-fashioned GWT styles will be applied.
I suspect you have CSS stylenames being obfuscated by GWT in your UIBinder. Reference - garbled css name when styling within UiBinder
Chose the approach you find easier to integrate in your proces. Cheers :)

are these css classes names good?

See section /* Common Classes */ of this page.
http://webdesign.about.com/od/css/a/master_stylesht_2.htm
are these css classes good, to use in any project? in terms of semantic?
/* Common Classes */
.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }
No. They are not good choices. The whole point of css and in particular about the concept of class is to describe "what" something represents, not "how" it should appear. What something means (i.e. its semantics) and how it appears (i.e. its presentation) are two separated concepts. The fact that something is, say, a menu does not change if you decide to show it blue on light blue with one stylesheet and high contrast black on white on another stylesheet made for colorblind people.
If you give class a presentation meaning, changing how a document appears would require changes in the web page html, defeating the whole point of having CSS as a technology specifically designed to provide and encapsulate presentation. To prevent this, the alternative would be to end up having classes whose names do not represent reasonable information (e.g. class called "bluefont" which actually contains a color:red directive). Hence, having "bluefont" as a name is totally arbitrary, and here becomes desynchronized with the actual content. It could have been a random string "abgewdgbcv", but then it's better to choose something that is unrelated to presentation and conveys meaning: its associated semantics.
And we close the circle: it's the whole point of classes. See also this document at W3.
No, not really.
Preferrably a class name should describe what you use it for, not exactly what it does.
If you for example name a class "bluebold" and then decide that you want the text to be red and italic, you either have to create a new class and change it everywhere it's used, or you end up with a class name that no longer fits.
One point that I would like to suggest is, when you are extending these just make sure that you just use verbs instead of using any adjectives as names for the classes and you should be good!
Edit:
I agree with others point of class names representing what it is used for, not exactly what it does.
Common CSS classes are way too granular and promote classitis problem. Pseudo selectors can mitigate the problem to some extent. Assuming a new website is being designed I would do the following:
*{
margin:0;
padding:0
}
li {
list-style: none;
list-style-image: none;
}
The rest are difficult to address, floatLeft and floatRight are to be defined by the layout,
<div id="main">
<div class="searchPanel">
</div>
<div class="resultsPanel">
</div>
</div>
The CSS ideally should look like ( layout driven)
#main searchPanel {
float: left;
}
#main resultsPanel {
float: right;
}
Hope you get the idea. I however, face problems with bold/underlined text. Underlined text is indicative of ugly design. Users tend to confuse such with hyper-links
some recomendations:
.floatLeft --> .float-left:
no camel cased.
.bold --> .important
name should tell the goal no showing how to do it
.nobullet --> ul.nobullet
is better to be most specified to avoid conflict with other css.

Resources