I have the following SASS code.
How would I do the exact same but using the BEM methodolgy?
nav.primary ul {
border-top: 2px solid $darkgreen;
display:block;
margin:10px 0 0 0;
padding: 25px 0 0 0;
li {
background-color:#004f5a;
display: inline-block;
float: none;
margin-left:0;
padding: 5px 0;
text-align: center;
width: 100%;
a {
color:#fff;
letter-spacing: 0.5px;
&:hover {
color:$darkgreen;
}
}
}
}
For example, make a block .primary-nav with three elements .primary-nav__ul, .primary-nav__li, .primary-nav__a.
.primary-nav {
&__ul {
border-top: 2px solid $darkgreen;
display: block;
margin:10px 0 0 0;
padding: 25px 0 0 0;
}
&__li {
background-color: #004f5a;
display: inline-block;
float: none;
margin-left: 0;
padding: 5px 0;
text-align: center;
width: 100%;
}
&__a {
color:#fff;
letter-spacing: 0.5px;
&:hover {
color: $darkgreen;
}
}
}
BEM is a naming convention for classes (distinguishing identifiers and modifiers); the concept is to create ,very strict, single class selector.
The way this is achieved is through SCSS ampersand selector;
In your scenario , since you're markup doesn't combine classes to customize elements, it doesn't make much sense.
Related
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
A developer recently changed the formatting of my style.css file from:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
.header h3 a {
color: #636c72;
}
.header ul.nav {
margin-top: 4px;
}
to this:
.header {
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
padding: 15px 10px 0 10px;
height: 80px; }
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem; }
.header h3 a {
color: #636c72; }
.header ul.nav {
margin-top: 4px; }
My Question
I can see that the new developer has changed the formatting to a nested style which is fine I guess BUT I'm wondering if this will have any implications on my app which currently uses SCSS? More specifically I'm wondering if the new developer has used SCSS to do this or he's introduced something new to my project which I don't know about.
I have zero knowledge of css hence the question.
I have the following .css.scss file
.book-list li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
width:175px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
Now I wish to style a very similar list called .todo-list.
The only differences are:
.todo-list li element has width of 125px instead of 175px.
.todo-list li element does NOT have the special styling for the first-child
I would style my html in the following way:
<ul class="book-list">
<li>...
</li>
<li>...
</li>
</ul>
or
<ul class="todo-list">
<li>...
</li>
<li>...
</li>
</ul>
How can I achieve the above without duplicating the whole block?
(Essentially I'm looking for ways to add if-else condition in the css file.)
Thank you
You could use Mixins to re-use common code.
#mixin common-code {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li {
width:175px;
#include common-code;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
.todo-list li {
width:125px;
#include common-code;
}
As far as I know, there are no If-Else clauses in SASS or pure CSS.
You can achieve this using the CSS attribute selector and the $= operator (which means 'ends with'):
[class$="list"] li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
.book-list li {
width:175px;
}
.todo-list li {
width: 125px
}
I do not believe that there is a way to add logic css files. You could do it using javascript, however a pure css solution is possible.
.book-list li, .todo-list li {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list li {
width: 175px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
.todo-list li {
width: 125px;
}
Note: In css the last property given to an element will be the one used. This means that you can style .todo-list li to overwrite the previous assignment of width and &:first child should you wish to do so.
You can use inheritance in Sass like:
.list {
display: inline-block;
margin-bottom:5px;
margin-left:5px;
color: #c4c5c7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.book-list {
#extend .list
li {
width: 125px;
&:first-child {
width: 535px;
margin: 0 0 5px 5px;
padding: 0 0 5px 5px;
border-bottom: 1px dotted #6b6a6c;
}
}
}
.todo-list {
#extend .list;
li {
width: 175px;
}
}
I have only just started using Sass this morning, after reading about it last night. I think I'm understanding it (but feel free to to comment if you disagree). I've ran into one problem though, be it minor but inducing an OCD head ache.
ul#primary-nav {
font: 400 16px $font-stack;
margin: 0 auto;
text-align: center;
li {
display: inline-block;
margin: 0 15px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
a {
color: $grey;
padding: 10px 5px 15px 5px;
&:hover {
border-bottom: $blue solid 6px;
.active {
font-weight: 700;
}
}
}
}
This outputs the following code:
ul#primary-nav {
font: 400 16px "Lato", sans-serif;
margin: 0 auto;
text-align: center; }
ul#primary-nav li {
display: inline-block;
margin: 0 15px; }
ul#primary-nav li:first-child {
margin-left: 0; }
ul#primary-nav li:last-child {
margin-right: 0; }
ul#primary-nav li a {
color: #777777;
padding: 10px 5px 15px 5px; }
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px; }
ul#primary-nav li a.active {
border-bottom: #25aae1 solid 6px;
font-weight: 700; }
So the code itself is fine for what I want but I was wondering why it is adding the closing paragraph tag to the last line. Is there a way to force it on the line below
ul#primary-nav li a:hover {
border-bottom: #25aae1 solid 6px;
}
I know it's only a small thing but it would make me ever so happy.
Yes it is entirely possible to satisfy your OCD needs: basically you need to make sure the compiler is outputting in expanded style.
From the docs:
Nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
Expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
From the command do this with sass style.css --style expanded, but your build system might also expose the option somewhere - check its docs.
I'm having problem with this style, the content body wraps around the menu bar, I've tried removing the float but nothing happens.
.menu {
float: left;
padding: 0;
width: 100%;
margin: 0 0 1em 0;
}
.menu ul {
width: 1100px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.menu li {
float: left;
}
.menu li a {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
padding: 2px 10px;
text-decoration: none;
}
.menu a:hover {
color: #FFFFFF;
border-radius: 5px;
border-style: solid;
border-color: #666666;
border-left: 1px;
border-right: 1px;
box-shadow: #333 3px 3px 4px;
}
.content {
width: 1100px;
margin: 0 auto;
}
the content writes next the last link.
You don't have any clear in your CSS. Make sure that the first element after the floating div gets cleared.