I'm theming a project which has a base CSS file. I am meant to style the site using BEM, but am having trouble with this base file (which I cannot edit).
For example, there is a CTA a tag in the main-menu element, whose font-size I have styled as:
.main-menu {
&__cta {
font-size: .875rem;
}
}
But this is overwritten by the base.css:
.main-menu a {
font-size: 1rem;
}
I can make a selector like .main-menu .cta { but this breaks my BEM. I can also use !important; but this feels wrong.
Is there any 'BEM way' of getting around this problem?
PS, HTML for this example would be:
<div class="main-menu">
<!--menu items-->
<a class="main-menu__cta">Call-to-action</a>
</div>
You could use a double ampersand to increase the specificity, like this:
.main-menu {
& &__cta {
font-size: .875rem;
}
}
jsfiddle
The key to this is specificity, try something like below or even including a class or element outside of the snippet you've shown us to make your style more specific to your target.
div.main-menu {
&__cta {
font-size: .875rem;
}
}
Related
I have the following problem:
I have a font with a given style in a css class:
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
And now I have a css that gives me the size of a div in a given situation:
.a_div_test {
width:300px;
max-width:350px;
}
I want the a_div_test to have the properties of the font_arial_36, like an inheritance.
Somethin like (this is wrong just posting what I wanted):
.font_arial_36 {
font-family:Arial;
font-size:36px;
}
.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}
and now the .a_div_test should also have the font_arial_36 properties.
Is it possible with css?
PS: I do not want to add multiple classes to an Html Element like that:
<div class="font_arial_36 a_div_test"></div>
Because I should rewrite my code in many places where .a_div_test appear.
This is not possible in CSS. What you do is you assign the 2 classes to the element you want.
<div class="font_arial_36 a_div_test"></div>
CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.
That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.
That is, the inheritance is defined by the HTML structure, not the CSS itself.
why you need to extend when you can add multiple classes with space on HTML element.
<div class="font_arial_36 a_div_test">Like this</div>
As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:
<button class="uiButton disabledButton">Click Here</button>
For below CSS:
.uiButton {
background-color: gray;
color: lightgray;
font-size: 20px;
font-family: "Segoe UI", Helvetica, sans-serif;
text-align: center;
text-decoration: none;
padding: 10px 10px;
border:none;
display: inline-block;
margin: 5px 5px;
cursor: pointer;
}
.disabledButton
{
background-color: gray;
color: lightgray;
cursor: not-allowed;
}
In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).
But, there is a better way:
Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide
Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).
if you don't want to add multiple classes to html element then
.font_arial_36, .a_div_test {
font-family:Arial;
font-size:36px;
}
.a_div_test {
width:300px;
max-width:350px;
}
other than this no other possible way seems to be there for inheritance in css, we have to use sass
Let's say I have the following markup.
<div class="parent1">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="parent2">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
If I only want to style inner1 of parent1 then I can do something as follows.
.parent1 .inner1{}
However if I want to specify different styles for each of the inner containers then I have to write .parentx in each statement. So my question is can I nest my css statements? The logic would resemble the following:
.parent1{
.inner1{}
.inner2{}
}
.parent2{
.inner1{}
.inner2{}
}
CSS itself does not allow nesting. However, clever guys these days came up with a concept of pre-compiled CSS, such as SASS, LESS etc.
http://lesscss.org/
For example, in LESS something like this is allowed:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But if you are stuck with raw CSS, then what #Brian suggested in his answer would be the best option:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
What you want is:
.parent1 .inner1,
.parent1 .inner2 {
/*styles*/
}
.parent2 .inner1,
.parent2 .inner2 {
/*styles*/
}
This will apply the styles to the 2 lots accordingly.
CSS doesn't give us much in the way of reducing keystrokes. This is why projects like Less and Sass were created.
The shorthand you've described there would be nice, but sadly is not a feature of CSS. The selectors are always read right to left, so .parent1 .inner1 instructs the browser to "find all items with an inner1 class, then loops through those to find the one(s) that are also a parent1 class.
In your specific example, you might consider one of the following options:
If your styles are specific to a single item (the first div within parent1), consider giving that item an id="foo" and then refer to it as #foo in your CSS.
If you don't want to do that, use the > (child) operator to define rules like this...
.inner1 > .parent1
This applies rules for the .inner1 divs that are directly descended from a .parent1 block.
Hope that helps.
So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:
Take the following example:
// Example "template style"
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
So let's say I want to add that to my footer I would in my HTML go:
<div class="blue_bold" id="footer">
// Content goes here
</div>
This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:
<div class="blue_bold" id="navigation">
// Content
</div>
....
<div class="blue_bold" id="footer">
// Content
</div>
My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)
#navigation, #footer {
attach_style(".blue_bold");
}
That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.
Any ideas? Does this exists?
You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.
Syntax examples here :
LESS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
.blue_bold;
}
SCSS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
#extend .blue_bold;
}
you will need to have a look on sass or less they are your best options.
sass here
less here
You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:
#navigation,
#footer,
.some-other-element,
.another-element
{
// css styles go here that you want to apply to each element listed above
}
Can't see any benefits. What you're asking for is not a standard CSS.
You can define this for all elements with class blue_bold
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
For this block
<div class="blue_bold" id="navigation"></div>
You can simply add another declaration like this:
#navigation, #footer {
background: black;
color: red;
}
Everything from .blue_bold will be used unless overwritten. What's wrong about it?
I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of HTML.
<body>
<section id="content">
<article>
<ul class="posts-list">
<li class="post-item">
<h2>[post title]</h2>
<p class="item-description">...</p>
<p class="item-meta">...</p>
</li>
...
</ul>
</article>
</section>
</body>
Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px / 24px serif;
}
I wanted to style HTML within a ul.posts-list differently, so I wrote these rules.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
However, I ran into some issues. Here is how Chrome is rendering the CSS:
For some reason, the rules #content p, #content li are overriding my rules for .item-description and .item-meta. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?
Edit: Also, where can I read up more about how this hierarchy works?
Elements id have the priority in CSS since they are the most specific.
You just have to use the id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)
The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.
For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:
<p style="color:white" id="itemDescId" class="item-description">...</p>
With the CSS:
p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}
The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.
This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:
http://css-tricks.com/specifics-on-css-specificity/
My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:
li.post-item > * {
margin: 0px !important;
}
.item-description {
color: #FFF !important;
}
.item-meta {
color: #666 !important;
}
The !important rule will override the order of evaluation between id and class.
Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)
Better to follow the CSS standards.
choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)
Given a css file, is there a way to scope the entire file so that it only applies to elements within a given element:
e.g. given:
<div id="container">
<span class="some_element"/>
<!-- etc -->
</div>
Is there a way to scope an entire css file to apply to all elements within "container" without prepending #container to every single css clause?
I’m afraid not. Some CSS pre-processors allow you to write code that achieves the same thing though.
E.g. LESS implements nested rules:
/* This LESS code... */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* ...produces this CSS */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
And Andy mentioned SASS, which does the same thing.
You can use the scoped attribute on a <style> element, although there's little to no browser support for it. In your example:
<div id="container">
<style scoped>.some_element{}</style>
<span class="some_element"></span>
</div>
Here's a jQuery Polyfill: http://thingsinjars.com/post/360/scoped-style/
There are 2 ways you could approach this:
1) In HTML5, (not widely supported yet) there is to be a scoped attribute you can put on a <style> tag. Here is a brief article on the subject.
2) You could use a dynamic stylesheet language (like LESS or SASS) that allow you to nest related CSS rules together.
Not with CSS alone, but you can use Sass, which compiled into CSS.
You could use BEM naming notation -- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ("block, element, modifier").
Your example would become:
<div id="container">
<span class="container__some_element"/>
<!-- etc -->
</div>
Yes, if you don't use an abbreviation, you're writing the same number of characters in your CSS... but your styles will have less specificity -- which can be beneficial.
Hopefully browser support for <style scoped> will get better in the coming years!
You could load the page in with php and throw whatever tag you want in dynamically, or do the same with javascript/jQuery... although that's fairly clumsy. There's no built in method to do this as CSS is always applied to the entire page.