Scribd
Upload
13 views

Top 12 CSS Code Tips

Resumen css

Uploaded by

faiberhdzrtecsistem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Top 12 CSS Code Tips

Resumen css

Uploaded by

faiberhdzrtecsistem
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Top 12 CSS code Tips

Use CSS selectors wisely 2


Use CSS cascading and inheritance 3
Use CSS units for length values 4
Use CSS shorthand properties 5
Use CSS reset or normalize 6
Organize your code with CSS cascading and inheritance 7
Use CSS Flexbox or CSS Grid for layout 8
Use CSS preprocessors 9
Optimize your styles for performance 10
Use media queries 11
Use CSS Flexbox for flexible layout 12

Laurence Svekis https://basescripts.com/


Use CSS Transitions for smooth animations 13

Use CSS selectors wisely


Use CSS selectors wisely: CSS selectors allow you to target
specific elements in your HTML and apply styles to them. It's
important to use the most specific selector possible to target the
elements you want to style. For example:

<style>
/* Target elements with a specific class */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Target elements with a specific ID */
#header {
background-color: lightgray;
padding: 20px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>Welcome to my website</h1>
</div>
<p>This is some example text.</p>
<p class="highlight">This text is highlighted.</p>
</body>

Laurence Svekis https://basescripts.com/


In this example, the CSS class .highlight is used to apply a yellow
background and bold font to the text in the second paragraph.
The CSS ID #header is used to apply a light gray background,
padding, and centered text to the div with the ID of header.

Use CSS cascading and inheritance


Use CSS cascading and inheritance: CSS styles are cascaded,
meaning that styles are passed from parent elements to child
elements. You can use inheritance to your advantage to simplify
your CSS code. For example:

<style>
/* Define a CSS class for the parent element */
.container {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
/* Child elements will inherit the styles from the
parent */
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Laurence Svekis https://basescripts.com/


<div class="item">Item 4</div>
</div>

In this example, the styles defined in the .container class are


inherited by the child elements with the .item class.

Use CSS units for length values


Use CSS units for length values: When specifying length values in
CSS, it's important to use appropriate units, such as px, em, rem,
etc. For example:

<style>
.container {
padding: 20px;
background-color: lightgray;
}
.item {
width: 200px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

Laurence Svekis https://basescripts.com/


In this example, the padding, width, height, and margin values all
use appropriate units.

Use CSS shorthand properties


Use CSS shorthand properties: CSS shorthand properties allow
you to specify multiple values in a single line of code. This can
make your CSS code more concise and easier to read. For
example:

<style>
.container {
padding: 20px;
background-color: lightgray;
}
.item {
margin: 10px 20px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

In this example, the margin property for the .item class uses
shorthand to specify a top and bottom margin of 10px and left
and right margins of 20px.

Laurence Svekis https://basescripts.com/


Use CSS reset or normalize
Use CSS reset or normalize: A CSS reset or normalize stylesheet
can be used to ensure consistent styling across different
browsers. This can help prevent cross-browser compatibility
issues. For example:

<style>
/* Use a CSS reset stylesheet */
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Add your own styles */
body {

Laurence Svekis https://basescripts.com/


font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>

In this example, a CSS reset stylesheet is used to remove all


default styles and ensure a consistent starting point for styling.
The body element is then given a font family and size.

Organize your code with CSS cascading and


inheritance
Organize your code with CSS cascading and inheritance: CSS
uses cascading and inheritance to determine which styles should
be applied to an element. By understanding these concepts, you
can write more efficient and organized CSS code. For example:

<style>
/* Define a general style for all links */
a {
text-decoration: none;
color: blue;
}

Laurence Svekis https://basescripts.com/


/* Override the style for a specific class of links
*/
.button {
background-color: lightgray;
color: white;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
}
</style>
<body>
<a href="#">Link</a>
<a href="#" class="button">Button</a>
</body>

In this example, all links have a text-decoration of none and a


color of blue. However, for links with the .button class, the
background color, color, padding, border radius, and display are
overridden.

Use CSS Flexbox or CSS Grid for layout


Use CSS Flexbox or CSS Grid for layout: Flexbox and Grid are
modern CSS layout systems that make it easier to create flexible
and responsive designs. For example (using Flexbox):

<style>
.container {
display: flex;
flex-wrap: wrap;
}

Laurence Svekis https://basescripts.com/


.item {
flex-basis: calc(33.33% - 20px);
margin: 10px;
background-color: lightblue;
}
</style>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>

In this example, the .container class is set to use Flexbox with a


flex-wrap of wrap to allow items to wrap onto multiple lines. The
.item class has a flex-basis of calc(33.33% - 20px) to make the
items equal width and leave room for the margins.

Use CSS preprocessors


Use CSS preprocessors: CSS preprocessors such as Sass, Less,
and Stylus add additional features to CSS, making it easier to
write and maintain complex styles. For example (using Sass):

// Define a variable for the primary color


$primary-color: lightblue;

// Define a mixin for rounded corners


@mixin rounded-corners($radius) {

Laurence Svekis https://basescripts.com/


border-radius: $radius;
}

// Use the mixin and the variable in styles


.box {
background-color: $primary-color;
@include rounded-corners(10px);
padding: 20px;
}

In this example, the $primary-color variable is defined to be


lightblue, which can be reused throughout the styles. The
rounded-corners mixin is defined to accept a $radius value and
apply it to the border-radius property. The mixin is then used in
the .box class to apply rounded corners with a radius of 10px.

Optimize your styles for performance


Optimize your styles for performance: Writing performant CSS is
important for ensuring a fast-loading website. Some tips for
optimizing your CSS include: reducing the size of your CSS file,
using fewer and simpler selectors, and avoiding complex CSS
expressions. For example:

<style>
/* Use a simple selector */
.box {
background-color: lightblue;
padding: 20px;
}
/* Avoid using complex expressions */

Laurence Svekis https://basescripts.com/


.box:nth-child(3n + 1) {
background-color: lightgray;
}
</style>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</body>

In this example, the selector for the .box class is simple, using
only the class name. The selector for the style that changes the
background color of every third box uses the nth-child
pseudo-class, which is less complex than using multiple class
names or multiple selectors.

Use media queries


Use media queries to adjust styles based on different screen
sizes: Media queries allow you to apply different styles based on
the size of the screen. This is important for ensuring that your
website looks good on different devices. For example:

<style>
/* Default styles */
.box {
width: 100%;
padding: 20px;
text-align: center;
background-color: lightblue;

Laurence Svekis https://basescripts.com/


}
/* Styles for screens wider than 600px */
@media (min-width: 600px) {
.box {
width: 50%;
}
}
</style>
<body>
<div class="box">Box</div>
</body>

In this example, the default styles for the .box class set its width
to 100% and its background color to lightblue. The media query
checks if the screen width is at least 600px wide, and if so, sets
the width of the .box to 50%. This means that the box will take
up half of the screen on devices with a screen width of 600px or
more, and will take up the full screen on smaller devices.

Use CSS Flexbox for flexible layout


Use CSS Flexbox for flexible layout: CSS Flexbox is a layout
model that makes it easy to create flexible and responsive
designs. Flexbox is useful for arranging elements in a row or
column, aligning elements, and controlling the distribution of
space. For example:

<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;

Laurence Svekis https://basescripts.com/


align-items: center;
}
.box {
width: 30%;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>

In this example, the .container class is set to use the display: flex
property to activate Flexbox. The flex-direction property is set to
row to arrange the elements in a row. The justify-content
property is set to space-between to distribute the space between
the elements evenly. The align-items property is set to center to
align the elements vertically in the center of the container. The
.box class sets the width of each box to 30% and the height to
100px. This results in the three boxes being arranged in a row,
with equal space between them, and centered vertically.

Use CSS Transitions for smooth animations


Use CSS Transitions for smooth animations: CSS transitions allow
you to smoothly animate changes to the styles of an element.

Laurence Svekis https://basescripts.com/


Transitions are a great way to add a subtle and professional touch
to your website. For example:

<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 2s, height 2s;
}
.box:hover {
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box">Hover over me</div>
</body>

In this example, the .box class sets the width and height of a box
to 100px and the background color to lightblue. The transition
property is set to width 2s, height 2s to animate changes to the
width and height over 2 seconds. The .box:hover selector targets
the box when the user hovers over it, and changes the width and
height to 200px. As a result, when the user hovers over the box,
it will smoothly animate from 100px to 200px in both width and
height over 2 seconds.

Laurence Svekis https://basescripts.com/

You might also like