Can I use something like this in css?
.bordered
{
border: 10px dashed yellow;
}
form input
{
use .bordered;
font-size: 10px;
}
Or how can this be achieved without writing each css code block to html element?
Well, you can always add class(es) to the input.
You could normalize/refactor your classes so that they are more generic (but do not overdo this). Example:
.bordered {
border: 10px dashed yellow;
}
.smaller {
font-size: 10px;
}
<form>
<input class="bordered">
<input class="smaller">
<input class="bordered smaller">
</form>
Fast answer:
.bordered, form input { border: 10px dashed yellow; }
form input { font-size: 10px; }
Solutions for re-usable code is to use CSS Preprocessor - LESS or SASS or you can create a new class and call it whatever you want and add styles to it.
Ten Reasons You Should Be Using a CSS Preprocessor - https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor
References:
LESS
SASS
Unless you are using CSS preprocessors, you could do it like so:
.bordered,
form input {
border: 10px dashed yellow;
}
form input {
font-size: 10px;
}
or, if you want to avoid to list all selectors one by one, you could create a class with that style and add that class to your elements
Related
I'm having a hard time understanding how to properly write scss with BEM naming conventions.
Here I have some HTML:
<div class="SomeBlock">
<div class="SomeBlock__someElement">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--greenBG">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--orangeBG">text</div>
</div>
And the follow scss:
.SomeBlock {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
&__someElement {
background: blue;
text-align: center;
&--greenBG {
background: green;
}
&--orangeBG {
background: orange;
}
}
}
What I would expect to happen is to have 3 different blocks, all identical but with different colored backgrounds, and this is what happens excepted the text is not centered as I would expect it to be since my element style has text-align: center;
What am I misunderstanding? I've read some tutorials on scss with BEM, but I still do not understand.
Be careful when you reference parent selectors using & in Sass because it does not do what you think it does.
In normal nesting in SCSS, this:
a {
b {
/* styling */
}
}
generates a b { /* styling */ }.
However, when you reference parent selectors using &, this:
a {
&__b {
/* styling */
}
}
turns into: a__b { /* styling */ } // note that this is one class.
What BEM advocates is the use of a systematic way of naming classes to style your document, but manually writing out BEM is a nightmare. Sass parent selector referencing using & makes writing out BEM easy, but you still have to remember that you're only generating class names and not actually nesting when using the & in Sass.
What this all means is that in your case, you'll need to add each of the following classes for your various CSS rules to apply:
<div class="SomeBlock SomeBlock__someElement SomeBlock__someElement--greenBG">text</div>
Actually, you were a bit closer in using BEM accurately than #dippas. I would modify your code like this:
<div class="some-block">
<div class="some-block__some-element">text</div>
</div>
<div class="some-block">
<div class="some-block__some-element some-block__some-element--green-bg">text</div>
</div>
<div class="some-block">
<div class="some-block__some-element--orange-bg">text</div>
</div>
scss
.some-block {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
&__some-element {
background: blue;
text-align: center;
&--green-bg {
background: green;
}
&--orange-bg {
background: orange;
}
}
}
Here's simplified outputted css to put things in perspective.
.some-block {
/* block styles */
}
.some-block__some-element {
/* element styles */
}
.some-block__some-element--green-bg {
/* element mod styles */
}
As a general rule, whenever you want to use a modifier you'll need to remember to add the element class an additional time with the modifier. So for your element you have a base class of '.some-block__some-element'. You'll need to add this to all the elements that need this class. Then use that same class and add it again to the element with the modifier. In your example, since you only added that base class to the first occurrence of the three elements, css will naturally only style that one with background: blue, and text-align: center.
Additionally, although you can technically get away with using uppercase class names, I would recommend using lowercase class names and separating multiword names with a single hyphen instead of using upper camel casing.
This is the best way to name classes accordingly to BEM methodology:
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}
Take a look at BEM 101 from CSS Tricks
So I would use it single classes to simplify.
.someblock {
margin: 10px 0 0 0;
color: white;
width: 100px;
height: 50px;
background: red;
}
.some__element {
background: blue;
text-align: center;
}
.green--bg {
background: green;
}
.orange--bg {
background: orange;
}
<div class="someblock">
<div class="someblock some__element">text</div>
</div>
<div class="someblock">
<div class="someblock some__element green--bg">text</div>
</div>
<div class="someblock">
<div class="someblock some__element orange--bg">text</div>
</div>
I have a nested div structure like this:
<div class="Button" id="StartButton" >
<div class="buttonIcon" id="startButtonIcon"></div>
<div class="buttonText" id="startButtonText">Start</div>
</div>
and a couple LESS mixins I use to format the parent div as a button shape, the icon as an actual image, and the text as special formatting like this:
.button-base() {
... LESS code here
}
.buttonIcon(#image) {
... LESS code
}
.buttonText() {
... LESS code
}
and here's my LESS structuring for the HTML:
#startButton {
.button-base();
#startButtonIcon {
.buttonIcon('img/icon_start_default.png', 'img/icon_start_hover.png');
}
#startButtonText {
.buttonText;
}
}
What I'd like to do is apply the hover selector in the .button-base() LESS mixin and have it change the image and text of the nested DIVs appropriately. I can't seem to figure out the right way to use the & selector in the parent Mixin.
I'm also open to restructuring the DIV group so that i can control the Icon & text from just 1 LESS mixin. I'm not sure how I would do that though, since i'm also such a beginner at HTML, LESS/CSS etc.
Any help is appreciated!
BTW, here's a jsFiddle that shows what I'm trying to accomplish. I know you can hard code the CSS, but I'm trying to avoid that and use best practices and automate as much as possible with the LESS code: http://jsfiddle.net/tLfqzq8c/3/
Here's what you loking for:
.Button {
width: 115px;
height: 30px;
border-color: #ececec;
border-width: 1px;
border-style: solid;
text-align: center;
vertical-align: middle;
line-height: 30px;
display: inline-block;
color: #666666;
background: #ececec url('http://res1.windows.microsoft.com/resbox/en/6.3/main/89ff52cc-8b6d-4a8e-bae3-5bfca40dcb59_18.png') no-repeat 10%;
}
.Button:hover {
color: white;
background-image: url('http://www.phiadariasoft.com/main/images/windows_icon.png');
}
Here's the html:
<div class="Button" id="StartButton" >
Start
</div>
I want to know is it possible to add some flexibility to css via this:
<div class='round5'></div>
where .round is a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place.
For anyone stumbling across this in 2018, whilst not fully supported CSS variables now give you the ability to pass a variable directly into your class.
<div class="round" style="--radius: 100%;"></div>
<style>
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
You can also define root variables and pass them in as well
<div class="round" style="--radius: var(--rad-50);"></div>
<style>
:root {
--rad-0: 0%;
--rad-50: 50%;
--rad-100: 100%;
}
.round {
display: block;
height: 40px;
width: 40px;
border: 1px solid #BADA55;
border-radius: var(--radius);
}
</style>
This is also scoped to the element as well. If you set the --radius in one element is wont effect another element. Pretty jazzy right!
You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by.
However, you can do something kind of similar with multiple classes and different properties:
HTML:
<div class="rounded blue"></div>
<div class="rounded green"></div>
CSS:
.rounded {
border-radius: 5px;
}
.blue {
background: blue;
}
.green {
background: green;
}
The .rounded class adds the border radius and the .blue and .green classes add the background color.
(I like to name and order the classes such that they read logically, like <div class="large box"></div>, etc.).
Here is an answer that I came up with that requires a small amount of jQuery, and a small knowledge of Regex.
$(function() {
var number = $("div").attr("class").match(/\d+$/);
$("div").css({
"width": "100px",
"height": "100px",
"background-color": "green",
"border-radius": number + "px"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='round54'>hello</div>
The .match() function uses Regex. Regex is used to detect parts of strings. The \d detects any digits. The + matches the previous selector 1 or more times. In other words, the number can be a multi digit number. And the $ means it has to be at the end.
So then the jQuery uses that in the border-radius property later. All you have to do is append px, and you are good to go.
Fiddle
You could do something similar but not exactly the way you've put it.
CSS
.radius{
border-radius: 10px;
border: 1px solid red;
}
.r5{
border-radius:5px;
}
HTML
<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>
Working Example
In the example above the red border will be retained but the border-radius will change.
Note that you don't start class names with numbers, hence r5 rather than 5
You can use multiclassing on the element. Eg.:
HTML:
<div class="round">Box without border radius</div>
<div class="round rounded-5">Box with 5px border radius</div>
<div class="round rounded-10">Box with 10px border radius</div>
CSS:
.round {
border: 1px solid #000;
width: 100px;
height: 100px;
}
.round.rounded-5 {
border-radius: 5px;
}
.round.rounded-10 {
border-radius: 10px;
}
you can do this. but you have to create the css in the html document(not linked, but between the <style> tag). you can use php or javascript to make a loop. for example try this:
<style>
<?php
$round = 5;
for ($round = 50; $round <= 150; $round+=25){
echo "#round$round{
height: 300px;
width: 300px;
background: #f00;
border-radius : ".$round."px;
margin: 2px;
}
";
}
?>
</style>
<?php
for ($round=50;$round<=150; $round+=25){
echo "<div id='round$round'>
</div>
";
}
?>
hope this helps! :D
Maybe what you want is like this
CSS
.round {
border-radius: 4px; /*it's default when you juse using .round*/
}
.round.five {
border-radius: 5px;
}
.round.ten {
border-radius: 10px;
}
HTML
<div class="round five">something</div>
You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.
div[class*="round"] {
background-color: green;
color: white;
padding: 10px;
}
And then targeting specific variants of it using...
div[class="round5"] {
border-radius: 5px;
}
The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.
So, I have a simple login page that has a light green background, and would like to change the background color to a light red when the 'loginbox' div with id = 'loginbox' also has a class 'error'. My page looks as follows:
VALID HTML http://i1154.photobucket.com/albums/p525/covertcj/ScreenShot2012-01-16at20759PM.png
with the relavent HTML looking like:
HTML (Before adding error class):
<div id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
With the CSS given below, I feel that this should work; however, when adding the error class to the div, nothing happens.
CSS:
#loginbox {
margin: auto;
padding: 25px 50px;
width: 300px;
height: 100px;
border: 1px solid #e9e9e9;
background: #EBFFEF;
}
#loginbox .error {
background: #FFEBEB;
}
#loginbox input {
height: 15px;
margin: 3px 0px;
width: 190px;
float: right;
}
#loginbox span {
height: 15px;
width: 60px;
margin: 3px 0px;
padding: 3px 0px;
float: left;
}
#loginbox button {
margin-top: 30px;
float: right;
}
HTML (After after error class):
<div class="error" id="loginbox">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Am I possibly misusing this technique? Any help in this matter would be greatly appreciated.
Thanks,
Chris Covert
Your selector is incorrect: #loginbox .error is selecting all elements with class error contained within the element selected by #loginbox. This works exactly the same way that #loginbox input works - You're selecting input elements within the #loginbox div.
To refine a selector with additional class/attribute selectors, you need to chain them together without whitespace. In your specific example, remove the space and use:
#loginbox.error { ... }
Always remember, seperating your selectors by whitespace means you're selecting nested tags.
the problem is here:
#loginbox .error {
The #loginbox has class .error, so you need to target that with no space between:
#loginbox.error {
HTML:
<div id="loginbox" class="error">
<span>Username:</span>
<input>
<span>Password:</span>
<input>
<button>Submit</button>
</div>
Should work just fine if you change
#loginbox .error
to
#loginbox.error
Adding a space means you are styling a sub-element of #loginbox. With no space, we are selecting the <div /> with id loginbox AND having the class error
I am new to programming, I don't understand why should we use multiple classes in HTML. I mean in any way even if it is one class or multiple class, all CSS style is going to apply to the same content/text only, then what's the use of multiple classes when a single class will do the same thing?
You use multiple classes to keep you code DRY (Don't Repeat Yourself) for instance lets say you have two buttons a blue primary button and a red secondary button.
.red-button {
background-color: red;
border-radius: 3px;
color: #fff;
padding: 10px;
}
.blue-button {
background-color: blue;
border-radius: 3px;
color: #fff;
padding: 10px;
}
Here you have repeated css.
With multiple classes you can do something like
.button {
border-radius: 3px;
color: #fff;
padding: 10px;
}
.button.red {
background-color: red;
}
.button.blue {
background-color: blue;
}
It allows you the ability to re-use classes where you need similar characteristics. If you wrote the styles individually for each element, you would have a lot of duplicate code
A class is a way of marking an element as part of a group. Something can belong to multiple groups.
.agent {
background: #afa;
margin: 5px;
padding: 5px;
width: 10em;
list-style: none;
}
.double-agent {
background: #faa;
}
<ul>
<li class="agent">Edger Raven</li>
<li class="agent">Simon Sly</li>
<li class="agent double-agent">Sergei Skripal</li>
<li class="agent double-agent">Belgian Butcher</li>
<li class="agent">Jack the Mechanic
</li>
</ul>
I think you want to ask this:
.a{
height:20px;
width:50px;}
.b{background:red;}
<div class="a b"></div>
Why did I use "a" and "b" instead of just using "a" and applying the code of .b{} in .a{}
Consider this case:
.head{font-size:50px;}
.green{color:green;
margin:100px;}
<p class="head">This is an example</p>
<p class="head green">Hello World!</p>
<p class="green">i love maths</p>
<p class="green">3+3=3!</p>
So I wanted to make some content green, and some content big. The "Hello World!" line had both. That is why I used 2 different classes, so I won't have to repeat the same code again for "Hello World!"
The example I gave was a pretty lame one, but yes, you will have to use multiple classes so that you can use the same CSS code for other tags in your HTML without repeating the code.